From ced4a5177fe8f000702072a51048dcfe8b7a4c04 Mon Sep 17 00:00:00 2001
From: liub <itliubiao@qq.com>
Date: Thu, 16 Apr 2026 10:04:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=9A=84=E6=8E=A7=E5=88=B6=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E5=8F=8A=E4=B8=80=E4=BA=9B=E5=B0=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/haiba.png                   |  Bin 0 -> 1001 bytes
 src/assets/images/haibaRelative.png           |  Bin 0 -> 1715 bytes
 src/assets/images/jieN.png                    |  Bin 0 -> 994 bytes
 src/assets/images/jieN_HL.png                 |  Bin 0 -> 1014 bytes
 src/assets/images/location.png                |  Bin 0 -> 1052 bytes
 src/assets/images/lonlat.png                  |  Bin 0 -> 877 bytes
 src/assets/images/sgWarn.png                  |  Bin 0 -> 768 bytes
 src/assets/images/sos.png                     |  Bin 0 -> 849 bytes
 src/assets/images/sos_HL.png                  |  Bin 0 -> 865 bytes
 src/assets/images/superStrong.png             |  Bin 0 -> 1060 bytes
 src/assets/images/superStrong_HL.png          |  Bin 0 -> 1107 bytes
 src/assets/images/work.png                    |  Bin 0 -> 989 bytes
 src/assets/images/work_HL.png                 |  Bin 0 -> 992 bytes
 src/components/FileUpload/index.vue           |    2 +-
 src/utils/mqtt.ts                             |    6 +-
 src/views/controlCenter/6075J/TextToHex.vue   |  264 +++
 src/views/controlCenter/6075J/index.vue       | 1594 ++++++++++++++
 src/views/controlCenter/6170/index.vue        | 1837 +++++++++--------
 .../equipmentManagement/devices/index.vue     |    7 +-
 19 files changed, 2804 insertions(+), 906 deletions(-)
 create mode 100644 src/assets/images/haiba.png
 create mode 100644 src/assets/images/haibaRelative.png
 create mode 100644 src/assets/images/jieN.png
 create mode 100644 src/assets/images/jieN_HL.png
 create mode 100644 src/assets/images/location.png
 create mode 100644 src/assets/images/lonlat.png
 create mode 100644 src/assets/images/sgWarn.png
 create mode 100644 src/assets/images/sos.png
 create mode 100644 src/assets/images/sos_HL.png
 create mode 100644 src/assets/images/superStrong.png
 create mode 100644 src/assets/images/superStrong_HL.png
 create mode 100644 src/assets/images/work.png
 create mode 100644 src/assets/images/work_HL.png
 create mode 100644 src/views/controlCenter/6075J/TextToHex.vue
 create mode 100644 src/views/controlCenter/6075J/index.vue

diff --git a/src/assets/images/haiba.png b/src/assets/images/haiba.png
new file mode 100644
index 0000000000000000000000000000000000000000..678919fd83f6bda48ee5cc4f938f3b654177bd09
GIT binary patch
literal 1001
zcmeAS@N?(olHy`uVBq!ia0vp^G9b*s1|*Ak?@wW1VBX;A;uuoF`1S$g1QpLoDxN~!
zt7h(YcX3HeOA8AHf^rb}eufsH1Y~r0ILMZ?G&eVwmff>wa-H`{3okD%FZVwWveIYK
zz8|OeAKWA0^!~4>{Qrgb4|hN4-uLFUU3Ay^N372Af1ch?h~rrJ{oj)Q{}<jrbp7BO
z|E+Ys?$Pv*O$+t^eabh`Z@Exif9ZJri|-$lek{`ez3cq6N1H1SUJ$SUX+A^T>BV0A
zmyhkgR96VrT%2BeH{JVV<er2V-TVJYpW#;ga&P{ZkMh54_i*fcaeCjo%}ami#2I`!
z8vl>?S*t+Rd;ecQ`2WhqvBZB#jsJc#s76d*;@2bn|7@R~IQD*5ul>_r$FJX{|7+9w
z-#MCg-Qqm8AE(zhS1PvL`#st2pY#59@q^;EH?P-j6PbUMyNyzB-toWv(|ixdk_v$j
z_h3G#?|HxNvm}zk-haP4|IbJHZ*~|?e*YON!+;?*5WX29kw%6$|0ti0xK^t=^G7l;
P3p04S`njxgN@xNAWxqO)

literal 0
HcmV?d00001

diff --git a/src/assets/images/haibaRelative.png b/src/assets/images/haibaRelative.png
new file mode 100644
index 0000000000000000000000000000000000000000..383b31763699b23aa0502124a6939822ece89901
GIT binary patch
literal 1715
zcmcJQeM}Q~7{^;j5y8%}F}sM;IU$Bk>836-ZfoagMFN2hWMw1vFdHp@xYcF66uolT
zX**XL8zv$;X}~E?Hjm6;9WA|9Rt&z-0htvSD3tLQ-uebT+Us?92Ybm@;{Mq$xw}8^
zp5OC4pYQki-HEp{QkaqJB55=lGj%UNi+IKp*ZPQX;=U?zLoSULemIrCd!LLxJxKpD
zKD9bN^-1-WT3rgCFBXg6$stxLxx9D(k5xo&EfkVj#Ns`B_{VhTY9lS_Vqs}<X=$c~
zOqt#w;~K{A7-m{{BTsSdTDk$fgE+ND_+Hd}zXo%%=eha_>Vs<+(Ji7Ee{ws`fU^>q
z>tuWD*^fEQ0A7hO%0Cn}&*HyT1)IG?0*3&YFV<`|OPq?0byb`Nm-NPsE$zu%|NC6A
zSB+q?P!#r1pKl9vvV#X^+tq_=!_*`<?{kZtk^EW>$JYQKZf?aVN(^0%;LQ|lo&_zu
zg0Dqe%1j3TDIVTFpkkR=@;<BldW^;#rIaNBt`Qq5>aa0E&t?cy$?rWn0(;tq<~(3C
zF)E_%zeEr@@&>KpxR0zsH2Ua9$i@qIKJFmf^x0vw1HOqDF2gB~fH2+^_uW-!m*s=8
z$z!)aJ&BxSP3d?G!@McEEE?>tk@ri|obT%MKU;}bbAlb-ZTLrZ(--nwuO^@`EWaya
zk3}N=7Z^I_u(1?!-GUzY!Oj|}UC{n<9fDkUOJvb|oms{_w_+nv!;&~kI2w#`SSk6p
z0oaJmAvC7BXWhLec;zDV3QE?(odeZ1i6(#!5*wc(oin7X@Q&JMU}1smeBVCadyAs>
zvgF;u*K_v=i%c_{<(TR`YUc!%$O_TJF6&qJixu#wZIlYJ;Ag7(0u3C0tL3!)n#}Zs
z#gjl7Y_<UFH)c}R{|Y*Z>NDw5CRmhK-WUd%-QJKs-7a?u!C~P6Xh)Bbh?I}tq9Rl1
z02B0HS<T)q4G8Lx(59UrL6k?zCiznLx9ng&FF;xv-fEW8A<DHJH{p9G#L(}sOor4*
z;v+Ots+GfWDiwIU5xo1oCXfRZg9AP_jl_D1gS(_?(qLPeDC8W_0FMBe%P$V}GISb`
zlU<^a_?DQpCUCM9))j`cV{@Sz4|5zRh)Fk~jTIVdBDF)clroJK+7cIc6|`T0*vsTz
za#GsXa1<Qh53v7WB3I2?O$Yyp%#lv1|F%)MNj~@deGLW8y5u9rbLiicGLl1w#W?Pt
z7#Pjw;mOchiI043J#E*%fsoYd;lHR&grXKPm}bCYlh%E4WPO|~QR8|^>q=h^TSiE1
z|DrbLS`w-#O>`*?W`HkSLZ%*%A{4jna%3JYC(oE<K(!djW9VB>d3TpJ#USQSd^4Fi
zy5<O56b5(-0B>IwxR&$GpOgI!OyKtaTs8FLA4aS6{L+*Qb?N6=Wy_RHj#f4?e4HLB
z>F)7KDzx|LO83Fg{ShbKq3%OpvrMFXluZp$GHKm(D4f_Pu&U?e@ynN=C4NS<R6z#+
J>YMqB-vR60@$diu

literal 0
HcmV?d00001

diff --git a/src/assets/images/jieN.png b/src/assets/images/jieN.png
new file mode 100644
index 0000000000000000000000000000000000000000..07022cc3cea2e7fd88fec7cc27393b168c31463a
GIT binary patch
literal 994
zcmeAS@N?(olHy`uVBq!ia0vp^Qb4T3!3HF&Ggs6xFfgz5ba4!+V0`<4ae|8HBo$Ag
z?o~5)ySuogrKN?10zo+ld_O}APy#YKJRD?8TAG`iOUv%rGr7+Dq=lE4mY4gV2U+Q}
z=*RS$P5uIh&x(}VY=1WKP5$%l(uv}HAN7A;`RW~X<ztgcf6c=;`IQd^{!cnD5!Y9L
z^7+^LgWT;vZO1+o{qeS2|DQX~;>i9d#%<Fd$A7B)8~@>u;y=~-hI?dy8eacz0-M$I
z@F`G3+<);s1s(M#(|Pod?|<_7*Zv2s&Oj4N|4tGq-J@_;Io{%TG}x@kwM`Ov%T_$z
zY1*GsZymp;8>sES6atkOJUm(<k$dNv{jD44jOX7!nw~8%e@~4;tmV=AX_wx9zF9Tt
z2gu6v-+=Dv06F`A&iw2DTgejimyMg{^w9n?(BF!7N0+a7-2C&rQR((iu2%XCP=3D|
zn9r~9?tACGWqtgM1Ag=yfQ8PBcCi2Q(zh_T>vDQ{f7Qi;a_jgdpKYWc?W|oYK1W*K
zb>Rman+v~+r#v)S@qDML)bicxpEgE)nj>)jJo~+^2e&SlKU}PR_ifF#caMW>x~%MG
zJm2<i-jV59^Pjg?)Y;v(&8^{_cl*lSQ{pde=2w)>zPZu;(;ctx<u%*b=7~T0`7`JH
zmXE3xdBNq{KwE1b-ONopE_V`W;Qfy`r7Ge&o<HAw_wupn4|e+AU0XBp+~>~p?K5So
zRnD(1sXv~c{h(5D-u&}r{?hSH&mkT>uRiZ?TG^Y4Hrp@#m7Tw~5y=tJe&0VXIT~w|
zQ)&#11xzdASEHL*zZTt)e_PR={^Pn9x?7PA0;YqDkG(&y58bu@@n+Kxdj#}Pr2n3{
zrEs?ROm@5cZ{;@i9pX>4_da;^p&;P={v{VJ?%Gc5zdGqTKQMV8*?fDC!S3Y8kG^Kt
f`SgnS)U(9>{HYsowap8dcNsig{an^LB{Ts5ApbP%

literal 0
HcmV?d00001

diff --git a/src/assets/images/jieN_HL.png b/src/assets/images/jieN_HL.png
new file mode 100644
index 0000000000000000000000000000000000000000..c21de9a544895ece4754914f68125bb062e1aff2
GIT binary patch
literal 1014
zcmeAS@N?(olHy`uVBq!ia0vp^Qb4T3!3HF&Ggs6xFfi}+ba4!+V0`<4ae|8HBo$Ag
z?o~5)ySuogrKN?10zo+ld_O}APy#YKJRD?8TAG`iOUv%rGr7+Dq=lE4mY4gV2U+Q}
z=*RS$W4~k%f4q9&tIhh|!9Oq7+<W6*`B310(~mD7^&V8kZP@+!^KR)1h{(l1+@C&M
ze>|l4kM-lr#XrTLJTHIL>imcM(Pj6~`X|o6Kf>MqL;T3{{%7$M=HKrW=liJN;V*x7
zzk>aKVSSlL@dEShX4N~^)v3o>9NDj6SG$LM$2{>j@BaLG#|9F4VtnnrMBjS0b<ZpB
z&OO!t>~os^DWHMt8xbf+{<_KEDG#>(>`$vL-}bTi$D^ZbyZmSG<Nmq#r+?Cq-1@rj
zR$V|V>o@)R<3~0_pXvBd|0(nDdp-?r|6cZD_YeO?Uw&`Vf3rWD0Vcw~3?d@!aOeHy
z<Jb9qXg;v`&p4%S{<qe@<;ARz8tqCeUUK{uE0|NiJ9er4vf9M|cWtB}?W}$E;gaAl
z-3J!u&+Zc4`u^b4y%Xfme7<$|%j*xVf8#&T5jcN-IiJ4l!u^jbkGMa7K7IYe%gerV
z{oGxt$GQIS^YZ;?KRemj&)-v1aOGFYJnyLYXT`6)e+YJf?mTb5%g&$xvC%*B`SZ!s
z?Cxv*pYL4q^<ItRUpc$lnzs%2AMJc%V%wr0cjpuhjG6u8mCo1Vq@4KHKlf~=&so;~
z;b?bsWn9Pe=aZ-N_eIS=w?7Dr1LHN9zf`RG_$X|i_@kdcpFC||d~NyX^;0f?5!hEz
zsC}OM<DZ&OpAH7TzWg)%RAv=N{GJ_CpSM=j*;W30u;S~>KiW@`J@odmp|3cKLdGvI
zALnz%%@&_pnqB8u%W+=*5$n$@50^TB3_ijCEPmVUm)9S1|K9)Xr}H0gU>N1b&G@2M
iTdqBSZET#uKfxtA@;3PzJWGN3nZeW5&t;ucLK6TQN=Y36

literal 0
HcmV?d00001

diff --git a/src/assets/images/location.png b/src/assets/images/location.png
new file mode 100644
index 0000000000000000000000000000000000000000..404ba84846d37c9e14be30a4dd558261a065240d
GIT binary patch
literal 1052
zcmeAS@N?(olHy`uVBq!ia0vp^Vn8g*!3HGP70>y>z`*?2)5S5Qg7NJG#tAB(lT<u~
zx>wEI?e5}|mX;P43IydK@cj%eKncj`@NkeVX=!e5E-kxf&*VDqlNMfHT3+sd9%QA@
zq6)>hk6-USn|Sfo>Kis%4@4LqX-u|WbR>TJh4}w3^Z#6_oG1S1XGQDvy4Ta!ohxVY
z`>4O+k9*{+^M4_dydPuYewyC@CA+l7_Fw5a|7+%dZ@&L`=50)4MMHSq+wFDvmhr9i
z+=V7f_kB8F_dPw2UEuteQ|rHm<tzSq_NTgIaoDNn5PKN+9LnBz^=#<BlDLMJ&qDqz
z1w~dzlq(s7Y+m};{Z8NS#IXL$to)yaigG85h27Uq$^Uiv{*RUF9~svFsLC&1<@5G&
zL$Hnf+G*=AXzzIzeK+Q*|MSYZ`CDs_&i{AJf9~_26;s12+gsCL_fOtA^Lf&5bD%4J
zioMr(`L#lCQO$Sxf9L%F3hE!x-gob|%_g8>6?u<5;1)7>F1G*mcK%<9IF|KaZUG&U
z2y}$g`cFV+=nP&tg|n0YJt?pMrd=Vp=Tr8+qt;$kw)2Fmre3c)o&Rv>lFCc-|GYb2
z$Ex2HUio%=Me&;L4=fjkSFYXuM{J(=p`Z3Y=g$8d0yO#0t^AMoHpR6*Z;5-k_1-6L
zX1|XyQM&VgE#Ln!`1w!qJ*TqwJ{4zLUg7s*YW!<mdzTNFY{XC3e>uMYZ}I)J+#j{p
zf4;Wf{h9TrJr`E*ITyWOZsz+FpA)})uK#0g|GC&k9u!WWPh7gyo?up?mpN}qc;(dc
zhzslY&k{fIN&acb{}2B4|Ci5W`OvlgyIFtFMSb0;uRk(%e7eh2@$`CK_xEXEwf-Ep
z`0u{|^XB<l4dFF=w_Aor{VqAf_TLW{eiJK}g;&nqUT14`e_}nmb=~9s`tQr@MI3An
zXz#xky|?wl?9cfLN9F&1%>VzTyqNXTPGD&5y&BE2-||0~*!FDO-(B{<7RyH$u>w=v
z)9Y2Mw+qx2$FU&Ee9Gw%e=s%v_uBi>=fWShTAw%gy$7u2(;NX{-0lAsy?^_h^@l!}
z@4Na*wEma0ed)aCtv|%~T*}`6^muEf%K4WytDkEB`(j@A%I3WMqxcV6>p$^vpT8!r
zUThpb2a#A<o%e9WJq^8=`0(bh$0=q}y73>ukx=<iKz|X~>rV~M|Gg=%e^&M{^^fxB
X9NGWnGrJXlxt_t()z4*}Q$iB}=DJm6

literal 0
HcmV?d00001

diff --git a/src/assets/images/lonlat.png b/src/assets/images/lonlat.png
new file mode 100644
index 0000000000000000000000000000000000000000..af5af014bc1c66ee2b988ecd05f0073aa5751458
GIT binary patch
literal 877
zcmeAS@N?(olHy`uVBq!ia0vp^GC(ZL!3HFE2J#p(Fff~Vx;TbZFur}jI6=j8l8UEL
z_o|t@-CbPL($d00fuI}&zMr85C;=HA9uBf4EzQl%rDgZ*nOx_6(!$G2%gg=GgRJyf
z^rO70^?Kdw>Fb_UCr<1AR9yed+WxEio`jD2<>8fUxBqc^Aj0tIMStDzbo(}Oo{#Up
zXs!P`?fxO=KNsKsdBgs(N%7y@xTjn1eTuGVu>Uo8{$GVSgCqMduikSlx{jOwgZuu^
zo8^yiw*hULdcEp&{zJxpFUsq_HCG%I`0uy=Q&j#>U7G{)f6tw-6VR7<bpK^&+-u$a
zt?WM*-~V}&{}HS6AM3rRviCmS{(+(Xi?#i4M})h?<R0|bJx{mqAlgxfSMR%adrw#9
z`?Jg)pYGQG0Qu9VzN5Z5yk_rqOVPEp9cRwk)IX2bjsLiO|Ht6xm3|;OXc*|X9DN&g
ze&3`1e=m+tvypxj|1vcGb#C0zE#IHHE(C_!m)rJVKif!G9SyIa?Y?TucRq`w`x_sw
z-#ks8wPWSp#SfNN+Uew-U-@SRIIy@Iga1fxjk5ddU;lXdIp#g5R_{67RQLDl9tO_m
zU$xf%ofhAE^TGYB8MR;J|6c6ZWsLjy_1?3PnYYA0HO;-Q4f2N9!o92oUG>b`|2$s5
zb7!!TzVCT1{NYbQ_p?vkkM6&;de67pdo1(v4|Y3DdH?V5{hurCAKeuA@3sDu*82?$
z;_KN8y2Ri80SCO+dCrgdAG+3mH(P${iXG71pUd}M{UlodOWMA4-t(3p=2cU}E8AOt
zKm6Kye-3-lPs?jx&Hn)tM9#_2PQ*tK#7kYD!O^%95{)%$w^vSes^&hjXy>07^Z%Xm
i|0@Vg1pCGQbNEE=nKMVJb`vlgF?hQAxvX<aXaWH4g!88W

literal 0
HcmV?d00001

diff --git a/src/assets/images/sgWarn.png b/src/assets/images/sgWarn.png
new file mode 100644
index 0000000000000000000000000000000000000000..c46b95869764795f1c4205da37480dd2ebad19b9
GIT binary patch
literal 768
zcmeAS@N?(olHy`uVBq!ia0vp^vLMXC1|-8Kr}Hx~Fdg@FaSW+oeEWcLf{N!P6;Gk=
zRWo<HySSvKrG<q8K{*I~KSK*p0x~*09Arycnwy(T%kJ4Txz78fg_oC>m;0XwS?RN=
zB5+SLH~({s)LNM|+o?{{=~ME~R@nw*Y`Ljt{OxBB@16vP4)JH3?=tf*>%F~a#j&z^
zKmX|2MKho0X871tbL-++m%VNEtLMCX%x#wU+>%jY-tF|=>5mdK?mW1E`mW&A<)3a!
z?O<Z~=rI57JTn`vE1%_$F)yuGn!lEj!NKOj^52F)h4xV|fi~H4GC16Mf4MJD?Um`D
z^ph{`_9Z+nV_^Jn^Ihg+?+^3Wmee0l&lX^qzo*6^*79imwo7k6->jPSBj@{;kE%b`
zGy1>y7gf{cA9$Sob3F61cVQo2u5Mpwaju@X;9Zx0r0pcB+kdVzl)FFL{P)q8!ehn7
z<u02}?+-1I>6Nxo*SH&1bL>Nrjs4PUt@&$X|E;zA_{MB=a{m*cf9!7S`$?zU@bho^
zC-Xn-V4+FghdB#MvOm78<B>84+8g|?+dtlx=V;--?1tiS6c_O6*;LhJ{>yfF`OlA`
zW}CdH^!A_U&9;56`S>Ud-Cy5-Z&^IMvx@hBWYMmE{Tn-EfuWQBd*YVD+5a=%_5G-^
zl>>!W`tIet{Y+o~w10GXIsZg@HUope`L~<z8h<nZI_rJtuG$A-z^DmlP>7r0Z@p{g
zit8Wpr(UkDIe6@?jXJ{-?$0;hMXt?TpuM~z(6W5x=G(yNwb5rd(*0=j-OXvUH`)0u
zHkkc&OQGA#Yd$6s{J<38pEzAU_%SQ<19`@>`zI?c-7ahdrfddJS3j3^P6<r_)XR;~

literal 0
HcmV?d00001

diff --git a/src/assets/images/sos.png b/src/assets/images/sos.png
new file mode 100644
index 0000000000000000000000000000000000000000..56033d61617750db5c14e3414877c235d499d39d
GIT binary patch
literal 849
zcmeAS@N?(olHy`uVBq!ia0vp^ia;#O!3HE%Vpw-FFfdDax;TbZFur}jI6=j8l8UEL
z_o|t@-CbPL($d00fuI}&zMr85C;=HA9uBf4EzQl%rDgZ*nOx_6(!$G2%gg=GgRJyf
zRI$L{X7|}QH<W*_XP$rke{02p^WO?@{V@2qdP?5e^w;l?GS{wJzr4r%LwxF~+I<=S
zR6aV)-&ZBk_4rSC;k!>iKQHfM|25^R^2&{8_otky{ikZW?dS9@@AUQsly|fLy7F+T
zrbyfj&F?=K{hVBpc<*4Vd%ynK{Yy%=f4;fP|IT~an2IkyF8%Q?+SRXrW5-<aXTs<6
zjIF<U{8L?8tu=pbY~g;G<EBq}x3XqiS!JT#?c<q`5C52cr~2K;n%BJUkLu>XeZ1vk
z;vesKw%;rEeQi^Yn^9iy@TkTgZ@Xybh8_2p|EfAw!L0AI_+#te_|Nj}3_wHUZF!Cs
z!rb+vAFS-RVaA;Yt&+DZpMBo_qyGcHNu3X`!=3lR?bDY9{8)c!*X|!qcX<^Upnj-d
zx^nka{Y#Y$j2}AFx6hQVR{1~m+Vpuxrq8>{F2FGVQSg<I2mgduIeowWXNFV*!;c*K
z^sQFs>RW#9S>Ahlk3sJ-@o)9K3=01i*WS8#)@5&-cp4;h85lmwzYPxSUvkV$zo&Tm
z`T6#u3=V(Xf0x*^^-AwCSi8Gh|H@qkhDX4VGvu1Twy}Oa(6bjGdw<r~yc_&8=PeUM
z2mhYzX6beNJI`O6{NwwtBb#rZ>9d_wfAZI*$v-X`{|4&aTsz0ij_0}FWa<BMp{z#>
z|Ec=F_%};Fn3+Lf{@d(~$7lb9XPWHW@IQMUgF_9(dH=P7-+gxdtX{~<@aS?lzjNW7
z|5}!JkBjHrIVZ}{;U8%`N$U2W=^q?k&Oec!{eX+%$Z|e?--RFMue|tTw{qEzx&2os
pr87I!Y^(maxpo`dJbQ+Jf^Rlnk*j>lp99P)44$rjF6*2UngBBv&L{u?

literal 0
HcmV?d00001

diff --git a/src/assets/images/sos_HL.png b/src/assets/images/sos_HL.png
new file mode 100644
index 0000000000000000000000000000000000000000..37f58c2dffe511ecdc0e3bd11e647227421c9a97
GIT binary patch
literal 865
zcmeAS@N?(olHy`uVBq!ia0vp^ia;#O!3HE%Vpw-FFfeO)x;TbZFur}jI6=j8l8UEL
z_o|t@-CbPL($d00fuI}&zMr85C;=HA9uBf4EzQl%rDgZ*nOx_6(!$G2%gg=GgRJyf
zRI$KcKHmDl_8;q=>*~}$I?Uf!_gbN@>%Y>r{IB9)_yzd|=I{HL({cXM{*H&+|NgxD
zx`X|~a({c(KiB?<8~)0yud9{*$nfjS$L%cZ&+b3);r1VH5JSUW-M;?Y%}0!nE+6kc
zP#DK?IRE$O-Pa$s{>+i@&)julzlNQa{r;NX9rx3JSNL3Z{iph9_2<vK`hg0*eB8=h
z*In;8DgW^E^L0^o-d{d`o$rV4KUU9uyz}jUXU5I&kKbP^V1IPK!e#x#;@|3Z-+h1i
zdOP2v<v+wzex?36^lyD-qTTJ|k!$-t>;HUobS=Z9nU5}CpU?X-a!<kTpFi(%{(H=z
zFwb+o-QOu6qCY!H)ZLzce=pzvLI#2JOZ?^kdwsaH$KYCdy0m@!e~!;T_2#dQW%%gx
z@#SOJ2NwTRKNWxaoIamdfdObk@+`ei@fvHtKjVJ&oq?kP8jku?K3LV%eZS4X^x*Qc
z?_583|J0wdb>4%`Te%e)J^>xN?R4}<`2(MtS=XQC-adQ&{kaSb0{;&_GCsEcP>qRx
z3nY*k7&`tZKtq)~@yq3Ze}0)UFg&uKVORS{`=Iw{r>D=KJU?$I&EQb8t$%Zr?DKB%
z?VsL%y=f<Rxnv?N?4*FQuRdJjs-0@TzgqU+Uc1_ww+;6n#ZQ1bkO3Gh`Laj+CI4<Y
zqxYXr?0D<_S@n+Bs+!JU(_?6ObosWsW1Z>$(z4H=cMHcbHb9;D-<4<o+w<?^+O-)b
z*wy~he7ODD{;nUd{_J^|yn~71<>lk|h4z^J7hMy*xp)0xas9lfTnr-f?c!MaKF`m-
z{^7b`Jx~0N|EA~J8h$)^+WhnUx1-(BmH!xixa()Wl+zNhS`5rO44$rjF6*2UngH8P
B;8y?u

literal 0
HcmV?d00001

diff --git a/src/assets/images/superStrong.png b/src/assets/images/superStrong.png
new file mode 100644
index 0000000000000000000000000000000000000000..28086127127fabba084a1a35d246711ec31d72fb
GIT binary patch
literal 1060
zcmeAS@N?(olHy`uVBq!ia0vp^sz9vG!3HG%PjM_}U|@dj>Eakt!T9z8;{+AYNh+Q~
z-K%Eqc6V_}OG^t21%h%A_<n{Kpaf)ecsR(Gv@|z2mzLeLXL6nQNeeG8Eid;!53<r{
z(U1A83?J>e8JHeymi@#0X#ef*M7wBB2D{sgU;dQ;&bg-0{kwLXxy7On_fwlEp1;QB
zaOeGI*_d0_=jx{?Tko#fCgfmqA-$S?#^?C_qv_fF3_z~+jt?H|9`C<3c}Kf^Ff)U|
z`L~;EXNgAt37=VfApNyWID^8x+v(ObDmVoGgs-rfd;Z!HQHGA^&o|djGQIwBzVDpp
z+@<>G*&1Ljd&FAFE*{s@e(_lDzs0?8Z9e~ut=YylPnh8m>(3`on_r&N{I_{Z-u&~|
zCRg||bcjDOZkztt{`T{)^#_ZY9QG*8H{2uh|EAsg|J)EQJrAG$IRCBkZ~TWj3<CNm
z(s}fc*Ka%j`hU}NmWB#PyW|SXf17LL{)^kFGaTXmBzgGs$N6tR|Jwh+l2IXU!g-0f
zzW+J%um5K~&&lwyspi#(OCntVXCh1&nZKxy|C#;iD|b(czqA1<I#ko;A9$SovwZHW
zyr<nI^PaOd{Fq*|X#2{?hc!h0Df`@ATQl+8=RZKxMdDwwK0oFjsPQM-RO(&cbD&~z
z9)^#LetGFznA>$ZJ*=!)@b$UI;mm;Z#n~o)<^E5Sw?1iQcKDNB^B`6_ruvtm&Gt)o
z&!xY%vpc$c#pCA6yw~qMYgT^yIh|4ApQ+t#+uRz?dAA`hn_p2j`{qXXPj|e&mjgrd
zUn)aKeed})f9d$9=VqnbKe<|+SD$w`t?bQ2pqYPV=dW$7mt=Sp|9JD=%g3fa*y#&#
zb!YnanX=U?=hv3hA5YJI5D$#B>pyb7Z~3TNkr!O99lzvr&7+&SX~*SG7Hi+V|M8~O
z4`ioA`+fho<Y=r-PN{LM<xwmu{%yr{UHw{2=ftnZu>Z$(Ees1$jVmvBc=56K=k=kx
z_CMZi`avHQj<wt5J*Br-PON<JIj#P9Hygvp^<SsP6%<xjtau)ODPzvNc_)r%odk*J
te+BxzGO_IVv7@iA|Cu4BZ^iIWkmb);odU&`Zou5n;OXk;vd$@?2>_>VGBp4I

literal 0
HcmV?d00001

diff --git a/src/assets/images/superStrong_HL.png b/src/assets/images/superStrong_HL.png
new file mode 100644
index 0000000000000000000000000000000000000000..1dfab9edc736934cc908105695d134b0967e408a
GIT binary patch
literal 1107
zcmeAS@N?(olHy`uVBq!ia0vp^sz9vG!3HG%PjM_}U|^B*ba4!+V0`<4ae|8HBo$Ag
z?o~5)ySuogrKN?10zo+ld_O}APy#YKJRD?8TAG`iOUv%rGr7+Dq=lE4mY4gV2U+Q}
z=*N6khL85#3``GB?>VU``~R-q#%HUyh%m@MW<6dZ@c-|;L+RN<-+y0uxU}<~#sAuO
z&pv;3VJO^x{+pZR?dXs9my|wD|B)lh*unnm%SYbk3d4Whsz3Q_>b|dLV0hGMcl-F_
zr^`RY>v-1)&R-kL!0<8VRQiv<xpB?^m4x<RxAVV$PL!eJ`L~bvuFQGQy6uPlgHzQX
zZtm*WW)L{<{&UOAyK8=^{JZ?}_ovTaQ*ERf9@UF69Qm)q&>{Y0b8XD!FTqXMpV`m)
zdiUnB^AEelw||<$AfWG1bL&g&iT7vgg%0Qc{=ED8LrX@5xP~8JF8)zJeg6HCVkU<@
z3?E-E{^>t${{7D9EDaTmk1o4^p08uSU-&#H!$+ng%ln_%N7mJ;&l6^N#M<F6f3|+p
zpFe&!>I_G?1?Jn$`k(Ui=iCZEpc@qIYEAy1{PfxSBgEcc6@nJ$>KDNj2iTQX<hSqZ
z{;%S--~acaf4eI|nikc(`f!i0R{a0LDRuL|wf-&tyoW*H|0I9;c<Tqt8y^2*5BODk
zOZ?mYv!B@;DguFuFA4tAePHpwY`0gv57?B0Ku@mnmyNS>+RrNUd}rkLMc-_9>=FOe
zTp71}W}WQ54ga&_EEtaLKen7tUv}aCN0mq1pFf|z{^8|i-?@J7uGHgPfB1R%{<Hge
z7(TB5c=9y6`&$3!JC}UDSL66s&aSrRZNvRXJD-@?w&=&*IW?e)I@g~IvR6O$Efg4=
z#V0eXIO6y0m|8E%@F@QA<mvo<QS;C35AwV0{NvHlwSP_n15s-Jo|=Lyze@g1Et(~F
zNL)YfX*^rQkLy34JZ)ZlZTaW*Q!alI*jG`g{oe=_I_moJGF$ED)-Rp2to_5$?&zP>
z85RDS+ExC1u;S~>KiW@GLg1#I+~tyqsA{KvdHFb>Gj6u{)Y9xa$65}3DWI{}K!M&h
z->J^v|E9Y>`}yK;{5J(lTwUJ3{w(+8drRNvJ>9(ZbT?l^JxkOFMeC~4+#+CM!QkoY
K=d#Wzp$PyzWLum7

literal 0
HcmV?d00001

diff --git a/src/assets/images/work.png b/src/assets/images/work.png
new file mode 100644
index 0000000000000000000000000000000000000000..994323a773bdec89ffcfad2fb173f8d23b1c1121
GIT binary patch
literal 989
zcmeAS@N?(olHy`uVBq!ia0vp^azL!j!3HGr+b#AmFfcFiba4!+V0`<4ae|8HBo$Ag
z?o~5)ySuogrKN?10zo+ld_O}APy#YKJRD?8TAG`iOUv%rGr7+Dq=lE4mY4gV2U+Q}
z=*N@0!X@3a9c=%La`h(e39mW!OBKl3DlmU<o#!m8f7yz5x79NrpLKY;-z{iY_0hjM
zALAVvHvM?t2tqmUFSO0hoK@)hY5vlH1=1Pq-#gDo>}Of=e81Qu<F@HcS|EeoUN*Sr
zviL*%!h{*`gc-K|km34oI_Z2^*MGSV_Fp0K{^vFSEnXYOe&%`k$D2|+m<sp%Tko2=
z;`)dA$C&4v|F&M|aOZt+`}Ac2KhBrD-+BD=T5}o3j^DM%J{0{)kB+YrimytO2Py$t
z_t^gSuS=7ETr&R6@ThLS;U1a)H?K{fcVzm!o9qJLfA>6m`s4hzeP2}eeK}*-u;YF@
zkN)xcZC{tFe_WdWjq%7|yW|SXf1B6p+ji>PZsu2b_kHDI?_iBT=}`zfg!%ImuEn0O
zpLXfo=bPQpJDEN@%&(|m-u$lW-{Prd^UlZJIkj1F-feZcdk5C+p7&p4>D=d=#kYT&
zBXItF`fsUQ6~_PLph9~D^iM4RAyQgnpx?1u*(4<3{O8G+YikZ3duvnQA^t45rpwB1
z#&ff6pKCro3bVU?JoEA4iag7^$HjB*oa1i$F}()peVgsq?j99?m1p<yjoIep{wF(q
z@2;(xc<ytP;y+c8@6WF-E&tfMYqr15?z3-hC|Bma_V$0|ef|wK73AhT|M}?X+L|u^
zz~k(n??8k5Iji#@Z%}y7lP`CFVzD@&0>keAQRuFripX2><-NxLOufFB*KA{pGdQyU
z2_z`RL;b#gWR>3j`H*6q$o#kS8iW6MtMUB^diz=bu{>i+0jKnyLZ;imY|G&3>gTe~
HDWM4f!vr4z

literal 0
HcmV?d00001

diff --git a/src/assets/images/work_HL.png b/src/assets/images/work_HL.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9578b2c6b41661cdf719de523abfa06ffcc31cb
GIT binary patch
literal 992
zcmeAS@N?(olHy`uVBq!ia0vp^azL!j!3HGr+b#AmFfcFoba4!+V0`<4ae|8HBo$Ag
z?o~5)ySuogrKN?10zo+ld_O}APy#YKJRD?8TAG`iOUv%rGr7+Dq=lE4mY4gV2U+Q}
z=*N_=x7|C}v*kV6-*nTxX6B>I$E_Qrf39x@GIlq<{;|IGN6**Y?We<={XfPhcmCii
zZ2ggQ{>OU5k2hx>spkiw^uBz7v+><u3Kle8`;)$L`^0xl^-~{RULJjr|IvQ2E`Ry=
z%;!GDb5He`w>$7cyHWRFw#uW`tOwjHj)__S374>Zbh=dIU$ugqf?e(3o7?Vn|4&e=
zv%dYqvgYHXuyqbL!8ONzgwE)HX5U?!UFTTK5w0*#)2?<8hs<;Pz-94m`fvVAffW79
z_%~T~58wRzf6W>ymi_p0@sGN9g{<BF-?<DQeLlWi{L_Eh2dkR8@3$Eq0X^yddA`oW
z(jR}`ZD%}Ud~`X`^vFZ6Km5F#&)ks?bn)5xO)b|Se%^hbP2jx9e7iW7zR&YDkk!xU
ztr7blx#s;j{T1&Ii*~Sg_{-Z%|IqojIP(77_<;NE>CQIOe|-74x$*oX`>wBdf3kk9
zt?=u3u56e4BV)<>NB2+vdiSU4mz|CN5$*uH(u(}{ecj>*K3w0_r))ptxqD4%UEFs=
zoB9s%MK!NJ+~cbiKYtdYq2|}Gwaq^?=gt1{>d&5c$rT3${x<>rYSaH`&YwRw(?7p_
zoX!46?7ZsQ@6WhjegDv;_>UFn_e!~+mOp=PKL70U@#}m)bmw_P{Q8+X(s|d)pNn7l
zt~uXo&vxhgM~gin!5(LDWIr%UP0qJJT+hnS*7rF^D6akd`?}fUJRkLe;dOR@5UMkN
zhI^sv{O`rN{_yki{b#w`euy6dMpC>cBn~Q}-u|Nvjd6X6NAU~%rRV9rJorcZiHU8C
ze%zf?AYD`ZW$)cy`2LZr>OL#`^}i+JERJ+PnmnDqPwM^I{R*A;p8@0eS^P13rlsY~
VjF)~sY6j+922WQ%mvv4FO#p7HFf#xE

literal 0
HcmV?d00001

diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index 02fc51c..7cda1ba 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -59,7 +59,7 @@ const props = defineProps({
   // 大小限制(MB)
   fileSize: propTypes.number.def(200),
   // 文件类型, 例如['png', 'jpg', 'jpeg']
-  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf','apk','wgt','html','mp3','mp4']),
+  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf','apk','wgt','html','mp3','mp4','ttf']),
   // 是否显示提示
   isShowTip: propTypes.bool.def(true),
   // 禁用组件（仅查看文件）
diff --git a/src/utils/mqtt.ts b/src/utils/mqtt.ts
index 13febdd..5a5bfad 100644
--- a/src/utils/mqtt.ts
+++ b/src/utils/mqtt.ts
@@ -19,7 +19,7 @@ const getMqttConfig = () => {
   // 检测当前页面协议（http: 或 https:）
   //const isHttps = window.location.protocol === 'https:';
 
-  const isHttps = import.meta.env.VITE_APP_ENV === 'production' || window.location.protocol === 'https:';
+  const isHttps =true;// import.meta.env.VITE_APP_ENV === 'production' || window.location.protocol === 'https:';
     console.log(isHttps,'检测环境');
   
   return {
@@ -222,9 +222,7 @@ export function useMqtt() {
         return;
       }
 
-      const message = new Paho.Message(
-        typeof payload === 'string' ? payload : payload.toString()
-      );
+      const message = new Paho.Message(payload);
 
       message.destinationName = topic;
       message.qos = options.qos;
diff --git a/src/views/controlCenter/6075J/TextToHex.vue b/src/views/controlCenter/6075J/TextToHex.vue
new file mode 100644
index 0000000..a14dc5e
--- /dev/null
+++ b/src/views/controlCenter/6075J/TextToHex.vue
@@ -0,0 +1,264 @@
+<template>
+	<div class="text-to-hex">
+		<canvas 
+			ref="canvasRef"
+			:width="currentCanvasWidth" 
+			:height="currentCanvasHeight"
+			class="offscreen-canvas"
+		></canvas>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+
+// Props 定义
+const props = defineProps({
+	txts: {
+		type: Array,
+		default: () => [],
+		validator: (value) => value.every(item => typeof item === 'string')
+	},
+	fontSize: {
+		type: Number,
+		default: 16,
+		validator: (value) => value > 0 && value <= 100
+	},
+	bgColor: {
+		type: String,
+		default: "#ffffff"
+	},
+	color: {
+		type: String,
+		default: "#000000"
+	},
+	fontFamily: {
+		type: String,
+		default: "PingFang SC, Microsoft YaHei, Arial, sans-serif"
+	}
+});
+
+// 响应式数据
+const canvasRef = ref(null);
+const currentCanvasWidth = ref(0);
+const currentCanvasHeight = ref(0);
+let ctx = null;
+const canvasWarmed = ref(false);
+
+// 计算属性
+const validTxts = computed(() => {
+	return props.txts.filter(line => line && line.trim() !== '');
+});
+
+// 获取字符实际宽度
+const getCharWidth = (char) => {
+	if (!ctx) return props.fontSize * 0.6;
+	ctx.font = `${props.fontSize}px ${props.fontFamily}`;
+	return ctx.measureText(char).width;
+};
+
+// 计算整行宽度（精确）
+const calcLineWidth = (textLine) => {
+	if (!ctx) return textLine.length * props.fontSize * 0.6;
+	
+	ctx.font = `${props.fontSize}px ${props.fontFamily}`;
+	let totalWidth = 0;
+	for (let i = 0; i < textLine.length; i++) {
+		totalWidth += ctx.measureText(textLine[i]).width;
+	}
+	return Math.ceil(totalWidth);
+};
+
+// 清除Canvas内容
+const clearCanvas = () => {
+	if (!ctx) return;
+	ctx.fillStyle = props.bgColor;
+	ctx.fillRect(0, 0, currentCanvasWidth.value, currentCanvasHeight.value);
+};
+
+// 预热画布
+const warmupCanvas = async () => {
+	if (canvasWarmed.value || !ctx) return;
+	
+	try {
+		currentCanvasWidth.value = 16;
+		currentCanvasHeight.value = 16;
+		
+		clearCanvas();
+		
+		ctx.fillStyle = props.color;
+		ctx.font = `${props.fontSize}px ${props.fontFamily}`;
+		ctx.textBaseline = 'middle';
+		ctx.fillText('测', 0, 8);
+		
+		// 等待字体加载完成
+		await document.fonts.ready;
+		
+		// 获取像素数据验证画布可用
+		const imageData = ctx.getImageData(0, 0, 16, 16);
+		if (imageData) {
+			canvasWarmed.value = true;
+		}
+		
+		// 额外等待确保字体完全渲染
+		await new Promise(resolve => setTimeout(resolve, 100));
+	} catch (ex) {
+		console.log("画布预热异常:", ex);
+		canvasWarmed.value = true;
+	}
+};
+
+// 像素数据转16进制矩阵
+const convertCharToMatrix = (imageData, width, height) => {
+	let matrix = [];
+	const data = imageData.data;
+	
+	// 只处理16x16的字符矩阵
+	for (let y = 0; y < 16; y++) {
+		let byte1 = 0, byte2 = 0;
+		
+		for (let x = 0; x < 16; x++) {
+			// 计算实际像素位置（需要考虑画布可能比16宽）
+			let actualX = Math.floor(x * width / 16);
+			let actualY = Math.floor(y * height / 16);
+			let index = (actualY * width + actualX) * 4;
+			
+			let red = data[index];
+			let green = data[index + 1];
+			let blue = data[index + 2];
+			
+			// 判断是否为非背景色（根据颜色阈值）
+			// let isBlack = !(red > 200 && green > 200 && blue > 200);
+			let gray = (red + green + blue) / 3;
+			let isBlack = gray < 255 ;
+			if (x < 8) {
+				if (isBlack) {
+					byte1 |= 0x80 >> x;
+				}
+			} else {
+				if (isBlack) {
+					byte2 |= 0x80 >> (x - 8);
+				}
+			}
+		}
+		
+		matrix.push('0x' + byte1.toString(16).padStart(2, '0').toUpperCase());
+		matrix.push('0x' + byte2.toString(16).padStart(2, '0').toUpperCase());
+	}
+	
+	return matrix;
+};
+
+// 绘制单个字符并获取像素数据
+const drawChar = async (char) => {
+	return new Promise((resolve, reject) => {
+		try {
+			// 获取字符宽度
+			const charWidth = getCharWidth(char);
+			const canvasWidth = Math.max(16, Math.ceil(charWidth));
+			
+			// 调整画布尺寸
+			currentCanvasWidth.value = canvasWidth;
+			currentCanvasHeight.value = 16;
+			
+			// 重置画布尺寸
+			if (canvasRef.value) {
+				canvasRef.value.width = canvasWidth;
+				canvasRef.value.height = 16;
+			}
+			
+			// 清空画布
+			clearCanvas();
+			
+			// 绘制字符
+			ctx.fillStyle = props.color;
+			ctx.font = `${props.fontSize}px ${props.fontFamily}`;
+			ctx.textBaseline = 'middle';
+			ctx.fillText(char, 0, 8);
+			
+			// 获取像素数据
+			const imageData = ctx.getImageData(0, 0, canvasWidth, 16);
+			
+			resolve({
+				char: char,
+				pixelData: imageData,
+				width: canvasWidth,
+				height: 16
+			});
+		} catch (err) {
+			reject(err);
+		}
+	});
+};
+
+// 绘制文本行并获取所有字符的矩阵数据
+const drawLine = async (textLine) => {
+	const charMatrices = [];
+	
+	for (let i = 0; i < textLine.length; i++) {
+		const char = textLine[i];
+		const result = await drawChar(char);
+		const matrix = convertCharToMatrix(result.pixelData, result.width, result.height);
+		charMatrices.push(matrix);
+	}
+	
+	return charMatrices;
+};
+
+// 主方法：处理所有文本并返回十六进制矩阵数组
+const drawAndGetPixels = async () => {
+	// 确保画布已预热
+	await warmupCanvas();
+	
+	const result = [];
+	
+	for (let i = 0; i < validTxts.value.length; i++) {
+		const line = validTxts.value[i];
+		const lineMatrices = await drawLine(line);
+		result.push(lineMatrices);
+	}
+	
+	return result;
+};
+
+// 获取单个字符的十六进制矩阵（便捷方法）
+const getCharHexMatrix = async (char) => {
+	await warmupCanvas();
+	const result = await drawChar(char);
+	return convertCharToMatrix(result.pixelData, result.width, result.height);
+};
+
+// 获取文本行的十六进制矩阵（便捷方法）
+const getTextLineHexMatrix = async (textLine) => {
+	await warmupCanvas();
+	return await drawLine(textLine);
+};
+
+// 暴露方法给父组件
+defineExpose({
+	drawAndGetPixels,
+	getCharHexMatrix,
+	getTextLineHexMatrix
+});
+
+// 生命周期
+onMounted(() => {
+	if (canvasRef.value) {
+		ctx = canvasRef.value.getContext('2d');
+	}
+});
+</script>
+
+<style scoped>
+.text-to-hex {
+	position: relative;
+}
+
+.offscreen-canvas {
+	position: fixed;
+	left: -9999px;
+	top: -9999px;
+	visibility: hidden;
+	pointer-events: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/controlCenter/6075J/index.vue b/src/views/controlCenter/6075J/index.vue
new file mode 100644
index 0000000..42c132f
--- /dev/null
+++ b/src/views/controlCenter/6075J/index.vue
@@ -0,0 +1,1594 @@
+<template>
+  <div class="device-page p-2">
+    <!-- 头部信息栏 -->
+    <div class="header-bar">
+      <div>设备名称：{{ deviceDetail.deviceName }}，IMEI:{{ deviceDetail.deviceImei }}</div>
+      <div>设备型号：{{ deviceDetail.typeName }}</div>
+      <div class="device-status">
+        设备状态：
+        <span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
+          {{ deviceDetail.onlineStatus === 1 ? '在线' : '离线' }}
+        </span>
+      </div>
+      <div>电量：{{ Status.staPowerPercent ? Status.staPowerPercent : deviceDetail.staPowerPercent || 0 }}%</div>
+      <div>续航：{{ Status.powerTime }}</div>
+    </div>
+
+    <div class="leftContent fleft">
+      <div class="row card mainLight padding">
+        <div class="title">主光模式</div>
+        <div class="lightFlex">
+          <div class="lightItem" :class="{ active: item.checked }" v-for="(item, index) in dic.main" @click="sendMode(item, index, 'main')">
+            <div class="imgContent">
+              <div v-show="!item.checked" class="img" :style="{ backgroundImage: `url(${item.icon})` }"></div>
+              <div v-show="item.checked" class="img" :style="{ backgroundImage: `url(${item.iconAc})` }"></div>
+              <div class="imgTxt">{{ item.text }}</div>
+            </div>
+
+            <el-switch v-model="item.checked" size="large" active-text="开" inactive-text="关" inline-prompt />
+          </div>
+        </div>
+      </div>
+      <div class="row fuLight">
+        <div class="fleft card light padding">
+          <div class="title">辅光模式</div>
+          <div class="lightFlex">
+            <div class="lightItem" :class="{ active: item.checked }" v-for="(item, index) in dic.fu" @click="sendMode(item, index, 'fu')">
+              <div class="imgContent">
+                <div v-show="!item.checked" class="img" :style="{ backgroundImage: `url(${item.icon})` }"></div>
+                <div v-show="item.checked" class="img" :style="{ backgroundImage: `url(${item.iconAc})` }"></div>
+
+                <div class="imgTxt">{{ item.text }}</div>
+              </div>
+
+              <el-switch v-model="item.checked" size="large" active-text="开" inactive-text="关" inline-prompt />
+            </div>
+          </div>
+        </div>
+        <div class="fleft card sos padding">
+          <div class="title"></div>
+          <div class="lightFlex" style="justify-content: space-around">
+            <div class="lightItem" :class="{ active: item.checked }" v-for="(item, index) in dic.sos" @click="sendMode(item, index, 'sos')">
+              <div class="imgContent">
+                <div v-show="!item.checked" class="img" :style="{ backgroundImage: `url(${item.icon})` }"></div>
+                <div v-show="item.checked" class="img" :style="{ backgroundImage: `url(${item.iconAc})` }"></div>
+
+                <div class="imgTxt">{{ item.text }}</div>
+              </div>
+
+              <el-switch v-model="item.checked" size="large" active-text="开" inactive-text="关" inline-prompt />
+            </div>
+          </div>
+        </div>
+        <div class="clear"></div>
+      </div>
+      <div class="row card usr padding">
+        <div class="title">人员信息登记</div>
+        <div class="form-grid">
+          <div class="form-item">
+            <span class="form-label">单位:</span>
+            <el-input v-if="deviceDetail" placeholder="请输入单位" v-model="deviceDetail.personnelInfo.unitName" />
+          </div>
+          <div class="form-item">
+            <span class="form-label">职位:</span>
+            <el-input v-if="deviceDetail" placeholder="请输入职位" v-model="deviceDetail.personnelInfo.position" />
+          </div>
+          <div class="form-item">
+            <span class="form-label">姓名:</span>
+            <el-input v-if="deviceDetail" placeholder="请输入姓名" v-model="deviceDetail.personnelInfo.name" />
+          </div>
+          <div class="form-item">
+            <span class="form-label">ID:</span>
+            <el-input v-if="deviceDetail" placeholder="请输入ID" v-model="deviceDetail.personnelInfo.code" />
+          </div>
+        </div>
+        <el-button type="primary" class="register-btn fright" @click="sendUsr">登记</el-button>
+      </div>
+    </div>
+    <div class="rightContent fleft">
+      <div class="liangdu">
+        <div class="leftsett">
+          <div class="rmkLiangdu">灯光亮度</div>
+          <input type="number" class="txtLiangdu" max="100" min="1" v-model="formData.ins_brightness" />
+          <div>%</div>
+        </div>
+
+        <el-button type="primary" class="register-btn fright" @click="setBrightness">保存</el-button>
+      </div>
+      <div class="location padding">
+        <div class="title">位置信息</div>
+        <div class="mylocation">
+          <div class="icoRemark"><img src="@/assets/images/lonlat.png" />经纬度</div>
+          <div class="lonlat">
+            <div>{{ deviceDetail.longitude }}</div>
+            <div>{{ deviceDetail.latitude }}</div>
+          </div>
+          <div class="icoRemark"><img src="@/assets/images/location.png" />地址</div>
+          <div class="addressLink">
+            <div class="addrss">{{ currStatu.address ? currStatu.address : deviceDetail.address }}</div>
+            <div class="link">查看</div>
+          </div>
+        </div>
+        <div class="title">高度信息</div>
+        <div class="height mylocation">
+          <div class="icoRemark"><img src="@/assets/images/haiba.png" />海拔高度</div>
+          <div class="haiba">{{currStatu.sta_Height}}</div>
+          <div class="icoRemark"><img src="@/assets/images/haibaRelative.png" />相对高度</div>
+          <div class="haiba">{{currStatu.sta_reHeight}}</div>
+        </div>
+      </div>
+      <div class="msg padding" >
+        <div class="title">发送信息</div>
+        <div class="form-grid">
+          <textarea class="textarea" maxlength="16" v-model="formData.sendMsg"></textarea>
+        </div>
+        <el-button type="primary" class="register-btn fright" @click="sendMsg" :loading="Status.msgLoading">发送</el-button>
+      </div>
+    </div>
+    <div class="clear"></div>
+    <!-- 提示框 -->
+    <el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" width="500" center>
+      <span>
+        {{ Status.confirm.text }}
+      </span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="Status.confirm.OkCallback">{{ Status.confirm.OkTxt || '确定' }} </el-button>
+          <el-button v-show="Status.confirm.showCancel" @click="Status.confirm.cancelCallback">{{ Status.confirm.cancelTxt || '取消' }}</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <TextToHex ref="textToHex" :txts="formData.textLines" :fontSize="16" />
+  </div>
+</template>
+<script setup name="DeviceControl" lang="ts">
+const route = useRoute();
+import TextToHex from './TextToHex.vue';
+import { useMqtt } from '@/utils/mqtt';
+import api from '@/api/controlCenter/controlPanel/670';
+import { object } from 'vue-types';
+import request from '@/utils/request';
+import { status } from 'nprogress';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { connected, connect, subscribe, onConnect, onError, onMessage, disconnect, publish } = useMqtt();
+const mapApiKey = import.meta.env.VITE_AMAP_WebApi_KEY;
+const textToHex = ref(null);
+
+const deviceDetail = ref<any>({
+  'deviceId': null,
+  'deviceName': null,
+  'deviceImei': null,
+  'deviceMac': null,
+  'communicationMode': null,
+  'devicePic': null,
+  'typeName': null,
+  'bluetoothName': null,
+  'deviceStatus': null,
+  'personnelInfo': {
+    'id': null,
+    'deviceId': null,
+    'name': null,
+    'position': null,
+    'unitName': null,
+    'code': null
+  },
+  'onlineStatus': null,
+  'longitude': null,
+  'latitude': null,
+  'address': null,
+  'staDetectGrade': null,
+  'staLightGrade': null,
+  'staSOSGrade': null,
+  'staPowerTime': null,
+  'staPowerPercent': null,
+  'staDetectResult': null,
+  'sendMsg': null,
+  'sta_ShakeBit': null
+});
+
+const Status = reactive<any>({
+  powerTime: null,
+  confirm: {
+    //弹出框的配置
+    Visible: false,
+    title: '',
+    text: '',
+    cancelCallback: null,
+    OkCallback: null,
+    showCancel: true,
+    OkTxt: '',
+    cancelTxt: '',
+    msgLoading:false
+  }
+});
+
+const getList = () => {
+  api
+    .deviceRealTimeStatus(route.params.deviceId)
+    .then((res) => {
+      if (res && res.code == 200) {
+        let keys = Object.keys(res.data);
+        keys.forEach((key) => {
+          deviceDetail.value[key] = res.data[key];
+        });
+
+        if (!deviceDetail.value.personnelInfo) {
+          deviceDetail.value.personnelInfo = {
+            'id': null,
+            'deviceId': null,
+            'name': null,
+            'position': null,
+            'unitName': null,
+            'code': null
+          };
+        }
+      }
+    })
+    .catch((ex) => {
+      console.error('出现异常', ex);
+    });
+};
+
+var dic = reactive<any>({
+  mainClose: 6,
+  fuClose: 5,
+
+  main: [
+    {
+      text: '强光',
+      icon: 'strong-light.png',
+      iconAc: 'strong-light_HL.png',
+      value: 1,
+      key: 'ins_LightGrade',
+      checked: false
+    },
+    // {
+    //   text: '超强光',
+    //   icon: 'superStrong.png',
+    //   iconAc: 'superStrong_HL.png',
+    //   value: 7,
+    //   key: 'ins_LightGrade',
+    //   checked: false
+    // },
+    {
+      text: '工作光',
+      icon: 'work.png',
+      iconAc: 'work_HL.png',
+      value: 2,
+      key: 'ins_LightGrade',
+      checked: false
+    },
+    {
+      text: '节能光',
+      icon: 'jieN.png',
+      iconAc: 'jieN_HL.png',
+      value: 3,
+      key: 'ins_LightGrade',
+      checked: false
+    },
+    {
+      text: '爆闪',
+      icon: 'strobe-light.png',
+      iconAc: 'strobe-light_HL.png',
+      value: 4,
+      key: 'ins_LightGrade',
+      checked: false
+    },
+    {
+      text: 'SOS',
+      icon: 'sos.png',
+      iconAc: 'sos_HL.png',
+      value: 5,
+      key: 'ins_LightGrade',
+      checked: false
+    }
+    // ,
+    // {
+    //   text: '关闭',
+    //   icon: 'close.png',
+    //   iconAc: 'close_HL.png',
+    //   value: '6',
+    //   key: 'ins_LightGrade',
+    //   checked: false
+    // }
+  ],
+  fu: [
+    {
+      text: '泛光',
+      icon: 'weak-light.png',
+      iconAc: 'weak-light_HL.png',
+      value: 2,
+      key: 'ins_Side_Light',
+      checked: false
+    },
+    {
+      text: '泛光爆闪',
+      icon: 'weak-light.png',
+      iconAc: 'weak-light_HL.png',
+      value: 3,
+      key: 'ins_Side_Light',
+      checked: false
+    },
+    {
+      text: '警示灯',
+      icon: 'hb.png',
+      iconAc: 'hbAc.png',
+      value: 1,
+      key: 'ins_Side_Light',
+      checked: false
+    },
+    {
+      text: '警示灯/泛光',
+      icon: 'hb.png',
+      iconAc: 'hbAc.png',
+      value: 4,
+      key: 'ins_Side_Light',
+      checked: false
+    } //,
+    // {
+    //   text: '关闭',
+    //     icon: 'close.png',
+    //   iconAc: 'close_HL.png',
+    //   value: '5',
+    //   key: 'ins_Side_Light'
+    // }
+  ],
+  sos: [
+    {
+      text: '激光模式',
+      icon: 'laser-light.png',
+      iconAc: 'laser-light_HL.png',
+      value: 1,
+      closeVal: 0,
+      key: 'ins_laser',
+      checked: false
+    },
+    {
+      text: '声光报警',
+      icon: 'hb.png',
+      iconAc: 'hbAc.png',
+      value: 1,
+      closeVal: 0,
+      key: 'ins_ShakeBit',
+      checked: false
+    }
+  ]
+});
+
+var formData = reactive<any>({
+  ins_brightness: null,
+  textLines: ['湖北星汉文化', '有限', '公司', '胡红军'],
+  sendMsg: '湖北星汉文化有限公司'
+});
+
+var currStatu = reactive<any>({
+  'sta_LightGrade': null, // 主灯档位：null=未设置，1=强光，2=工作光，3=节能光，4=爆闪，5=SOS，6=关闭
+  'sta_Side_Light': null, // 副灯档位：1=两侧红蓝警示，2=泛光长亮，3=泛光爆闪，4=红蓝警示与泛光同步开启，5=关闭所有
+  'sta_PowerTime': null, // 剩余工作时间，单位分钟，范围0-5999
+  'sta_PowerPercent': null, // 剩余电量百分比，范围0-100
+  'sta_ShakeBit': null, // 报警状态：0=未报警，1=正在报警
+  'sta_4gSinal': null, // 4G信号强度，范围0-32，数值越大信号越强
+  'sta_imei': null, // IMEI卡号
+  'sta_longitude': null, // 经度
+  'sta_latitude': null, // 纬度
+  'sta_system': null, // 设备现状：0=关机，1=仅充电，2=开机未充电，3=开机且充电
+  'sta_laser': null, // 激光：0=关闭，1=开启
+  'sta_address': null, // 蓝牙MAC地址，String类型，冒号可有可无
+  'sta_brightness': null, // 亮度，范围1-100
+  'sta_SOSGrade': null, // SOS档位：0=关闭，1=单色爆闪模式，2=红蓝模式
+  'sta_Heat': null, // 温度，单位摄氏度
+  'sta_Height': null, // 海拔，单位米
+  'sta_reHeight':null,//相对海拔
+  address: '',
+  sta_BreakNews:null
+});
+
+function getImageUrl(fileName) {
+  let img = new URL(`/src/assets/images/${fileName}`, import.meta.url);
+
+  return img.href;
+}
+
+function dicImgHandle() {
+  let keys = Object.keys(dic);
+  keys.forEach((key) => {
+    if (dic[key] instanceof Array) {
+      dic[key].forEach((el) => {
+        el.icon = getImageUrl(el.icon);
+        el.iconAc = getImageUrl(el.iconAc);
+      });
+    }
+  });
+}
+function sendMode(item, index, type) {
+  let flag = !dic[type][index].checked;
+  let json = {};
+  if (type == 'sos') {
+    dic.sos[index].checked = flag;
+    if (flag) {
+      json[item.key] = 1;
+    } else {
+      json[item.key] = 0;
+    }
+  } else {
+    dic[type].forEach((el, i) => {
+      if (i == index) {
+        el.checked = flag;
+      } else {
+        el.checked = false;
+      }
+    });
+
+    if (flag) {
+      json[item.key] = item.value;
+    } else {
+      json[item.key] = dic[type + 'Close'];
+    }
+  }
+
+  sendCmd(json);
+}
+
+function setBrightness() {
+  let json = { ins_brightness: formData.ins_brightness };
+  sendCmd(json);
+}
+
+function sendCmd(json, isBuffer) {
+  if (isBuffer) {
+    let buffer = new ArrayBuffer(json.length);
+
+    let view = new DataView(buffer);
+    for (let i = 0; i < json.length; i++) {
+      const el = json[i];
+      view.setUint8(i, el);
+    }
+
+    json = buffer;
+  } else if (json instanceof Object) {
+    json = JSON.stringify(json);
+  }
+
+  return publish('B/' + deviceDetail.value.deviceImei, json, { qos: 0, retained: false });
+}
+
+function handleDeviceMessage(payload) {
+  console.log('payload=', payload);
+
+  if (!(payload instanceof object)) {
+    payload = JSON.parse(payload);
+  }
+
+  let keys = Object.keys(payload);
+
+  for (let i = 0; i < keys.length; i++) {
+    let key = keys[i];
+    currStatu[key] = payload[key];
+  }
+
+  //修改主灯模式
+  let index = null;
+  dic.main.find((v, i) => {
+    if (v.value == currStatu.sta_LightGrade) {
+      index = i;
+      return true;
+    }
+  });
+  for (let i = 0; i < dic.main.length; i++) {
+    if (i == index) {
+      dic.main[i].checked = true;
+      continue;
+    }
+    dic.main[i].checked = false;
+  }
+
+  dic.fu.find((v, i) => {
+    if (v.value == currStatu.sta_Side_Light) {
+      index = i;
+      return true;
+    }
+  });
+  for (let i = 0; i < dic.fu.length; i++) {
+    if (i == index) {
+      dic.fu[i].checked = true;
+      continue;
+    }
+    dic.fu[i].checked = false;
+  }
+
+  dic.sos[0] = currStatu.sta_laser;
+  dic.sos[1] = currStatu.sta_ShakeBit;
+}
+
+watch(()=>currStatu.sta_BreakNews,(newVal,oldVal)=>{
+  if(!newVal){
+    return;
+  }
+
+  if(newVal=='I get it'){
+    confirm("用户已确认收到消息");
+  }
+
+  currStatu.sta_BreakNews=null;
+});
+
+//坐标变化了
+watch(
+  () => currStatu.sta_longitude,
+  (newVal, oldVal) => {
+    if(!newVal){
+      return;
+    }
+    //GPS坐标转高德
+    let lonLatConvert = () => {
+      return new Promise((resolve,reject)=>{
+         let url ='https://restapi.amap.com/v3/assistant/coordinate/convert?locations=' +
+        currStatu.sta_longitude +
+        ',' +
+        currStatu.sta_latitude +
+        '&coordsys=gps&output=json&key='+mapApiKey;
+
+      request({
+        url: url,
+        method: 'get'
+      }).then((res) => {
+        if (res.statusCode == 200) {
+          if (res.data.status == '1' && res.data.infocode == '10000') {
+            console.log('坐标转换接口成功', res);
+            let lonLat = res.data.locations.split(',');
+            deviceDetail.value.longitude = lonLat[0];
+            deviceDetail.value.latitude = lonLat[1];
+            resolve({lon:lonLat[0],lat:lonLat[1],flag:true});
+            return;
+          }
+        } else {
+          deviceDetail.value.longitude = currStatu.sta_longitude;
+          deviceDetail.value.latitude = currStatu.sta_latitude;
+           resolve({lon:currStatu.sta_longitude,lat:currStatu.sta_latitude,flag:false});
+          return;
+        }
+
+        reject(false);
+      }).catch(ex=>{
+
+      });
+      });
+     
+    };
+
+    //坐标点逆地理，解析出地址
+    let regeo=(param)=>{
+        let url="https://restapi.amap.com/v3/geocode/regeo?key="+mapApiKey+"&location="+param.lon+","+param.lat;
+         request({
+        url: url,
+        method: 'get'
+      }).then((res) => {
+          if(!res){
+              return;
+          }
+          if(res.info=="OK" && res.infocode=="10000" && res.status=="1"){
+            currStatu.address= res.regeocode.formatted_address;
+          }
+
+      }).catch(ex=>{
+
+      });
+    }
+
+
+    lonLatConvert().then(res=>{
+      regeo(res);
+    }).catch(ex=>{
+
+    });
+  }
+);
+function sendMsg() {
+  
+  formData.sendMsg.padStart(16, ' ');
+
+  formData.textLines = [formData.sendMsg.slice(0, 8), formData.sendMsg.slice(8, 16)];
+  //握手
+  let holdHand = (hexs, time) => {
+    return new Promise((resolve, reject) => {
+      sendCmd(hexs)
+        .then((res) => {
+          setTimeout(() => {
+            resolve(true);
+          }, time);
+        })
+        .catch((err) => {
+          reject(err);
+        });
+    });
+  };
+  //画图
+  let drawText = () => {
+    return new Promise((resolve, reject) => {
+      textToHex.value
+        .drawAndGetPixels()
+        .then((allPixels) => {
+          if (!allPixels) {
+            reject('文本初始化失败');
+            return;
+          }
+          console.log('画图成功');
+          resolve(allPixels);
+        })
+        .catch((compEx) => {
+          reject(compEx);
+           Status.msgLoading=false;
+        });
+    });
+  };
+  //发送3个分包的数据
+  let task = (allPixels) => {
+    try {
+      let combinedData = [];
+      for (let i = 0; i < 2; i++) {
+        let linePixels = (allPixels[i] || []).flat(Infinity).map((item) => item.replace('0x', ''));
+
+        for (var j = linePixels.length; j < 256; j++) {
+          linePixels.push('00');
+        }
+
+        combinedData.push(['0' + (i + 1), '01'].concat(linePixels.slice(0, 128)));
+        combinedData.push(['0' + (i + 1), '02'].concat(linePixels.slice(128, 256)));
+      }
+
+      let curr = 1;
+      let len = combinedData.length;
+
+      console.log('包数量', len);
+      //分包发送
+      let sendPacket = () => {
+        if (combinedData.length === curr - 1) {
+          holdHand('transmit complete', 200).then((res) => {
+            debugger;
+          });
+   Status.msgLoading=false;
+          return;
+        }
+
+        let array = combinedData[curr - 1];
+
+        let json = {
+          ins_msg: array.join('')
+        };
+
+        sendCmd(json)
+          .then((res) => {
+            curr++;
+            console.log('发送成功', curr);
+            setTimeout(sendPacket, 500);
+          })
+          .catch((err) => {
+            if (err.code == '10007') {
+              setTimeout(sendPacket, 500);
+            } else {
+              debugger;
+              console.error('err:', err);
+            }
+               Status.msgLoading=false;
+          });
+      };
+
+      setTimeout(sendPacket, 0);
+      // 5. 发送成功处理
+    } catch (ex) {
+      console.error('出现错误', ex);
+    }
+  };
+  Status.msgLoading=true;
+  setTimeout(() => {
+    Promise.allSettled([holdHand('word transmit start', 2200), drawText()]).then((results) => {
+      console.log('PromiseAll=', results);
+      if (results[0].status == 'rejected') {
+        console.error('出现错误', results[0].reason);
+        return;
+      }
+      if (results[1].status == 'rejected') {
+        console.log('任务1失败了', results[1].reason);
+        return;
+      }
+      console.log('开始发送数据包');
+      task(results[1].value);
+    });
+  }, 0);
+}
+function sendUsr() {
+  formData.textLines = [
+    deviceDetail.value.personnelInfo.unitName,
+    deviceDetail.value.personnelInfo.position,
+    deviceDetail.value.personnelInfo.name,
+    deviceDetail.value.personnelInfo.code
+  ];
+  console.log('data=', formData.textLines);
+
+  let sendServer = () => {
+    let data = {
+      code: deviceDetail.value.personnelInfo.code,
+      name: deviceDetail.value.personnelInfo.name,
+      position: deviceDetail.value.personnelInfo.position,
+      unitName: deviceDetail.value.personnelInfo.unitName,
+      deviceId: route.params.deviceId,
+      deviceImei: deviceDetail.value.deviceImei
+    };
+    return api.SendUser(data);
+  };
+  //握手
+  let holdHand = (hexs, time) => {
+    return new Promise((resolve, reject) => {
+      sendCmd(hexs)
+        .then((res) => {
+          setTimeout(() => {
+            resolve(true);
+          }, time);
+        })
+        .catch((err) => {
+          reject(err);
+        });
+    });
+  };
+  //画图
+  let drawText = () => {
+    return new Promise((resolve, reject) => {
+      textToHex.value
+        .drawAndGetPixels()
+        .then((allPixels) => {
+          if (!allPixels) {
+            reject('文本初始化失败');
+            return;
+          }
+          console.log('画图成功');
+          resolve(allPixels);
+        })
+        .catch((compEx) => {
+          reject(compEx);
+        });
+    });
+  };
+
+  let toByteValue = (value) => {
+    if (typeof value === 'number') {
+      return value;
+    }
+    if (typeof value === 'string') {
+      if (value.startsWith('0x') || value.startsWith('0X')) {
+        return parseInt(value, 16);
+      }
+      return parseInt(`0x${value}`, 16);
+    }
+    return 0;
+  };
+  //发送3个分包的数据
+  let task = (allPixels) => {
+    try {
+      let combinedData = [];
+      for (let i = 0; i < 4; i++) {
+        let linePixels = (allPixels[i] || []).flat(Infinity).map((item) => (typeof item === 'string' ? toByteValue(item) : item));
+
+        for (var j = linePixels.length; j < 256; j++) {
+          linePixels.push(0x00);
+        }
+        linePixels = [0xfa, 0x06, 0x03, i + 1].concat(linePixels);
+
+        linePixels.push(0xff);
+
+        combinedData.push(linePixels);
+      }
+
+      let curr = 1;
+      let len = combinedData.length;
+
+      //分包发送
+      let sendPacket = () => {
+        if (combinedData.length === curr - 1) {
+          holdHand('transmit complete', 200).then((res) => {});
+          sendServer();
+          return;
+        }
+
+        let array = combinedData[curr - 1];
+
+        console.log('array=', array);
+        sendCmd(array, true)
+          .then((res) => {
+            curr++;
+            console.log('发送成功', curr);
+
+            setTimeout(sendPacket, 250);
+          })
+          .catch((err) => {
+            console.error('发送失败', err);
+            if (err.code == '10007') {
+              setTimeout(sendPacket, 250);
+            } else {
+              console.log('err:', err);
+            }
+          });
+      };
+
+      setTimeout(sendPacket, 0);
+      // 5. 发送成功处理
+    } catch (ex) {
+      console.error('发送失败', ex);
+    }
+  };
+
+  setTimeout(() => {
+    Promise.allSettled([holdHand('word transmit start', 2200), drawText()]).then((results) => {
+      if (results[0].status == 'rejected') {
+        setTimeout(() => {}, 500);
+        return;
+      }
+      if (results[1].status == 'rejected') {
+        return;
+      }
+
+      task(results[1].value);
+    });
+  }, 0);
+}
+
+onUnmounted(() => {
+  disconnect();
+});
+onMounted(() => {
+  getList();
+  dicImgHandle();
+  onConnect(async () => {
+    const deviceImei = deviceDetail.value.deviceImei;
+    if (!deviceImei) {
+      return;
+    }
+    try {
+      await subscribe(`A/${deviceImei}`, { qos: 1 });
+      console.log('订阅成功');
+    } catch (err) {
+      console.error('订阅失败（onConnect内）:', err);
+    }
+  });
+  // 2. 注册消息接收回调（核心：处理设备发送的消息）
+  onMessage((msg) => {
+    console.log('收到新消息:', {
+      主题: msg.topic,
+      内容: msg.payload,
+      时间: msg.time,
+      QoS: msg.qos
+    });
+    // 在这里处理消息（根据实际业务逻辑）
+    handleDeviceMessage(msg.payload);
+  });
+  onError((err) => {
+    console.error('MQTT连接失败原因:', err.message); // 关键：打印连接失败的具体原因
+  });
+  connect();
+});
+
+window.confirm = function (msg, OK, cancel, title) {
+  let Cfg = {
+    Visible: true,
+    title: title ? title : '提示',
+    text: msg ? msg : '此操作不可逆，您确定这样做吗？',
+    OkCallback: () => {
+      Status.confirm.Visible = false;
+      if (OK) {
+        OK();
+      }
+    },
+    showCancel: true,
+    cancelCallback: () => {
+      Status.confirm.Visible = false;
+      if (cancel) {
+        cancel();
+      }
+    },
+    OkTxt: '',
+    cancelTxt: ''
+  };
+
+  Status.confirm = Cfg;
+};
+
+window.ShowConfirm = function (option: any) {
+  let Cfg = {
+    Visible: true,
+    title: option.title ? option.title : '提示',
+    text: option.text ? option.text : '此操作不可逆，您确定这样做吗？',
+    OkCallback: () => {
+      Status.confirm.Visible = false;
+      if (option.OkCallback) {
+        option.OkCallback();
+      }
+    },
+    showCancel: true,
+    cancelCallback: () => {
+      Status.confirm.Visible = false;
+      if (option.cancelCallback) {
+        option.cancelCallback();
+      }
+    },
+    OkTxt: '',
+    cancelTxt: ''
+  };
+
+  Status.confirm = Cfg;
+};
+
+window.hideConfirm = function () {
+  let Cfg = {
+    Visible: false,
+    title: '提示',
+    text: '',
+    cancelCallback: null,
+    OkCallback: null,
+    showCancel: false,
+    OkTxt: '',
+    cancelTxt: ''
+  };
+
+  Status.confirm = Cfg;
+};
+</script>
+<style lang="scss" scoped>
+.p-2 {
+  background: #f7f8fc;
+  min-height: calc(100vh - 84px);
+  height: calc(100vh - 84px);
+  box-sizing: border-box;
+  padding: 15px;
+}
+.device-page {
+  .header-bar {
+    border-radius: 8px;
+    background: linear-gradient(135deg, #3400e7, #009bff);
+    color: white;
+    padding: 20px;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+
+    .device-status {
+      .online {
+        color: #00ff00;
+      }
+
+      .offline {
+        color: rgb(224, 52, 52);
+      }
+    }
+  }
+
+  .content-wrapper {
+    .content-row {
+      margin-bottom: 10px;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+      background: white;
+      padding: 0px 20px 50px;
+      border: 1px solid #ebeef5;
+      height: 289px;
+      position: relative;
+    }
+
+    .content-card_gps {
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+      background: white;
+      padding: 0px 20px 50px;
+      border: 1px solid #ebeef5;
+      height: 100%;
+    }
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 20px;
+      color: #303133;
+    }
+
+    .light-mode {
+      display: flex;
+
+      justify-content: space-between;
+    }
+
+    .lacatin_gps {
+      height: 70px;
+      border-radius: 4px;
+      background: rgba(247, 248, 252, 1);
+      display: inline-block;
+      width: 400px;
+      padding: 10px;
+    }
+
+    .brightness-alarm {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .brightness-control {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        border-radius: 39px;
+        box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
+        background: rgba(255, 255, 255, 1);
+        width: 70%;
+        height: 54px;
+        padding: 10px 20px;
+
+        .brightness-label {
+          font-size: 14px;
+          color: #606266;
+          min-width: 70px;
+        }
+
+        .brightness-value {
+          font-size: 14px;
+          color: #409eff;
+          font-weight: 500;
+        }
+
+        .save-btn {
+          padding: 6px 20px;
+          border-radius: 29px;
+          background: rgba(2, 124, 251, 1);
+          border: none;
+        }
+
+        .inputTFT {
+          width: 130px;
+          height: 40px;
+        }
+      }
+
+      .alarm-btn {
+        background-color: rgba(224, 52, 52, 1);
+        border-color: rgba(224, 52, 52, 1);
+        padding: 8px 20px;
+        border-radius: 27px;
+      }
+    }
+
+    .location-info {
+      .location-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        font-size: 14px;
+        color: #606266;
+
+        .location-icon {
+          margin-right: 8px;
+          font-weight: bold;
+          color: #409eff;
+        }
+
+        .view-btn {
+          margin: 0 8px;
+          padding: 0;
+          font-size: 13px;
+        }
+      }
+    }
+
+    .form-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 15px;
+      margin-bottom: 15px;
+      text-align: right;
+
+      .form-item {
+        display: flex;
+        align-items: center;
+
+        .form-label {
+          min-width: 35px;
+          font-size: 14px;
+          color: #606266;
+          margin-right: 10px;
+        }
+
+        .el-input {
+          flex: 1;
+        }
+      }
+
+      .register-btn {
+        grid-column: 1 / 3;
+        justify-self: start;
+        padding: 6px 20px;
+        position: absolute;
+        right: 19px;
+        bottom: 30px;
+        border-radius: 29px;
+        background: rgba(2, 124, 251, 1);
+        border: none;
+      }
+    }
+
+    .message-content {
+      // display: flex;
+      // flex-direction: column;
+      // gap: 10px;
+
+      .el-textarea {
+        border: 1px solid rgba(29, 111, 255, 1);
+        border-radius: 4px;
+        background: rgba(247, 248, 252, 1);
+        border-radius: 6px;
+        padding: 10px;
+      }
+
+      .el-textarea__inner {
+        background: rgba(247, 248, 252, 1);
+      }
+
+      .send-btn {
+        align-self: flex-end;
+        padding: 10px 20px;
+        border-radius: 29px;
+        background: rgba(2, 124, 251, 1);
+        border: none;
+        margin: 20px 0px 30px 0;
+      }
+    }
+
+    .upload-area {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100px;
+      border: 1px dashed #dcdfe6;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .video-input {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+
+      .el-input {
+        flex: 1;
+      }
+
+      .save-video-btn {
+        padding: 6px 12px;
+      }
+    }
+  }
+
+  // 响应式调整
+  @media (max-width: 768px) {
+    .header-bar {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 16px;
+    }
+
+    .form-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .form-grid .register-btn {
+      grid-column: 1;
+    }
+
+    .light-mode .mode-group {
+      gap: 10px;
+    }
+
+    .light-mode .mode-item {
+      width: 60px;
+    }
+
+    .light-mode .mode-icon {
+      width: 30px;
+      height: 30px;
+    }
+  }
+}
+
+.displayNone {
+  display: none !important;
+}
+
+.fleft {
+  float: left !important;
+}
+.fright {
+  float: right !important;
+}
+
+.clear {
+  clear: both !important;
+}
+
+.leftContent {
+  width: calc(70% - 15px);
+  margin-right: 15px;
+  height: calc(100% - 80px);
+}
+
+.leftContent .row {
+  width: 100%;
+  height: calc(calc(100% - 30px) / 3);
+  margin-bottom: 15px;
+}
+.leftContent .row:last-child {
+  margin-bottom: 0px !important;
+}
+.leftContent .fuLight .light {
+  width: calc(65% - 15px);
+  margin-right: 15px;
+}
+.leftContent .fuLight .sos {
+  width: 35%;
+}
+.card {
+  height: 100%;
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px #0022604a;
+  background: #ffffff;
+}
+
+.rightContent {
+  width: 30%;
+  height: calc(100% - 80px);
+  display: flex;
+  flex-direction: column;
+}
+
+.rightContent .liangdu {
+  width: 100%;
+  height: 55px;
+  margin-bottom: 15px;
+  flex-shrink: 0; /* 防止被压缩 */
+
+  border-radius: 39px;
+  box-shadow: 0px 0px 6px 0px #0022604a;
+  background: #ffffff;
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.rightContent .leftsett {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  width: calc(100% - 80px);
+  box-sizing: border-box;
+  padding-left: 15px;
+}
+
+.rightContent .location {
+  flex: 1; /* 自动填充剩余空间 */
+  width: 100%;
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px #0022604a;
+  background: #ffffff;
+}
+
+.rightContent .msg {
+  height: calc(calc(100% - 30px) / 3);
+  flex-shrink: 0; /* 防止被压缩 */
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px #0022604a;
+  background: rgba(255, 255, 255, 1);
+  margin-top: 15px;
+}
+
+.title {
+  color: #38404f;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Bold;
+  font-size: 14px;
+  font-weight: 700;
+
+  letter-spacing: 0px;
+  text-align: left;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+}
+
+.padding {
+  padding: 12px;
+  box-sizing: border-box;
+}
+
+.usr .form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+  width: 100%;
+  height: calc(100% - 90px);
+  margin-bottom: 15px;
+  text-align: right;
+  position: relative;
+
+  .form-item {
+    display: flex;
+    align-items: center;
+
+    .form-label {
+      min-width: 35px;
+      font-size: 14px;
+      color: #606266;
+      margin-right: 10px;
+    }
+
+    .el-input {
+      flex: 1;
+    }
+  }
+}
+.msg .form-grid {
+  width: 100%;
+  height: calc(100% - 90px);
+  margin-bottom: 15px;
+  .textarea {
+    width: 100%;
+    height: 100%;
+    resize: none;
+    padding: 5px;
+    box-sizing: border-box;
+    border: 1px solid #bdc6d7;
+    border-radius: 4px;
+    background: #f7f8fc;
+  }
+  .textarea:focus,
+  .textarea:focus-visible {
+    border: 1px solid #1d6fff !important;
+    outline: none !important;
+  }
+}
+
+.register-btn {
+  width: 70px;
+  padding: 0px 20px;
+
+  border-radius: 29px;
+  background: #027cfb;
+  border: none;
+}
+.lightFlex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: calc(100% - 50px);
+}
+
+.lightItem {
+  width: 100px;
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+}
+
+.lightItem .imgContent {
+  width: 100%;
+  height: 130px;
+  height: calc(100% - 30px);
+  border: 1px solid #027cfb33;
+  border-radius: 4px;
+  position: relative;
+}
+
+.lightItem .imgContent img,
+.lightItem .imgContent .img {
+  width: 100px;
+  height: 100px;
+  object-fit: none;
+  object-position: center;
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: 15px;
+  background-size: inherit;
+}
+
+.lightItem .imgContent .imgTxt {
+  height: 30px;
+  line-height: 25px;
+  color: #38404f;
+  text-align: center;
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0px;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  z-index: 1;
+  width: 100%;
+}
+// 贴一层透明膜,让switch点不上
+.lightItem::before {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+  background-color: #00000000;
+}
+
+.lightItem.active .imgContent {
+  border: 1px solid #027cfb;
+  background: #027cfb0f;
+}
+.rightContent .liangdu .rmkLiangdu {
+  color: #38404f;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Bold;
+  font-size: 14px;
+  font-weight: 700;
+
+  letter-spacing: 0px;
+  text-align: left;
+  height: 30px;
+  line-height: 30px;
+}
+.rightContent .liangdu .txtLiangdu {
+  box-sizing: border-box;
+  border: 1px solid #d2d2d3;
+  border-radius: 8px;
+  height: 38px;
+  line-height: 38px;
+  text-align: left;
+  text-indent: 5px;
+  color: #38404f;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+  margin-left: 5px;
+  letter-spacing: 0px;
+  margin-right: 5px;
+  width: 70px;
+}
+
+.TextToHex {
+  position: fixed;
+  z-index: 0;
+  top: -999999rpx;
+  left: -999999rpx;
+  visibility: hidden;
+}
+.mylocation {
+  width: 100%;
+  height: calc(calc(100% - 60px) / 2);
+}
+.mylocation .icoRemark img {
+  width: auto;
+  height: 15px;
+  margin-right: 5px;
+}
+.mylocation .icoRemark {
+  height: 30px;
+  width: 100%;
+
+  color: #38404f99;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+
+  letter-spacing: 0px;
+  text-align: left;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-start;
+}
+.mylocation .lonlat {
+  color: #38404f;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 30px;
+  letter-spacing: 0px;
+  text-align: left;
+  width: 100%;
+  height: 30px;
+}
+
+.mylocation .addressLink {
+  width: 100%;
+  height: calc(100% - 100px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: flex-start;
+  align-items: center;
+}
+.mylocation .addrss {
+  width: calc(100% - 60px);
+  height: 100%;
+  border-radius: 4px;
+  background: rgba(247, 248, 252, 1);
+  color: #38404f;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.mylocation .link {
+  width: 60px;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+
+  color: #027cfb;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+
+  letter-spacing: 0px;
+}
+
+.mylocation .haiba {
+  width: 100%;
+  color: #38404f;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+  height: 30px;
+  line-height: 30px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+</style>
diff --git a/src/views/controlCenter/6170/index.vue b/src/views/controlCenter/6170/index.vue
index e10d8af..4a355bf 100644
--- a/src/views/controlCenter/6170/index.vue
+++ b/src/views/controlCenter/6170/index.vue
@@ -1,153 +1,178 @@
 <template>
-    <div class="device-page p-2">
-        <!-- 头部信息栏 -->
-        <div class="header-bar">
-            <div>设备名称：{{ deviceDetail.deviceName }}</div>
-            <div>设备型号：{{ deviceDetail.deviceImei }}</div>
-            <div class="device-status">设备状态：
-                <span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
-                    {{ deviceDetail.onlineStatus === 1 ? '在线' : (deviceDetail.onlineStatus === 2 ? '故障' : '离线') }}
-                </span>
-            </div>
-            <div>电量：{{ deviceDetail.batteryPercentage || 0 }}%</div>
-            <div>续航：{{ deviceDetail.batteryRemainingTime || "0" }} 分钟</div>
-        </div>
-
-        <!-- 主体内容区域 -->
-        <div class="content-wrapper">
-            <el-row :gutter="20" class="content-row" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'" >
-                <el-col :lg="24" :xs="24">
-                    <div class="staticRwo" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'"
-                        @click="showClose()">
-                        设备强制报警中!
-                    </div>
-                </el-col>
-            </el-row>
-            <!-- 第一行：灯光模式 + 灯光亮度、强制报警、位置信息 -->
-            <el-row :gutter="20" class="content-row">
-                <el-col :lg="16" :xs="24">
-                    <div class="content-card">
-                        <h4 class="section-title">灯光模式</h4>
-                        <div class="light-mode">
-                            <!-- 使用v-for循环渲染灯光模式卡片 -->
-                            <div class="mode-card" :class="{ 'active': mode.active }"
-                                @click.stop="handleModeClick(mode.id)" v-for="mode in lightModes" :key="mode.id">
-                                <img :src="mode.active ? mode.activeIcon : mode.icon" :alt="mode.name"
-                                    class="mode-icon" />
-                                <div class="mode-name">{{ mode.name }}</div>
-                                <el-switch v-model="mode.switchStatus" />
-                            </div>
-                            <!-- 激光模式（单独处理） -->
-                            <div class="mode-card" :class="{ 'active': laserMode.active }" @click="handleLaserClick">
-                                <img :src="laserMode.active ? laserMode.activeIcon : laserMode.icon"
-                                    :alt="laserMode.name" class="mode-icon" />
-                                <div class="mode-name">{{ laserMode.name }}</div>
-                                <el-switch v-model="laserMode.switchStatus" />
-                            </div>
-                        </div>
-                    </div>
-                </el-col>
-                <el-col :lg="8" :xs="24">
-                    <div class="brightness-alarm">
-                        <div class="brightness-control">
-                            <span class="brightness-label">灯光亮度</span>
-                            <el-input class="inputTFT" v-model="deviceDetail.lightBrightness" :min="0" :max="100"
-                                :step="1" size="small" />
-                            <span class="brightness-value">%</span>
-                            <el-button type="primary" class="save-btn" @click="saveBtn" :loading="lightModesLoading"
-                                :loading-text="lightModesLoading ? '保存中...' : '保存'"> {{
-                                    lightModesLoading ? '保存中' : '保存' }}</el-button>
-                        </div>
-                        <el-button type="danger" class="alarm-btn" @click="forceAlarm" :loading="forceAlarmLoading" v-if="deviceDetail.alarmStatus === 0 || deviceDetail.alarmStatus === null"
-                            :loading-text="forceAlarmLoading ? '报警中...' : '强制报警'" > {{
-                                forceAlarmLoading ? '报警中' : '强制报警' }}</el-button>
-                    </div>
-                    <div class="content-card_gps">
-                        <h4 class="section-title">位置信息</h4>
-                        <div class="location-info">
-                            <div class="location-item">
-                                <span class="location-icon"></span>
-                                <span>经纬度 {{ deviceDetail && deviceDetail.longitude ?
-                                    Number(deviceDetail.longitude).toFixed(4) : '无' }}
-                                    {{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4)
-                                        : '无' }} </span>
-                            </div>
-                            <div class="location-item">
-
-                                <div>地址 <span class="lacatin_gps">{{ deviceDetail.address || "未获取到地址" }}</span></div>
-                                <el-button link type="primary" class="view-btn"
-                                    @click="lookMap(deviceDetail)">查看</el-button>
-                            </div>
-                        </div>
-                    </div>
-                </el-col>
-            </el-row>
-
-            <!-- 第二行：人员信息登记 + 发送信息 -->
-            <el-row :gutter="20" class="content-row">
-                <el-col :lg="16" :xs="24">
-                    <div class="content-card">
-                        <h4 class="section-title">人员信息登记</h4>
-                        <div class="form-grid">
-                            <div class="form-item">
-                                <span class="form-label">单位:</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入单位名称"
-                                    v-model="deviceDetail.personnelInfo.unitName" />
-                            </div>
-                            <div class="form-item">
-                                <span class="form-label">职位:</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入职位名称"
-                                    v-model="deviceDetail.personnelInfo.position" />
-                            </div>
-                            <div class="form-item">
-                                <span class="form-label">姓名</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入职位姓名"
-                                    v-model="deviceDetail.personnelInfo.name" />
-                            </div>
-                            <div class="form-item">
-                                <span class="form-label">ID:</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入ID"
-                                    v-model="deviceDetail.personnelInfo.code" />
-                            </div>
-                            <el-button type="primary" class="register-btn" @click="registerPostInit"
-                                :loading="fullscreenLoading" :loading-text="fullscreenLoading ? '登记中...' : '登记'"> {{
-                                    fullscreenLoading ? '登记中' : '登记' }}</el-button>
-                        </div>
-                    </div>
-                </el-col>
-                <el-col :lg="8" :xs="24">
-                    <div class="content-card">
-                        <h4 class="section-title">发送信息</h4>
-                        <div class="message-content">
-                            <el-input type="textarea" class="textareaTFT" :rows="4" placeholder="现场危险，停止救援！紧急撤离至安全区域！"
-                                v-model="deviceDetail.sendMsg" resize="none" />
-                            <div style="text-align: end;clear: both;">
-                                <el-button type="primary" class="send-btn" @click="sendTextMessage"
-                                    :loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
-                                        sendTextLoading ? '发送中' : '发送' }}</el-button>
-                            </div>
-                        </div>
-
-                    </div>
-                </el-col>
-            </el-row>
-        </div>
-        <!-- ===========充电提示框====== -->
-        <el-dialog title="充电提示" v-model="centerDialogVisible" width="15%">
-            <div style="display: flex; align-items: center;">
-                <h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
-            </div>
-            <div>请及时充电</div>
-            <span slot="footer" class="dialog-footer" style="text-align: right;display: block;">
-                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
-            </span>
-        </el-dialog>
+  <div class="device-page p-2">
+    <!-- 头部信息栏 -->
+    <div class="header-bar">
+      <div>设备名称：{{ deviceDetail.deviceName }}</div>
+      <div>设备型号：{{ deviceDetail.deviceImei }}</div>
+      <div class="device-status">
+        设备状态：
+        <span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
+          {{ deviceDetail.onlineStatus === 1 ? '在线' : deviceDetail.onlineStatus === 2 ? '故障' : '离线' }}
+        </span>
+      </div>
+      <div>电量：{{ deviceDetail.batteryPercentage || 0 }}%</div>
+      <div>续航：{{ deviceDetail.batteryRemainingTime || '0' }} 分钟</div>
     </div>
+
+    <!-- 主体内容区域 -->
+    <div class="content-wrapper">
+      <el-row :gutter="20" class="content-row" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'">
+        <el-col :lg="24" :xs="24">
+          <div class="staticRwo" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'" @click="showClose()">设备强制报警中!</div>
+        </el-col>
+      </el-row>
+      <!-- 第一行：灯光模式 + 灯光亮度、强制报警、位置信息 -->
+      <el-row :gutter="20" class="content-row">
+        <el-col :lg="16" :xs="24">
+          <div class="content-card">
+            <h4 class="section-title">灯光模式</h4>
+            <div class="light-mode">
+              <!-- 使用v-for循环渲染灯光模式卡片 -->
+              <div
+                class="mode-card"
+                :class="{ 'active': mode.active }"
+                @click.stop="handleModeClick(mode.id)"
+                v-for="mode in lightModes"
+                :key="mode.id"
+              >
+                <img :src="mode.active ? mode.activeIcon : mode.icon" :alt="mode.name" class="mode-icon" />
+                <div class="mode-name">{{ mode.name }}</div>
+                <el-switch v-model="mode.switchStatus" />
+              </div>
+              <!-- 激光模式（单独处理） -->
+              <div class="mode-card" :class="{ 'active': laserMode.active }" @click="handleLaserClick">
+                <img :src="laserMode.active ? laserMode.activeIcon : laserMode.icon" :alt="laserMode.name" class="mode-icon" />
+                <div class="mode-name">{{ laserMode.name }}</div>
+                <el-switch v-model="laserMode.switchStatus" />
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :lg="8" :xs="24">
+          <div class="brightness-alarm">
+            <div class="brightness-control">
+              <span class="brightness-label">灯光亮度</span>
+              <el-input class="inputTFT" v-model="deviceDetail.lightBrightness" :min="0" :max="100" :step="1" size="small" />
+              <span class="brightness-value">%</span>
+              <el-button
+                type="primary"
+                class="save-btn"
+                @click="saveBtn"
+                :loading="lightModesLoading"
+                :loading-text="lightModesLoading ? '保存中...' : '保存'"
+              >
+                {{ lightModesLoading ? '保存中' : '保存' }}</el-button
+              >
+            </div>
+            <el-button
+              type="danger"
+              class="alarm-btn"
+              @click="forceAlarm"
+              :loading="forceAlarmLoading"
+              :loading-text="forceAlarmLoading ? '解除报警' : '强制报警'"
+            >
+              {{ forceAlarmLoading ? '解除报警' : '强制报警' }}</el-button
+            >
+          </div>
+          <div class="content-card_gps">
+            <h4 class="section-title">位置信息</h4>
+            <div class="location-info">
+              <div class="location-item">
+                <span class="location-icon"></span>
+                <span
+                  >经纬度 {{ deviceDetail && deviceDetail.longitude ? Number(deviceDetail.longitude).toFixed(4) : '无' }}
+                  {{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4) : '无' }}
+                </span>
+              </div>
+              <div class="location-item">
+                <div>
+                  地址 <span class="lacatin_gps">{{ deviceDetail.address || '未获取到地址' }}</span>
+                </div>
+                <el-button link type="primary" class="view-btn" @click="lookMap(deviceDetail)">查看</el-button>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第二行：人员信息登记 + 发送信息 -->
+      <el-row :gutter="20" class="content-row">
+        <el-col :lg="16" :xs="24">
+          <div class="content-card">
+            <h4 class="section-title">人员信息登记</h4>
+            <div class="form-grid">
+              <div class="form-item">
+                <span class="form-label">单位:</span>
+                <el-input v-if="deviceDetail" placeholder="请输入单位名称" v-model="deviceDetail.personnelInfo.unitName" />
+              </div>
+              <div class="form-item">
+                <span class="form-label">职位:</span>
+                <el-input v-if="deviceDetail" placeholder="请输入职位名称" v-model="deviceDetail.personnelInfo.position" />
+              </div>
+              <div class="form-item">
+                <span class="form-label">姓名</span>
+                <el-input v-if="deviceDetail" placeholder="请输入职位姓名" v-model="deviceDetail.personnelInfo.name" />
+              </div>
+              <div class="form-item">
+                <span class="form-label">ID:</span>
+                <el-input v-if="deviceDetail" placeholder="请输入ID" v-model="deviceDetail.personnelInfo.code" />
+              </div>
+              <el-button
+                type="primary"
+                class="register-btn"
+                @click="registerPostInit"
+                :loading="fullscreenLoading"
+                :loading-text="fullscreenLoading ? '登记中...' : '登记'"
+              >
+                {{ fullscreenLoading ? '登记中' : '登记' }}</el-button
+              >
+            </div>
+          </div>
+        </el-col>
+        <el-col :lg="8" :xs="24">
+          <div class="content-card">
+            <h4 class="section-title">发送信息</h4>
+            <div class="message-content">
+              <el-input
+                type="textarea"
+                class="textareaTFT"
+                :rows="4"
+                placeholder="现场危险，停止救援！紧急撤离至安全区域！"
+                v-model="deviceDetail.sendMsg"
+                resize="none"
+              />
+              <div style="text-align: end; clear: both">
+                <el-button
+                  type="primary"
+                  class="send-btn"
+                  @click="sendTextMessage"
+                  :loading="sendTextLoading"
+                  :loading-text="sendTextLoading ? '发送中...' : '发送'"
+                >
+                  {{ sendTextLoading ? '发送中' : '发送' }}</el-button
+                >
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- ===========充电提示框====== -->
+    <el-dialog title="充电提示" v-model="centerDialogVisible" width="15%">
+      <div style="display: flex; align-items: center">
+        <h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
+      </div>
+      <div>请及时充电</div>
+      <span slot="footer" class="dialog-footer" style="text-align: right; display: block">
+        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 <script setup name="DeviceControl" lang="ts">
 const route = useRoute();
 import { useMqtt } from '@/utils/mqtt';
-import api from '@/api/controlCenter/controlPanel/index'
+import api from '@/api/controlCenter/controlPanel/index';
 import { DeviceDetail, LightMode } from '@/api/controlCenter/controlPanel/types';
 import { generateShortId, getDeviceStatus } from '@/utils/function';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -165,864 +190,876 @@ import laserLightDefault from '@/assets/images/laser-light.png';
 import laserLightActive from '@/assets/images/laser-light_HL.png';
 import closeDefault from '@/assets/images/close.png';
 import closeActive from '@/assets/images/close_HL.png';
-const fullscreenLoading = ref(false)
-const forceAlarmLoading = ref(false)  //强制报警
-const sendTextLoading = ref(false)
-const lightModesLoading = ref(false)
-const centerDialogVisible = ref(false)
-const {
-    connected,
-    connect,
-    subscribe,
-    onConnect,
-    onError,
-    onMessage,
-    disconnect
-} = useMqtt();
+const fullscreenLoading = ref(false);
+const forceAlarmLoading = ref(false); //强制报警
+const sendTextLoading = ref(false);
+const lightModesLoading = ref(false);
+const centerDialogVisible = ref(false);
+const { connected, connect, subscribe, onConnect, onError, onMessage, disconnect, publish } = useMqtt();
 // 灯光模式数据（引用导入的图片）
 const lightModes = ref<LightMode[]>([
-    {
-        id: 'strong',
-        name: '强光',
-        icon: strongLightDefault, // 直接使用导入的变量
-        activeIcon: strongLightActive,
-        switchStatus: true,
-        instructValue: '1',
-        active: true,
-    },
-    {
-        id: 'weak',
-        name: '弱光',
-        icon: weakLightDefault,
-        activeIcon: weakLightActive,
-        switchStatus: false,
-        instructValue: '2',
-        active: false,
-    },
-    {
-        id: 'strobe',
-        name: '爆闪',
-        icon: strobeLightDefault,
-        activeIcon: strobeLightActive,
-        switchStatus: false,
-        instructValue: '3',
-        active: false
-    },
-    {
-        id: 'flood',
-        name: '泛光',
-        icon: floodLightDefault,
-        activeIcon: floodLightActive,
-        switchStatus: false,
-        instructValue: '4',
-        active: false
-    },
-    {
-        id: 'close',
-        name: '关闭',
-        icon: closeDefault,
-        activeIcon: closeActive,
-        switchStatus: false,
-        instructValue: '0',
-        active: false
-    },
+  {
+    id: 'strong',
+    name: '强光',
+    icon: strongLightDefault, // 直接使用导入的变量
+    activeIcon: strongLightActive,
+    switchStatus: true,
+    instructValue: '1',
+    active: true
+  },
+  {
+    id: 'weak',
+    name: '弱光',
+    icon: weakLightDefault,
+    activeIcon: weakLightActive,
+    switchStatus: false,
+    instructValue: '2',
+    active: false
+  },
+  {
+    id: 'strobe',
+    name: '爆闪',
+    icon: strobeLightDefault,
+    activeIcon: strobeLightActive,
+    switchStatus: false,
+    instructValue: '3',
+    active: false
+  },
+  {
+    id: 'flood',
+    name: '泛光',
+    icon: floodLightDefault,
+    activeIcon: floodLightActive,
+    switchStatus: false,
+    instructValue: '4',
+    active: false
+  },
+  {
+    id: 'close',
+    name: '关闭',
+    icon: closeDefault,
+    activeIcon: closeActive,
+    switchStatus: false,
+    instructValue: '0',
+    active: false
+  }
 ]);
 const laserMode = ref<LightMode>({
-    id: 'laser',
-    name: '激光',
-    icon: laserLightDefault,
-    activeIcon: laserLightActive,
-    switchStatus: false,
-    instructValue: '1',
-    active: false
+  id: 'laser',
+  name: '激光',
+  icon: laserLightDefault,
+  activeIcon: laserLightActive,
+  switchStatus: false,
+  instructValue: '1',
+  active: false
 });
 
 const deviceDetail = ref<DeviceDetail & { typeName: string }>({
-    // 重点：personnelInfo 初始化为空对象，避免 undefined
-    personnelInfo: {
-        unitName: '',
-        position: '',
-        name: '',
-        code: ''
-    },
-    lightBrightness: '',
-    deviceName: '',
-    deviceImei: '',
-    onlineStatus: 0,
-    batteryPercentage: 0,
-    batteryRemainingTime: '',
-    longitude: '',
-    latitude: '',
-    address: '',
-    sendMsg: '',
-    chargeState: '0',
-    typeName: '',
-    alarmStatus: 0
+  // 重点：personnelInfo 初始化为空对象，避免 undefined
+  personnelInfo: {
+    unitName: '',
+    position: '',
+    name: '',
+    code: ''
+  },
+  lightBrightness: '',
+  deviceName: '',
+  deviceImei: '',
+  onlineStatus: 0,
+  batteryPercentage: 0,
+  batteryRemainingTime: '',
+  longitude: '',
+  latitude: '',
+  address: '',
+  sendMsg: '',
+  chargeState: '0',
+  typeName: '',
+  alarmStatus: 0
 });
 // 保留原有的操作中标志位
 const isUpdatingStatus = ref(false);
 const handleModeClick = async (modeId: string) => {
-    if (isUpdatingStatus.value || isSyncingStatus.value) return;
-    try {
-        const deviceId = route.params.deviceId as string;
-        if (!deviceId) return;
-        const targetMode = lightModes.value.find(m => m.id === modeId);
-        if (!targetMode || !targetMode.instructValue) return;
-        // 标记为用户操作中的更新
-        isUpdatingStatus.value = true;
-        // 调用接口（仅用户点击时触发一次）
-        const res = await api.lightModeSettings({
-            deviceId,
-            instructValue: targetMode.instructValue,
-            deviceImei: deviceDetail.value.deviceImei,
-            typeName: deviceDetail.value.typeName,
-        });
-        if (res.code === 200) {
-            ElMessage.closeAll();
-            proxy?.$modal.msgSuccess(res.msg);
-            setActiveLightMode(modeId);
-        } else {
-            proxy?.$modal.msgError(res.msg);
-            const prevActiveMode = lightModes.value.find(m => m.active);
-            if (prevActiveMode) {
-                setActiveLightMode(prevActiveMode.id);
-            }
-        }
-    } catch (error) {
-        // proxy?.$modal.msgError("操作失败，请稍后重试");
-        // 异常时恢复状态
-        const prevActiveMode = lightModes.value.find(m => m.active);
-        if (prevActiveMode) {
-            setActiveLightMode(prevActiveMode.id);
-        }
-    } finally {
-        // 无论成功失败，最终重置用户操作标志位
-        isUpdatingStatus.value = false;
+  if (isUpdatingStatus.value || isSyncingStatus.value) return;
+  try {
+    const deviceId = route.params.deviceId as string;
+    if (!deviceId) return;
+    const targetMode = lightModes.value.find((m) => m.id === modeId);
+    if (!targetMode || !targetMode.instructValue) return;
+    // 标记为用户操作中的更新
+    isUpdatingStatus.value = true;
+    // 调用接口（仅用户点击时触发一次）
+    const res = await api.lightModeSettings({
+      deviceId,
+      instructValue: targetMode.instructValue,
+      deviceImei: deviceDetail.value.deviceImei,
+      typeName: deviceDetail.value.typeName
+    });
+    if (res.code === 200) {
+      ElMessage.closeAll();
+      proxy?.$modal.msgSuccess(res.msg);
+      setActiveLightMode(modeId);
+    } else {
+      proxy?.$modal.msgError(res.msg);
+      const prevActiveMode = lightModes.value.find((m) => m.active);
+      if (prevActiveMode) {
+        setActiveLightMode(prevActiveMode.id);
+      }
     }
+  } catch (error) {
+    // proxy?.$modal.msgError("操作失败，请稍后重试");
+    // 异常时恢复状态
+    const prevActiveMode = lightModes.value.find((m) => m.active);
+    if (prevActiveMode) {
+      setActiveLightMode(prevActiveMode.id);
+    }
+  } finally {
+    // 无论成功失败，最终重置用户操作标志位
+    isUpdatingStatus.value = false;
+  }
 };
 const isSyncingStatus = ref(false);
 const setActiveLightMode = (targetModeId: string) => {
-    isSyncingStatus.value = true; // 开启阻断：更新switchStatus时，watch不触发接口
-    lightModes.value.forEach(mode => {
-        const isActive = mode.id === targetModeId;
-        mode.active = isActive;
-        mode.switchStatus = isActive; // 这里更新会触发watch，但被isSyncingStatus阻断
-    });
-    isSyncingStatus.value = false; // 同步完成，重置标志位
+  isSyncingStatus.value = true; // 开启阻断：更新switchStatus时，watch不触发接口
+  lightModes.value.forEach((mode) => {
+    const isActive = mode.id === targetModeId;
+    mode.active = isActive;
+    mode.switchStatus = isActive; // 这里更新会触发watch，但被isSyncingStatus阻断
+  });
+  isSyncingStatus.value = false; // 同步完成，重置标志位
 };
 const getList = async () => {
-    try {
-        const deviceId = route.params.deviceId;
-        if (!deviceId) return;
-        const res = await api.deviceDeatil(deviceId as string);
-        deviceDetail.value = res.data;
-        // 处理人员信息空值（原有逻辑保留）
-        if (!deviceDetail.value.personnelInfo) {
-            deviceDetail.value.personnelInfo = {
-                unitName: '',
-                position: '',
-                name: '',
-                code: ''
-            };
-        }
-        // 1. 匹配接口返回的灯光模式
-        let targetModeId = "strong";
-        const mainLightMode = String(res.data.mainLightMode || "1"); // 接口值转字符串，“强光”
-        const matchedMode = lightModes.value.find(
-            mode => mode.instructValue === mainLightMode
-        );
-        if (matchedMode) {
-            targetModeId = matchedMode.id;
-        }
-        setActiveLightMode(targetModeId);
-        const laserStatus = Number(res.data.laserLightMode);
-        laserMode.value.active = laserStatus === 1;
-        laserMode.value.switchStatus = laserStatus === 1;
-    } catch (error) {
-        console.error("获取设备详情失败：", error);
-        setActiveLightMode("strong"); // 异常时默认强光
+  try {
+    const deviceId = route.params.deviceId;
+    if (!deviceId) return;
+    const res = await api.deviceDeatil(deviceId as string);
+    deviceDetail.value = res.data;
+    // 处理人员信息空值（原有逻辑保留）
+    if (!deviceDetail.value.personnelInfo) {
+      deviceDetail.value.personnelInfo = {
+        unitName: '',
+        position: '',
+        name: '',
+        code: ''
+      };
     }
+    // 1. 匹配接口返回的灯光模式
+    let targetModeId = 'strong';
+    const mainLightMode = String(res.data.mainLightMode || '1'); // 接口值转字符串，“强光”
+    const matchedMode = lightModes.value.find((mode) => mode.instructValue === mainLightMode);
+    if (matchedMode) {
+      targetModeId = matchedMode.id;
+    }
+    setActiveLightMode(targetModeId);
+    const laserStatus = Number(res.data.laserLightMode);
+    laserMode.value.active = laserStatus === 1;
+    laserMode.value.switchStatus = laserStatus === 1;
+  } catch (error) {
+    console.error('获取设备详情失败：', error);
+    setActiveLightMode('strong'); // 异常时默认强光
+  }
 };
 // 激光接口调用
 const handleLaserClick = async () => {
-    try {
-        const deviceId = route.params.deviceId as string;
-        if (!deviceId) return;
-        const targetStatus = !laserMode.value.active;
-        const res = await api.laserModeSettings({
-            deviceId,
-            deviceImei: deviceDetail.value.deviceImei,
-            typeName: deviceDetail.value.typeName,
-            instructValue: targetStatus ? 1 : 0
-        });
-        if (res.code === 200) {
-            ElMessage.closeAll();
-            proxy?.$modal.msgSuccess(res.msg);
-            laserMode.value.active = targetStatus;
-            laserMode.value.switchStatus = targetStatus;
-        } else {
-            proxy?.$modal.msgError(res.msg);
-            // 恢复之前的状态
-            laserMode.value.switchStatus = !targetStatus;
-        }
-    } catch (error: any) {
-       // proxy?.$modal.msgError(error.msg);
-        // 恢复之前的状态
-        laserMode.value.switchStatus = !laserMode.value.switchStatus;
-    } finally { }
-}
+  try {
+    const deviceId = route.params.deviceId as string;
+    if (!deviceId) return;
+    const targetStatus = !laserMode.value.active;
+    const res = await api.laserModeSettings({
+      deviceId,
+      deviceImei: deviceDetail.value.deviceImei,
+      typeName: deviceDetail.value.typeName,
+      instructValue: targetStatus ? 1 : 0
+    });
+    if (res.code === 200) {
+      ElMessage.closeAll();
+      proxy?.$modal.msgSuccess(res.msg);
+      laserMode.value.active = targetStatus;
+      laserMode.value.switchStatus = targetStatus;
+    } else {
+      proxy?.$modal.msgError(res.msg);
+      // 恢复之前的状态
+      laserMode.value.switchStatus = !targetStatus;
+    }
+  } catch (error: any) {
+    // proxy?.$modal.msgError(error.msg);
+    // 恢复之前的状态
+    laserMode.value.switchStatus = !laserMode.value.switchStatus;
+  } finally {
+  }
+};
 
 // 人员信息发送
 const registerPostInit = () => {
-    if (!deviceDetail.value.personnelInfo.unitName) {
-        ElMessage.closeAll();
-        proxy?.$modal.msgWarning('单位名称不能为空');
-        return
+  if (!deviceDetail.value.personnelInfo.unitName) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('单位名称不能为空');
+    return;
+  }
+  if (!deviceDetail.value.personnelInfo.name) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('姓名不能为空');
+    return;
+  }
+  if (!deviceDetail.value.personnelInfo.position) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('职位不能为空');
+    return;
+  }
+  if (!deviceDetail.value.personnelInfo.code) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('ID不能为空');
+    return;
+  }
+  let data = {
+    code: deviceDetail.value.personnelInfo.code,
+    name: deviceDetail.value.personnelInfo.name,
+    position: deviceDetail.value.personnelInfo.position,
+    unitName: deviceDetail.value.personnelInfo.unitName,
+    deviceId: route.params.deviceId,
+    deviceImei: deviceDetail.value.deviceImei
+  };
+  fullscreenLoading.value = true;
+  api.registerPersonInfo(data).then((res) => {
+    console.log(res, 'res');
+    if (res.code === 200) {
+      fullscreenLoading.value = false;
+      proxy?.$modal.msgSuccess(res.msg);
+    } else {
+      fullscreenLoading.value = false;
+      proxy?.$modal.msgError(res.msg);
     }
-    if (!deviceDetail.value.personnelInfo.name) {
-        ElMessage.closeAll();
-        proxy?.$modal.msgWarning('姓名不能为空');
-        return
-    }
-    if (!deviceDetail.value.personnelInfo.position) {
-        ElMessage.closeAll();
-        proxy?.$modal.msgWarning('职位不能为空');
-        return
-    }
-    if (!deviceDetail.value.personnelInfo.code) {
-        ElMessage.closeAll();
-        proxy?.$modal.msgWarning('ID不能为空');
-        return
-    }
-    let data = {
-        code: deviceDetail.value.personnelInfo.code,
-        name: deviceDetail.value.personnelInfo.name,
-        position: deviceDetail.value.personnelInfo.position,
-        unitName: deviceDetail.value.personnelInfo.unitName,
-        deviceId: route.params.deviceId,
-        deviceImei: deviceDetail.value.deviceImei
-    }
-    fullscreenLoading.value = true
-    api.registerPersonInfo(data).then((res) => {
-        console.log(res, 'res');
-        if (res.code === 200) {
-            fullscreenLoading.value = false
-            proxy?.$modal.msgSuccess(res.msg);
-        } else {
-            fullscreenLoading.value = false
-            proxy?.$modal.msgError(res.msg);
-        }
-    })
-}
+  });
+};
 // 灯光亮度
 const saveBtn = () => {
-    lightModesLoading.value = true
-    let data = {
-        deviceId: route.params.deviceId,
-        instructValue: deviceDetail.value.lightBrightness + '.00',
-        deviceImei: deviceDetail.value.deviceImei,
+  lightModesLoading.value = true;
+  let data = {
+    deviceId: route.params.deviceId,
+    instructValue: deviceDetail.value.lightBrightness + '.00',
+    deviceImei: deviceDetail.value.deviceImei
+  };
+  api.lightBrightnessSettings(data).then((res) => {
+    if (res.code === 200) {
+      lightModesLoading.value = false;
+      proxy?.$modal.msgSuccess(res.msg);
+    } else {
+      lightModesLoading.value = false;
+      //proxy?.$modal.msgError(res.msg);
     }
-    api.lightBrightnessSettings(data).then((res) => {
-        if (res.code === 200) {
-            lightModesLoading.value = false
-            proxy?.$modal.msgSuccess(res.msg);
-
-        } else {
-            lightModesLoading.value = false
-            //proxy?.$modal.msgError(res.msg);
-        }
-
-    })
-}
+  });
+};
 // 解除报警
 const showClose = async () => {
-    try {
-        await proxy?.$modal.confirm('确定要对该设备解除报警？', '提示');
-        // 2. 准备请求数据
-        const batchId = generateShortId();
-        let data = {
-            deviceIds: [route.params.deviceId],
-            typeName: deviceDetail.value.typeName,
-            deviceImeiList: [deviceDetail.value.deviceImei],
-            batchId: batchId,
-            instructValue: '0', //强制报警1，解除报警0
-        }
-        const registerRes = await api.sendAlarmMessage(data);
+  try {
+    await proxy?.$modal.confirm('确定要对该设备解除报警？', '提示');
+    // 2. 准备请求数据
+    const batchId = generateShortId();
+    let data = {
+      deviceIds: [route.params.deviceId],
+      typeName: deviceDetail.value.typeName,
+      deviceImeiList: [deviceDetail.value.deviceImei],
+      batchId: batchId,
+      instructValue: '0' //强制报警1，解除报警0
+    };
+    let mqsend = () => {
+      let msg = JSON.stringify({ 'instruct': [7, data.instructValue, 0, 0, 0, 0] });
+      publish('B/' + deviceDetail.value.deviceImei, msg, { qos: 0, retained: false });
+      deviceDetail.value.alarmStatus = parseInt(data.instructValue);
+      proxy?.$modal.msgSuccess('操作成功');
+    };
+    await api
+      .sendAlarmMessage(data)
+      .then(async (registerRes) => {
         if (registerRes.code !== 200) {
-            proxy?.$modal.msgWarning(registerRes.msg)
-            return
+          mqsend();
+          return;
         }
+
         // 4. 获取设备状态
-        let deviceImei = deviceDetail.value.deviceImei
-        const statusRes = await getDeviceStatus({
+        let deviceImei = deviceDetail.value.deviceImei;
+        const statusRes = await getDeviceStatus(
+          {
             functionMode: 2,
             batchId,
             typeName: 'FunctionAccessBatchStatusRule',
             deviceImei,
             interval: 500
-        },
-            api.deviceRealTimeStatus
+          },
+          api.deviceRealTimeStatus
         );
         // 只有当状态为'OK'时才显示成功弹窗
         if (statusRes.data.functionAccess === 'OK') {
-            proxy?.$modal.msgSuccess(statusRes.msg);
-            await getList();
+          proxy?.$modal.msgSuccess(statusRes.msg);
+          await getList();
         }
-
-    } catch (error: any) {
-    }
-
-
-}
-
-
-
-
+      })
+      .catch((ex) => {
+        mqsend();
+      });
+  } catch (error: any) {}
+};
 
 // 强制报警
 const forceAlarm = async () => {
-    try {
-        await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '提示');
-        forceAlarmLoading.value = true
-        // 2. 准备请求数据
-        const batchId = generateShortId();
-        let data = {
-            deviceIds: [route.params.deviceId],
-            typeName: deviceDetail.value.typeName,
-            deviceImeiList: [deviceDetail.value.deviceImei],
-            batchId: batchId,
-            instructValue: '1', //强制报警1，解除报警0
-        }
-        const registerRes = await api.sendAlarmMessage(data);
+  try {
+    let msg = deviceDetail.value.alarmStatus == 1 ? '确定要对该设备解除强制报警？' : '确定要对该设备开启强制报警？';
+    await proxy?.$modal.confirm(msg, '提示');
+    forceAlarmLoading.value = true;
+    // 2. 准备请求数据
+    const batchId = generateShortId();
+    let data = {
+      deviceIds: [route.params.deviceId],
+      typeName: deviceDetail.value.typeName,
+      deviceImeiList: [deviceDetail.value.deviceImei],
+      batchId: batchId,
+      instructValue: deviceDetail.value.alarmStatus == 1 ? '0' : '1' //强制报警1，解除报警0
+    };
+
+    let mqsend = () => {
+      let msg = JSON.stringify({ 'instruct': [7, data.instructValue, 0, 0, 0, 0] });
+      publish('B/' + deviceDetail.value.deviceImei, msg, { qos: 0, retained: false });
+      deviceDetail.value.alarmStatus = parseInt(data.instructValue);
+      proxy?.$modal.msgSuccess('操作成功');
+    };
+    api
+      .sendAlarmMessage(data)
+      .then(async (registerRes) => {
         if (registerRes.code !== 200) {
-            proxy?.$modal.msgWarning(registerRes.msg)
-            return
+          // proxy?.$modal.msgWarning(registerRes.msg)
+          mqsend();
+          return;
         }
         // 4. 获取设备状态
-        let deviceImei = deviceDetail.value.deviceImei
-        const statusRes = await getDeviceStatus({
+        let deviceImei = deviceDetail.value.deviceImei;
+        const statusRes = await getDeviceStatus(
+          {
             functionMode: 2,
             batchId,
             typeName: 'FunctionAccessBatchStatusRule',
             deviceImei,
             interval: 500
-        },
-            api.deviceRealTimeStatus
+          },
+          api.deviceRealTimeStatus
         );
         // 只有当状态为'OK'时才显示成功弹窗
         if (statusRes.data.functionAccess === 'OK') {
-            proxy?.$modal.msgSuccess(statusRes.msg);
-            await getList();
+          proxy?.$modal.msgSuccess(statusRes.msg);
+          await getList();
         }
-
-    } catch (error: any) {
-       // proxy?.$modal.msgWarning(error.msg)
-         forceAlarmLoading.value = false;
-
-    } finally {
-        forceAlarmLoading.value = false;
-    }
-}
+      })
+      .catch((ex) => {
+        mqsend();
+      });
+  } catch (error: any) {
+    // proxy?.$modal.msgWarning(error.msg)
+    forceAlarmLoading.value = false;
+  } finally {
+    forceAlarmLoading.value = false;
+  }
+};
 // 发送文本消息
 const sendTextMessage = async () => {
-    // 防重复提交
-    if (!deviceDetail.value.sendMsg) {
-        ElMessage.closeAll();
-        proxy?.$modal.msgWarning('发送信息不能为空');
-        return;
+  // 防重复提交
+  if (!deviceDetail.value.sendMsg) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('发送信息不能为空');
+    return;
+  }
+  try {
+    sendTextLoading.value = true;
+    // 2. 准备请求数据
+    const batchId = generateShortId();
+    const data = {
+      sendMsg: deviceDetail.value.sendMsg,
+      deviceIds: [route.params.deviceId],
+      typeName: deviceDetail.value.typeName,
+      batchId: batchId,
+      deviceImeiList: [deviceDetail.value.deviceImei]
+    };
+    // 3.人员信息
+    const registerRes = await api.deviceSendMessage(data);
+    if (registerRes.code !== 200) {
+      proxy?.$modal.msgWarning(registerRes.msg);
+      return;
     }
-    try {
-        sendTextLoading.value = true;
-        // 2. 准备请求数据
-        const batchId = generateShortId();
-        const data = {
-            sendMsg: deviceDetail.value.sendMsg,
-            deviceIds: [route.params.deviceId],
-            typeName: deviceDetail.value.typeName,
-            batchId: batchId,
-            deviceImeiList: [deviceDetail.value.deviceImei],
-        };
-        // 3.人员信息
-        const registerRes = await api.deviceSendMessage(data);
-        if (registerRes.code !== 200) {
-            proxy?.$modal.msgWarning(registerRes.msg)
-            return
-        }
-        // 4. 获取设备状态
-        let deviceImei = deviceDetail.value.deviceImei
-        const statusRes = await getDeviceStatus({
-            functionMode: 2,
-            batchId,
-            typeName: 'FunctionAccessBatchStatusRule',
-            deviceImei,
-            interval: 500
-        },
-            api.deviceRealTimeStatus
-        );
-        // 只有当状态为'OK'时才显示成功弹窗
-        if (statusRes.data.functionAccess === 'OK') {
-            proxy?.$modal.msgSuccess(statusRes.msg);
-        }
-    } catch (error: any) {
-        proxy?.$modal.msgWarning(error.msg)
-    } finally {
-        sendTextLoading.value = false;
+    // 4. 获取设备状态
+    let deviceImei = deviceDetail.value.deviceImei;
+    const statusRes = await getDeviceStatus(
+      {
+        functionMode: 2,
+        batchId,
+        typeName: 'FunctionAccessBatchStatusRule',
+        deviceImei,
+        interval: 500
+      },
+      api.deviceRealTimeStatus
+    );
+    // 只有当状态为'OK'时才显示成功弹窗
+    if (statusRes.data.functionAccess === 'OK') {
+      proxy?.$modal.msgSuccess(statusRes.msg);
     }
-}
+  } catch (error: any) {
+    proxy?.$modal.msgWarning(error.msg);
+  } finally {
+    sendTextLoading.value = false;
+  }
+};
 const lookMap = (row: any) => {
-    console.log(row, 'row');
-    router.push({
-        path: '/controlCenter/controlPanel', // 目标页面的正确路由路径（需与项目路由配置一致）
-        query: {
-            view: 'map',
-            deviceId: row.deviceId // 可选：传递当前设备ID，用于地图定位/筛选
-        }
-    });
-}
-const getMainLightModeLabel = (mode: any) => {
-    const modeMap = {
-        0: 'close',    // 0 → 关闭
-        1: 'strong',   // 1 → 强光
-        2: 'weak',     // 2 → 弱光
-        3: 'strobe',   // 3 → 爆闪
-        4: 'flood'     // 4 → 泛光
+  console.log(row, 'row');
+  router.push({
+    path: '/controlCenter/controlPanel', // 目标页面的正确路由路径（需与项目路由配置一致）
+    query: {
+      view: 'map',
+      deviceId: row.deviceId // 可选：传递当前设备ID，用于地图定位/筛选
     }
-    return modeMap[mode] || (console.log('未知的灯光模式:', mode), '未知');
-}
+  });
+};
+const getMainLightModeLabel = (mode: any) => {
+  const modeMap = {
+    0: 'close', // 0 → 关闭
+    1: 'strong', // 1 → 强光
+    2: 'weak', // 2 → 弱光
+    3: 'strobe', // 3 → 爆闪
+    4: 'flood' // 4 → 泛光
+  };
+  return modeMap[mode] || (console.log('未知的灯光模式:', mode), '未知');
+};
 // 处理设备消息
 const handleDeviceMessage = (msg: any) => {
-    try {
-        const payloadObj = JSON.parse(msg.payload.toString());
-        const deviceState = payloadObj.state; // 设备状态数组
-        if (!Array.isArray(deviceState)) {
-            return;
-        }
-        switch (deviceState[0]) {
-            case 1:
-                // 类型1灯光主键
-                const lightModeId = getMainLightModeLabel(deviceState[1]);
-                const brightness = deviceState[2]; // 亮度值
-                const batteryTime = deviceState[3]; // 续航时间
-                console.log('灯光模式消息:', { 模式ID: lightModeId, 亮度: brightness, 续航: batteryTime });
-                // 1. 同步灯光模式状态
-                if (lightModeId !== 'unknown') {
-                    lightModes.value.forEach(mode => {
-                        const isActive = mode.id === lightModeId;
-                        mode.active = isActive;
-                        mode.switchStatus = isActive;
-                    });
-                }
-                // 2.亮度
-                if (brightness !== undefined) {
-                    deviceDetail.value.lightBrightness = brightness.toString();
-                }
-                // 3.续航时间
-                if (batteryTime !== undefined) {
-                    deviceDetail.value.batteryRemainingTime = batteryTime.toString();
-                }
-                break;
-            case 12:
-                // 灯光主键
-                const lightModeIdA = getMainLightModeLabel(deviceState[1]);
-                if (lightModeIdA !== 'unknown') {
-                    lightModes.value.forEach(mode => {
-                        const isActive = mode.id === lightModeIdA;
-                        mode.active = isActive;
-                        mode.switchStatus = isActive;
-                    });
-                }
-                // 激光
-                const laserValue = deviceState[2];
-                // 同步激光模式状态：1=开启（true），0=关闭（false）
-                laserMode.value.active = laserValue === 1;
-                laserMode.value.switchStatus = laserValue === 1;
-                deviceDetail.value.batteryPercentage = deviceState[3]; //电量
-                deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
-                // getList(); // 重新获取设备详情
-                if (deviceDetail.value.batteryPercentage < 20 && Number(deviceDetail.value.chargeState) == 0) {
-                    centerDialogVisible.value = true
-                }
-                break;
-            case 7:
-                deviceDetail.value.alarmStatus = deviceState[1];
-
-                break;
-            default:
-                console.log('未处理的消息类型:', deviceState[0]);
-                break;
-        }
-    } catch (e) {
+  try {
+    const payloadObj = JSON.parse(msg.payload.toString());
+    if ('sta_BreakNews' in payloadObj) {
+      console.error('收到确认消息');
+      if (payloadObj.sta_BreakNews == 'I get it') {
+        proxy?.$modal.msgSuccess("用户已确认收到消息");
+      }
+      return;
     }
+    const deviceState = payloadObj.state; // 设备状态数组
+    if (!Array.isArray(deviceState)) {
+      return;
+    }
+    switch (deviceState[0]) {
+      case 1:
+        // 类型1灯光主键
+        const lightModeId = getMainLightModeLabel(deviceState[1]);
+        const brightness = deviceState[2]; // 亮度值
+        const batteryTime = deviceState[3]; // 续航时间
+        console.log('灯光模式消息:', { 模式ID: lightModeId, 亮度: brightness, 续航: batteryTime });
+        // 1. 同步灯光模式状态
+        if (lightModeId !== 'unknown') {
+          lightModes.value.forEach((mode) => {
+            const isActive = mode.id === lightModeId;
+            mode.active = isActive;
+            mode.switchStatus = isActive;
+          });
+        }
+        // 2.亮度
+        if (brightness !== undefined) {
+          deviceDetail.value.lightBrightness = brightness.toString();
+        }
+        // 3.续航时间
+        if (batteryTime !== undefined) {
+          deviceDetail.value.batteryRemainingTime = batteryTime.toString();
+        }
+        break;
+
+      case 12:
+        // 灯光主键
+        const lightModeIdA = getMainLightModeLabel(deviceState[1]);
+        if (lightModeIdA !== 'unknown') {
+          lightModes.value.forEach((mode) => {
+            const isActive = mode.id === lightModeIdA;
+            mode.active = isActive;
+            mode.switchStatus = isActive;
+          });
+        }
+        // 激光
+        const laserValue = deviceState[2];
+        // 同步激光模式状态：1=开启（true），0=关闭（false）
+        laserMode.value.active = laserValue === 1;
+        laserMode.value.switchStatus = laserValue === 1;
+        deviceDetail.value.batteryPercentage = deviceState[3]; //电量
+        deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
+        // getList(); // 重新获取设备详情
+        if (deviceDetail.value.batteryPercentage < 20 && Number(deviceDetail.value.chargeState) == 0) {
+          centerDialogVisible.value = true;
+        }
+        break;
+      case 7:
+        deviceDetail.value.alarmStatus = deviceState[1];
+
+        break;
+      default:
+        console.log('未处理的消息类型:', deviceState[0]);
+        break;
+    }
+  } catch (e) {}
 };
 onMounted(async () => {
-    await getList();
-    // 连接mqtt
-    onConnect(async () => {
-        const deviceImei = deviceDetail.value.deviceImei;
-        if (!deviceImei) {
-            return;
-        }
-        try {
-            await subscribe(`A/${deviceImei}`, { qos: 1 });
-            console.log('订阅成功');
-        } catch (err) {
-            console.error('订阅失败（onConnect内）:', err);
-        }
+  await getList();
+  // 连接mqtt
+  onConnect(async () => {
+    const deviceImei = deviceDetail.value.deviceImei;
+    if (!deviceImei) {
+      return;
+    }
+    try {
+      await subscribe(`A/${deviceImei}`, { qos: 1 });
+      console.log('订阅成功');
+    } catch (err) {
+      console.error('订阅失败（onConnect内）:', err);
+    }
+  });
+  // 2. 注册消息接收回调（核心：处理设备发送的消息）
+  onMessage((msg) => {
+    console.log('收到新消息:', {
+      主题: msg.topic,
+      内容: msg.payload,
+      时间: msg.time,
+      QoS: msg.qos
     });
-    // 2. 注册消息接收回调（核心：处理设备发送的消息）
-    onMessage((msg) => {
-        console.log('收到新消息:', {
-            主题: msg.topic,
-            内容: msg.payload,
-            时间: msg.time,
-            QoS: msg.qos
-        });
-        // 在这里处理消息（根据实际业务逻辑）
-        handleDeviceMessage(msg);
-    });
-    onError((err) => {
-        console.error('MQTT连接失败原因:', err.message);
-    });
-    connect();
+    // 在这里处理消息（根据实际业务逻辑）
+    handleDeviceMessage(msg);
+  });
+  onError((err) => {
+    console.error('MQTT连接失败原因:', err.message);
+  });
+  connect();
 });
 onUnmounted(() => {
-    // 只有当连接已建立时，才执行断开操作（避免无效调用）
-    if (connected.value) {
-        console.log('页面离开，断开MQTT连接');
-        disconnect(); // 调用断开连接方法
-    }
+  // 只有当连接已建立时，才执行断开操作（避免无效调用）
+  if (connected.value) {
+    console.log('页面离开，断开MQTT连接');
+    disconnect(); // 调用断开连接方法
+  }
 });
-
 </script>
 <style lang="scss" scoped>
 .p-2 {
-    background: rgba(247, 248, 252, 1);
-    min-height: 100vh;
-    box-sizing: border-box;
-    padding: 15px;
+  background: rgba(247, 248, 252, 1);
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 15px;
 }
 
 .device-page {
-    .header-bar {
-        border-radius: 8px;
-        background: linear-gradient(135deg, #3400e7, #009bff);
-        color: white;
-        padding: 20px;
-        margin-bottom: 20px;
+  .header-bar {
+    border-radius: 8px;
+    background: linear-gradient(135deg, #3400e7, #009bff);
+    color: white;
+    padding: 20px;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+
+    .device-status {
+      .online {
+        color: #00ff00;
+      }
+
+      .offline {
+        color: rgb(224, 52, 52);
+      }
+    }
+  }
+
+  .content-wrapper {
+    .content-row {
+      margin-bottom: 10px;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+      background: white;
+      padding: 0px 20px 50px;
+      border: 1px solid #ebeef5;
+      height: 289px;
+      position: relative;
+    }
+
+    .content-card_gps {
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+      background: white;
+      padding: 0px 20px 50px;
+      border: 1px solid #ebeef5;
+      height: 78%;
+    }
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 20px;
+      color: #303133;
+    }
+
+    .light-mode {
+      display: flex;
+
+      justify-content: space-between;
+    }
+
+    .lacatin_gps {
+      height: 70px;
+      border-radius: 4px;
+      background: rgba(247, 248, 252, 1);
+      display: inline-block;
+      width: 400px;
+      padding: 10px;
+    }
+
+    .mode-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 15px;
+      border: 1px solid #dcdfe6;
+      border-radius: 8px;
+      width: 125px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &.active {
+        border-color: #409eff;
+        background-color: rgba(64, 158, 255, 0.05);
+      }
+
+      .mode-icon {
+        width: 48px;
+        margin-bottom: 10px;
+        transition: all 0.3s ease;
+        object-fit: scale-down;
+        height: 50px;
+      }
+
+      .mode-name {
+        font-size: 14px;
+        margin-bottom: 12px;
+        color: #606266;
+      }
+
+      .el-switch {
+        --el-switch-on-color: #409eff;
+        --el-switch-off-color: #dcdfe6;
+      }
+    }
+
+    .brightness-alarm {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .brightness-control {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        font-weight: 600;
+        gap: 10px;
+        border-radius: 39px;
+        box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
+        background: rgba(255, 255, 255, 1);
+        width: 70%;
+        height: 54px;
+        padding: 10px 20px;
 
-        .device-status {
-            .online {
-                color: #00ff00;
-            }
-
-            .offline {
-                color: rgb(224, 52, 52);
-            }
+        .brightness-label {
+          font-size: 14px;
+          color: #606266;
+          min-width: 70px;
         }
+
+        .brightness-value {
+          font-size: 14px;
+          color: #409eff;
+          font-weight: 500;
+        }
+
+        .save-btn {
+          padding: 6px 20px;
+          border-radius: 29px;
+          background: rgba(2, 124, 251, 1);
+          border: none;
+        }
+
+        .inputTFT {
+          width: 130px;
+          height: 40px;
+        }
+      }
+
+      .alarm-btn {
+        background-color: rgba(224, 52, 52, 1);
+        border-color: rgba(224, 52, 52, 1);
+        padding: 8px 20px;
+        border-radius: 27px;
+      }
     }
 
-    .content-wrapper {
-        .content-row {
-            margin-bottom: 10px;
+    .location-info {
+      .location-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        font-size: 14px;
+        color: #606266;
+
+        .location-icon {
+          margin-right: 8px;
+          font-weight: bold;
+          color: #409eff;
         }
 
-        .content-card {
-            border-radius: 8px;
-            box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
-            background: white;
-            padding: 0px 20px 50px;
-            border: 1px solid #ebeef5;
-            height: 289px;
-            position: relative;
-        }
-
-        .content-card_gps {
-            border-radius: 8px;
-            box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
-            background: white;
-            padding: 0px 20px 50px;
-            border: 1px solid #ebeef5;
-            height: 78%;
-
-        }
-
-        .section-title {
-            font-size: 16px;
-            font-weight: 600;
-            margin-bottom: 20px;
-            color: #303133;
-        }
-
-        .light-mode {
-            display: flex;
-
-            justify-content: space-between;
-        }
-
-        .lacatin_gps {
-            height: 70px;
-            border-radius: 4px;
-            background: rgba(247, 248, 252, 1);
-            display: inline-block;
-            width: 400px;
-            padding: 10px;
-        }
-
-        .mode-card {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 15px;
-            border: 1px solid #dcdfe6;
-            border-radius: 8px;
-            width: 125px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-
-            &.active {
-                border-color: #409eff;
-                background-color: rgba(64, 158, 255, 0.05);
-            }
-
-            .mode-icon {
-                width: 48px;
-                margin-bottom: 10px;
-                transition: all 0.3s ease;
-                object-fit: scale-down;
-                height: 50px;
-            }
-
-            .mode-name {
-                font-size: 14px;
-                margin-bottom: 12px;
-                color: #606266;
-            }
-
-            .el-switch {
-                --el-switch-on-color: #409eff;
-                --el-switch-off-color: #dcdfe6;
-            }
-
-
-        }
-
-        .brightness-alarm {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 10px;
-
-            .brightness-control {
-                display: flex;
-                align-items: center;
-                gap: 10px;
-                border-radius: 39px;
-                box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
-                background: rgba(255, 255, 255, 1);
-                width: 70%;
-                height: 54px;
-                padding: 10px 20px;
-
-                .brightness-label {
-                    font-size: 14px;
-                    color: #606266;
-                    min-width: 70px;
-                }
-
-                .brightness-value {
-                    font-size: 14px;
-                    color: #409eff;
-                    font-weight: 500;
-                }
-
-                .save-btn {
-                    padding: 6px 20px;
-                    border-radius: 29px;
-                    background: rgba(2, 124, 251, 1);
-                    border: none
-                }
-
-                .inputTFT {
-                    width: 130px;
-                    height: 40px;
-                }
-            }
-
-            .alarm-btn {
-                background-color: rgba(224, 52, 52, 1);
-                border-color: rgba(224, 52, 52, 1);
-                padding: 8px 20px;
-                border-radius: 27px;
-            }
-        }
-
-        .location-info {
-            .location-item {
-                display: flex;
-                align-items: center;
-                margin-bottom: 15px;
-                font-size: 14px;
-                color: #606266;
-
-                .location-icon {
-                    margin-right: 8px;
-                    font-weight: bold;
-                    color: #409eff;
-                }
-
-                .view-btn {
-                    margin: 0 8px;
-                    padding: 0;
-                    font-size: 13px;
-                }
-            }
-        }
-
-        .form-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-            margin-bottom: 15px;
-            text-align: right;
-
-            .form-item {
-                display: flex;
-                align-items: center;
-
-                .form-label {
-                    min-width: 35px;
-                    font-size: 14px;
-                    color: #606266;
-                    margin-right: 10px;
-                }
-
-                .el-input {
-                    flex: 1;
-                }
-            }
-
-            .register-btn {
-                grid-column: 1 / 3;
-                justify-self: start;
-                padding: 6px 20px;
-                position: absolute;
-                right: 19px;
-                bottom: 30px;
-                border-radius: 29px;
-                background: rgba(2, 124, 251, 1);
-                border: none
-            }
-        }
-
-        .message-content {
-            // display: flex;
-            // flex-direction: column;
-            // gap: 10px;
-
-            .el-textarea {
-                border: 1px solid rgba(29, 111, 255, 1);
-                border-radius: 4px;
-                background: rgba(247, 248, 252, 1);
-                border-radius: 6px;
-                padding: 10px;
-            }
-
-            .el-textarea__inner {
-                background: rgba(247, 248, 252, 1);
-            }
-
-            .send-btn {
-                align-self: flex-end;
-                padding: 10px 20px;
-                border-radius: 29px;
-                background: rgba(2, 124, 251, 1);
-                border: none;
-                margin: 20px 0px 30px 0;
-
-            }
-        }
-
-        .upload-area {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100px;
-            border: 1px dashed #dcdfe6;
-            border-radius: 6px;
-            cursor: pointer;
-        }
-
-        .video-input {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-
-            .el-input {
-                flex: 1;
-            }
-
-            .save-video-btn {
-                padding: 6px 12px;
-            }
+        .view-btn {
+          margin: 0 8px;
+          padding: 0;
+          font-size: 13px;
         }
+      }
     }
 
-    // 响应式调整
-    @media (max-width: 768px) {
-        .header-bar {
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 16px;
+    .form-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 15px;
+      margin-bottom: 15px;
+      text-align: right;
+
+      .form-item {
+        display: flex;
+        align-items: center;
+
+        .form-label {
+          min-width: 35px;
+          font-size: 14px;
+          color: #606266;
+          margin-right: 10px;
         }
 
-        .form-grid {
-            grid-template-columns: 1fr;
+        .el-input {
+          flex: 1;
         }
+      }
 
-        .form-grid .register-btn {
-            grid-column: 1;
-        }
-
-        .light-mode .mode-group {
-            gap: 10px;
-        }
-
-        .light-mode .mode-item {
-            width: 60px;
-        }
-
-        .light-mode .mode-icon {
-            width: 30px;
-            height: 30px;
-        }
+      .register-btn {
+        grid-column: 1 / 3;
+        justify-self: start;
+        padding: 6px 20px;
+        position: absolute;
+        right: 19px;
+        bottom: 30px;
+        border-radius: 29px;
+        background: rgba(2, 124, 251, 1);
+        border: none;
+      }
     }
+
+    .message-content {
+      // display: flex;
+      // flex-direction: column;
+      // gap: 10px;
+
+      .el-textarea {
+        border: 1px solid rgba(29, 111, 255, 1);
+        border-radius: 4px;
+        background: rgba(247, 248, 252, 1);
+        border-radius: 6px;
+        padding: 10px;
+      }
+
+      .el-textarea__inner {
+        background: rgba(247, 248, 252, 1);
+      }
+
+      .send-btn {
+        align-self: flex-end;
+        padding: 10px 20px;
+        border-radius: 29px;
+        background: rgba(2, 124, 251, 1);
+        border: none;
+        margin: 20px 0px 30px 0;
+      }
+    }
+
+    .upload-area {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100px;
+      border: 1px dashed #dcdfe6;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .video-input {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+
+      .el-input {
+        flex: 1;
+      }
+
+      .save-video-btn {
+        padding: 6px 12px;
+      }
+    }
+  }
+
+  // 响应式调整
+  @media (max-width: 768px) {
+    .header-bar {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 16px;
+    }
+
+    .form-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .form-grid .register-btn {
+      grid-column: 1;
+    }
+
+    .light-mode .mode-group {
+      gap: 10px;
+    }
+
+    .light-mode .mode-item {
+      width: 60px;
+    }
+
+    .light-mode .mode-icon {
+      width: 30px;
+      height: 30px;
+    }
+  }
 }
 
 .path-img {
-    width: 52px;
-    height: 28px;
+  width: 52px;
+  height: 28px;
 }
 
 .staticRwo {
-    border-radius: 8px;
-    box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
-    background: white;
-    border: 1px solid #ebeef5;
-    height: auto;
-    line-height: 36px;
-    box-sizing: border-box;
-    text-indent: 15px;
-    color: #ff0000;
-    font-weight: bold;
-    font-size: 17px;
-    margin-bottom: 5px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+  background: white;
+  border: 1px solid #ebeef5;
+  height: auto;
+  line-height: 36px;
+  box-sizing: border-box;
+  text-indent: 15px;
+  color: #ff0000;
+  font-weight: bold;
+  font-size: 17px;
+  margin-bottom: 5px;
 }
 
 .displayNone {
-    display: none !important;
+  display: none !important;
 }
 </style>
diff --git a/src/views/equipmentManagement/devices/index.vue b/src/views/equipmentManagement/devices/index.vue
index 4463138..1a998eb 100644
--- a/src/views/equipmentManagement/devices/index.vue
+++ b/src/views/equipmentManagement/devices/index.vue
@@ -481,7 +481,11 @@ const { queryParams, form, rules } = toRefs<PageData<deviceForm, deviceQuery>>(d
 /** 查询设备列表 */
 const getList = async () => {
   loading.value = true;
-  const res = await api.deviceList(proxy?.addDateRange(queryParams.value, dateRange.value));
+  let paras=Object.assign({},queryParams.value);
+
+  paras.deviceMac=paras.deviceMac.replace(/:/g,'').replace(/：/g,'').replace(/(.{2})/g, '$1:').slice(0, -1);
+
+  const res = await api.deviceList(proxy?.addDateRange(paras, dateRange.value));
   loading.value = false;
   deviceDist.value = res.rows;
   total.value = res.total;
@@ -501,6 +505,7 @@ const resetQuery = () => {
 
 /** 删除按钮操作 */
 const handleDelete = async (row?: deviceVO) => {
+  debugger;
   // 批量删除逻辑
   let arrey = ids.value.map((item) => item.id);
   if (!row) {