From 8d92482de3416059df7cd71d6b257d596dd21fa1 Mon Sep 17 00:00:00 2001
From: fengerli <528575642@qq.com>
Date: Sat, 23 Aug 2025 17:36:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A7=E5=88=B6=E4=B8=AD=E5=BF=83=EF=BC=8C?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E6=8E=A7=E5=88=B6=E9=A1=B5=E9=9D=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 index.html                                    |   2 +-
 src/api/controlCenter/controlPanel/index.ts   |  24 +
 src/api/controlCenter/controlPanel/types.ts   |  19 +
 src/api/userApp/index.ts                      |   2 +-
 src/assets/images/flood-light.png             | Bin 0 -> 1219 bytes
 src/assets/images/flood-light_HL.png          | Bin 0 -> 304 bytes
 src/assets/images/laser-light.png             | Bin 0 -> 1591 bytes
 src/assets/images/laser-light_HL.png          | Bin 0 -> 289 bytes
 src/assets/images/strobe-light.png            | Bin 0 -> 1164 bytes
 src/assets/images/strobe-light_HL.png         | Bin 0 -> 239 bytes
 src/assets/images/strong-light.png            | Bin 0 -> 294 bytes
 src/assets/images/strong-light_HL.png         | Bin 0 -> 1497 bytes
 src/assets/images/weak-light.png              | Bin 0 -> 1233 bytes
 src/assets/images/weak-light_HL.png           | Bin 0 -> 235 bytes
 src/assets/styles/index.scss                  |   6 +
 src/views/controlCenter/6170/index.vue        | 490 ++++++++++++++++++
 .../controlPanel/components/map.vue           | 218 ++++++++
 .../controlCenter/controlPanel/index.vue      | 297 +++++++++++
 19 files changed, 1057 insertions(+), 3 deletions(-)
 create mode 100644 src/api/controlCenter/controlPanel/index.ts
 create mode 100644 src/api/controlCenter/controlPanel/types.ts
 create mode 100644 src/assets/images/flood-light.png
 create mode 100644 src/assets/images/flood-light_HL.png
 create mode 100644 src/assets/images/laser-light.png
 create mode 100644 src/assets/images/laser-light_HL.png
 create mode 100644 src/assets/images/strobe-light.png
 create mode 100644 src/assets/images/strobe-light_HL.png
 create mode 100644 src/assets/images/strong-light.png
 create mode 100644 src/assets/images/strong-light_HL.png
 create mode 100644 src/assets/images/weak-light.png
 create mode 100644 src/assets/images/weak-light_HL.png
 create mode 100644 src/views/controlCenter/6170/index.vue
 create mode 100644 src/views/controlCenter/controlPanel/components/map.vue
 create mode 100644 src/views/controlCenter/controlPanel/index.vue

diff --git a/.env.development b/.env.development
index ccc0503..f3bdb65 100644
--- a/.env.development
+++ b/.env.development
@@ -5,7 +5,7 @@ VITE_APP_TITLE = 云平台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.2.23:8000'
+VITE_APP_BASE_API = 'http://192.168.2.34:8000'
 
 # 应用访问路径 例如使用前缀 /admin/
 VITE_APP_CONTEXT_PATH = '/'
diff --git a/index.html b/index.html
index 1b06228..e2c5d74 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
     <link rel="icon" href="/favicon.ico" />
-    <title>星汉研创科技</title>
+    <title>物联网管理平台</title>
     <!--[if lt IE 11
       ]><script>
         window.location.href = '/html/ie.html';
diff --git a/src/api/controlCenter/controlPanel/index.ts b/src/api/controlCenter/controlPanel/index.ts
new file mode 100644
index 0000000..5ffda76
--- /dev/null
+++ b/src/api/controlCenter/controlPanel/index.ts
@@ -0,0 +1,24 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { deviceQuery, deviceVO } from './types';
+// 设备分组
+export const devicegroupList = (params) => {
+    return request({
+        url: '/api/device/group/list',
+        method: 'get',
+        params: params
+    });
+};
+// 设备列表
+export const deviceControlCenterList = (params) => {
+    return request({
+        url: '/api/device/controlCenter/list',
+        method: 'get',
+        params: params
+    });
+};
+
+export default {
+devicegroupList,
+deviceControlCenterList
+};
\ No newline at end of file
diff --git a/src/api/controlCenter/controlPanel/types.ts b/src/api/controlCenter/controlPanel/types.ts
new file mode 100644
index 0000000..6754f7d
--- /dev/null
+++ b/src/api/controlCenter/controlPanel/types.ts
@@ -0,0 +1,19 @@
+export interface deviceQuery {
+  groupId: string;
+  pageNum: number;
+  deviceId: string;
+  deviceName: string;
+  deviceStatus: string;
+  deviceMac:string;
+  deviceImei:string;
+  currentOwnerId:string;
+  communicationMode:string;
+  queryParams:string;
+  pageSize:Number;
+
+}
+export interface deviceVO {
+  user: UserVO;
+  roles: string[];
+  permissions: string[];
+}
diff --git a/src/api/userApp/index.ts b/src/api/userApp/index.ts
index 52bd879..bfaed94 100644
--- a/src/api/userApp/index.ts
+++ b/src/api/userApp/index.ts
@@ -6,7 +6,7 @@ import { AxiosPromise } from 'axios';
  */
 export const userList = (params: any): AxiosPromise => {
   return request({
-    url: '/app/user/list',
+    url: '/WebApp/user/list',
     method: 'get',
     params
   });
diff --git a/src/assets/images/flood-light.png b/src/assets/images/flood-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..427ef02687084ea3859311833104f691aa91afd0
GIT binary patch
literal 1219
zcmeAS@N?(olHy`uVBq!ia0vp^vOuiE!3HE}Zr#kzz`)Yw>Eakt!T9z8;{+AYNh+Q~
z-K%Eqc6V_}OG^t21%h%A_<n{Kpaf)ecsR(Gv@|z2mzLeLXL6nQNeeG8Eid;!53<r{
z(T@A<yB<fIewzQ3`R>QHQj9DImj6sk+QZi1S}r|*)#g9$Ki_m8&z#NAeBiF!{PpVH
z=gTe}oBpuz)ZG6E((O}@*0-FOi0eylPW{gEak1W?yFV`3OxVp`vv1zH{nyjw?>W3)
z_x$F95`Phf`CIq2>ZDgJSXj*!zsUPfbnV*oIkNF{*o(FwfByO;(}T^ii8X~%t-o)&
z*Zh0)5h(xblj4dwPa3_xyVymuKdPJmHap|-S(|{DdCxbO%Kwj=|0Ma#<HMB;UYz@6
zxr^7q=ECyz^37Wg{^jD`wg35M(~s*vzI=ULA-7<^Q}es`KXZH;9yQvXJpST%`)7xX
zKrP+3D*|h`tzXz{{@EdSN3;H&UE&N5HrxHbJ71`n#9rm}{raC7Qu<xzBlfebcwYBS
zaK3%DO*n(XyxZyawSK!l9<5k#{_Q`ZlY2Dms{cmJ61$VXxteSK8t)j!hKf47)c-uC
zW!wy@yQZJNx1(A7>hd@97oN*wTu@T}`R1<fbY_P=2KKKGS+DxI{wtpz(4O<$3?Jj6
z*kS%#_e;le{~52@t^RT8Ep~zLzmFW2o>6-J^ZcbHziYP5V^MhbUGnhhkMncy+IH$+
z-M8a@I*<PG`fa7(RrZDa1_qSj9-03)uic&eBj|1S@7iM@ivFZWm-|2R-l|W!#@~DX
z=`$SpYxnU3TiV^Pf6^oS%ReujUC!9S{>vrbSX%yM{g$s4=JC5K#TgnZ^5(zDO?#~T
zvwxG^`)A(f?;mk79QpjY^In>n-K6^UP<7|o8Y&#^F5W(K%>7f-n&Z1~-ng--_qL7w
z>yLT+N<Qn&6J~hS`V(SyaWurXj}RlCZ-W|J$*Ay8739tHxwiMtPS3k{RK05U%^x1~
zZttoVieFVbPn_XV{3lQt-MRMoZq3VQu{Ddf&+P4gvU4psOrKNHfVJQ_IifCi@4%Yf
z^PX>eH}A;wtohGb8-7f$0R??Fx|RQ<Ucd9KS^2Fpj-jLeBq-|kUqg5H`mLlI^Lyf!
y!rAq`=U@MCdd|=AQ6CzD-C588`pka7o~e{8z?DnwRUxo&V(@hJb6Mw<&;$SgtELVB

literal 0
HcmV?d00001

diff --git a/src/assets/images/flood-light_HL.png b/src/assets/images/flood-light_HL.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ea824b53da831224f5b61f0c932fcb8e3265e68
GIT binary patch
literal 304
zcmeAS@N?(olHy`uVBq!ia0vp^vOuiE!VDy{XRk8>QjEnx?oNz1PwLbIIh+L^k;M!Q
z+`=Ht$S`Y;1W-^Sz$e5NNHe7UXQ=(f&~Tq&)qjRb{~1F6GyMO5)_r*wP>Q1@$S;_I
z^*;wQJ2PX|Zg*3l*j!H+$B>FSdnX>`J!HV+x_|Ydoysn9je-)5CwDfvJQXZ*TXCrD
zj*3<Rb4|gQC-U{j6@4U4m-#qHrMMpR;n`&x_d;U^bNiAUO}#niR=uCG@XgLstpTjj
zWr{Z~;|}}w@K=_<teiVx?RukQ?ceX;58Tlo9=2cV+4&!54FBK%ao6VWo{jUv^nPcg
u*6VNIw3$<7YW|1X58o}{)SvwKI=YUjE-@&#WO*$o$YY+aelF{r5}E)%z;zY?

literal 0
HcmV?d00001

diff --git a/src/assets/images/laser-light.png b/src/assets/images/laser-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..f61207368fd133d8b2ea0fd46f8cd7a0be48e02b
GIT binary patch
literal 1591
zcmcIlk55xq6uuo1HlU&<vzsVvu?aepmBp-N5lXgomQDkUL0Pg%aV8}jwA~caf`x*a
z8w42}TY`k8C1eCO7Fd{Tp_MYJHQQ+3AQ6J4REuk;4W-Xg`)W(O`}*#y{sG%f-h0W(
zJ?A?=zVEz_56Xnh^quJd0H&x^a1?&`lF#$0@O>d>kOHtJCK9||p=7MxWqivK^>9S2
z&MSRJp+F#!NRA(aM?s#@?Ei7<$<URRB#K0G=#bz`V}D;dc0^LCXizB1F%t5~AfbOE
zkk8EVa&kTbzkJc3_L_q)6sCc(pRwN0wCZAu*_z+f&m2h`=(0y^b+?S+d7Du=_i9yz
zc1<{Mm1?x}Yk??q^wbou*m`9vH_e$iH!P4J$jSTt%zhYb*#-l#-PzZfLi_Bbw^8QB
zWmENm*Q*LF8G(+k3k$p>o|YlIr`;Gnx)zY*$kev5>QFs!pD0qdv+s{@mfkVgHjybR
zBrG#I7aJDOn1jkf@nj<#%fO>5*F7eTKjEA_%MxE{j_qk4)c19D-zQ^_2RWK-*F-aQ
zg|U}TE1s$SN6Is3c(RnS+;#Wi!gbfuwyX_0E3Z$ay8JkdZFH<ic>JD-&X|u6-SMPb
zQkt#))5~&4aR>J{KmH<r&OU1uo;G9N___VtLJ=yvWJvRTe(uWjRby@|?A1~etJUDF
z$>iSJ<d4QPVh2^f=81Cjj1Lv%uEW>3fRFoAC5|AtO0}9;_b0$vly46pF5LUu;PeF5
zzp00@m#VfRJCW%43)4-eey+pRsqQS_;DsV&LxW2#9O-guwWC;sT7<ALG}_@Vd(mIC
zpAPzs<KL0+H|ea&veY^V_6=KtO5Uk`!?X(w+1V5e-q&L_UQx6b0W_XW8WP3rb4-zG
z1K4-1E*~GoU!M6BAEYYAIv*yc%Y21@O8FL`98H&~mOlCqFA=5~mslj~N_yb5+p))c
zK3(Ne)QG*ww|D>4Wj7TdYSM-uWMVWO<V?{zBha`h_KyZ(6%0t59a^O_W!%>U798Ib
zu;Zgan!>P{?TP?ojCeKsx~)#d0T2LxcAl*GamYYl2;OnJva{sX3n#LsC(pt$Q+fJH
zB<F(zU-hoGXcyz>Y5SN@V}Y`YZ%txTYI*K10z#D?RFOno4?Hmg$V)0F&Ge_VL@H`k
z4v<5pX>Ps&mA^!k`a&>?&$qbRXqq>KI8zmoXboH(q{?Yoe%z*%(di^BFPTZK56Cf^
z(Mp~r5J+&+-GT(xofH__FJ(~kR5vg>`ZJ=ZR0K7DgXY@+svy3D*7MWVkmnLVLIatA
z`|IQ>Ez~S`mQJfkPnBb;ZfD=77_adR*GGy<q|5H`K8ms2ccZmvd4w0?h6HG<F<s7w
yiNyx$>gwjK(%eh+5wL6b?rAHZTtPuX7{9#o$sgyh{Rn>uK=fXjVC0?ZbN>R;dx`r1

literal 0
HcmV?d00001

diff --git a/src/assets/images/laser-light_HL.png b/src/assets/images/laser-light_HL.png
new file mode 100644
index 0000000000000000000000000000000000000000..8587ec297b2f81741ba6b2fb7f7e3842f8f46352
GIT binary patch
literal 289
zcmeAS@N?(olHy`uVBq!ia0vp^8X(Nb3?#Q1Xz2kd#^NA%C&rs6b?Si}&H|6fVg?3o
zVGw3ym^DWND99Gz6XFV_8ESte&0AUqWH6Nk`2{olkDjQs706rW>EaktF~_&xkgq8~
zz$N{UTEI_B2F9N03lt`vE3ROE`(lch_j+gbPS)uPKc%WS1_`qqT)Lq0Y+Cv~fmP>{
z51IS7N6gzFyeQTCQ|j;RRYn_(q9WILy?Q&3|5x|}-}h`PJ$epDHZa(z9iKN_*dY07
zOY6HEJ|?~wma)&OR6Y}K(p`1t<J7S4TfKkBe_z*b;`#0+U+*P7wItQHB<*LLk|LI@
d?mzqgl6=cC-{lXzmtF_?#M9N!Wt~$(69CK~Y-0cb

literal 0
HcmV?d00001

diff --git a/src/assets/images/strobe-light.png b/src/assets/images/strobe-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ddf1eb75441d16856fdc485c7796fe4343179d9
GIT binary patch
literal 1164
zcmcIk|8Ej!9DZ-OvQ!&4`$JU>ERm!?n2nhxbT$feK`F-Bt#cB$RGW~YOA57017)-@
zv$%F$W$G4ZSjtjtHk($GwShX&y0oh?8#y6azd)e{V!wo-T(Fc1a(>?9{J}rKH@SN+
zcc0JmJn!>)a$O%Ek(ZTjFGUEIDQac)u<ydx8zpd$HniMDXv3!p+5V#jBDp~PC{$b)
zDz<bFT=U3fGPPQL>@!$;yw?7E6-$Sql}gN_Rv$bl`_^N-R!SaLEA_2<eI1D@5BFus
zRM&UaseYTD5^xb^j}AYpy*O$U{V$<+qc`bo5|v@kRQO7^KA9G9@b{_<S5^BWzN^~E
zKjuwn!aP#<L_ADg`bldir><nJge7au0OEUzo4@OFCRgtSTea8w&2jxcWS^#AXOR7p
zko9^`2n~8Fss7;7{ANT6k^mm>NIX)QZe-TiI3MKYxgVkrN9T=Rn<(t<HcNr;dXaC=
zSwtTbpqMmJ$&cI}^z`O_E~;Q!pH7VPercUPHx@{yXN_Cv4%A84+LQ9Yq=vtoemb^*
zDVtYkJA`sM*R-<OF!vbK-x^{BaTm&O`%0#n&KlHdwvt;<TwFC&pZu$>!fr5dh94Pw
zzgWrasi{GYQw`+Os`>9RK8nr9p{>az6b-Pov=N$}WM=1Aak1$8)-~asqq%&7c)Ktp
z@rTZg_&~L}=S3|LRV<d@E<^HAQ&SW1U{X_XfUyn-r}s;h9cDsqL{wK~@lS_FEOw#O
zaWNe}<R<-oLWy{}So!8=)TmN*i?wO#M=KfP{g{@@oBG_*(>zO0&pW|UpV<{ia?a><
zP>sOjTdyI?34j+I8U%nC@ALl9((*DAX9zrU5zOH0c9%fGbGLmmc+ayQ@OiS+%*)Bt
zS??bbC%v(tft>JJPY${3pmaa89k=S!I9E=tCF{o1n3<W0b$Zt8lbqDH@qekgsdyOs
zj!dy=8NyHb1j5EpsggUo^t=3J$Rdd5w4b0W_CA0agKSXU<_G(BvZ{U~6ZCmD7{!RK
z?FvimLzUEHptU~fim1hs%P$8*)?CFC+<(T>=W_t(XovI6HM7BHLKQrfyEM|mv#>KO
zRxwr(S#Lq~Qq;K%I8f3O$YQY4Xq(N}!dOlv6#07yhqy?{rkLIeLEL2D?cI@}wD_C_
z6`Z=t<PzL}3k(Y`F)-u6zN4l3<Ul+7xz7#8r3GAzd4uRzzEo)q#^Eo66bFvTZhqK!
F{yEPHd!+yX

literal 0
HcmV?d00001

diff --git a/src/assets/images/strobe-light_HL.png b/src/assets/images/strobe-light_HL.png
new file mode 100644
index 0000000000000000000000000000000000000000..6af8f7d9abd7df00bead793e9a28c8625631d6b9
GIT binary patch
literal 239
zcmeAS@N?(olHy`uVBq!ia0vp^+91rx3?y$)e%uVC7>k44ofvPP)Tsw@I14-?iy0WW
zg+Z8+Vb&Z8pded-Plzj!W~lv@G;e7ckik?E<QL5FKYF6lRv@p$)5S5QVoq{OLc-6(
z2M(M#aNrv^_tEd1+(-Wla;yFqP(P{@Jd<&W#CJ)qh86Yljv|Na4UYbKuFlS^{MeqY
zt)HpqzhuJ$#h#@9j3GykoKX1Bu!MVA<HP^XtSy>nitCzs(k9jZZf#J$FsJ)!asXGh
cM}re5!v_nqH@soLAA{WG>FVdQ&MBb@0C1#IX#fBK

literal 0
HcmV?d00001

diff --git a/src/assets/images/strong-light.png b/src/assets/images/strong-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..79ba51e27facf32045809a532a74a8fb6d2e2d53
GIT binary patch
literal 294
zcmeAS@N?(olHy`uVBq!ia0vp^%0R5m!VDxCmgukpNyg$JcPGZ1Cw1z99L@rd$YKTt
zZeb8+WSBKa0w~BI;1l8sq|ZP8%aHb;VbXsFhX1cLWRihGtR+Ey!3_Ud*%_4{r~Cp6
z%=dJ045^rNbkarM!wNhu=Y#6C6H6P){%0CFv8`}1TTrl#Gh{`5=nsx_r)57fGRa5r
ztyg*0@`rnAveWulmBNV*T{>O*AzDdqSNJWJ`gq4GtEp{Pv5UcS#k%RARp&948wtoB
z`tN2lExTm5yVZ%uxf@?+8E$&tQkJB9u4AsxzSkF4U3Fa$oYvkNcuaRA_k!jVg8k=R
j|2yt&KRw~;x7(i>!^=W_(h_4pA;IA3>gTe~DWM4f;%;kO

literal 0
HcmV?d00001

diff --git a/src/assets/images/strong-light_HL.png b/src/assets/images/strong-light_HL.png
new file mode 100644
index 0000000000000000000000000000000000000000..afe4feff7092481e0ea264697105883601d40de0
GIT binary patch
literal 1497
zcmcIkeM}Q~82%M3-(RvQA~Pru&@e|P3Q_A7U4=D4>ONSrV5r$g>juc?$9iZ#(1{j`
zslt*C(VoKu7L(a*-DqMv4+X5w;Vr4kSc7NVX|1)kN0HvO2i+CAWHJ7`H@UmycX{6D
zectzde(gJJs#24dCjkIb`ET*wVZQmyQ=AaTyr(+eSPuaEJfFAqJ(%Trz&cgH?<(MD
zsxS5!t9U%ISp0r16VgZoe*Zt>KqR$L7-12MD=T@&jJ-WcShZLvJt&n5un1*!A1Un+
z<Zzb~8;7KSJEgf}XezMd4$E<2no9#0+R_^lT$vL-1XRisQ`v5*!4ZN7bvH0Cq*ZPK
zBeRfo3-ZGeW!sDYPNp9)8$Mf<Q6UTZCeH^l>9_UVu9C;$vsqiI&gVueA?H|y5kgFD
zFQxa5TE>^xFL4|F$xlKmY{vC%zn;@=Gt5$xZeQMN<VS^c^A(LG)IrnF94(6<Tdw0@
z!z(VWY}k?ySqDBkb9)M0^WqR1PMc#tEWPL5YYq^NqSFX2=Y)?=xrRg8^37P~;N1-|
zDnTx~oLsH-+&1+?otismvifA#gOeT-(t3)g{6>wljY`1m@ZqGH9USX;q{6iTx@qof
z7F>nK^m4vJ5x8l}c!8vZCkv9JLq%V3UAxjA+GOpow@W$%xlqdVb56y*V5V$vPMdZ9
z1tK=ph{DwtoOqSCQPgZXP{prCpt<jCwQ%9EAm}$59Bk_8h29UJ>~;3!wK!bKMv;yE
z$AE^r3a-=geN`U6QOE`v={vb{+3+!ujdkpPzg#i<Y5gf|nP`VE@ig_OCt1wBmb?>^
zA8K$Qc2>;&Jwf`JkOfBew+oOf@wAqs=C0?W;ljCdcFT!$mOLNp^NwLU@8}Ysa?VUB
zKCku!hRRtV-^y~R#Tp0he)pc{WM&wE%lQp0sZgC^9~;=IpMDz{EZ;jCFRKq6rmLt<
zVnfHzcOe74?gl3Z*xSBGpetqJtNoZ)(d%Tl!YsSRjKx9fFpP9FGb+Op0TDAYpn1gQ
z54o!me6|dWYlWdF0~*~qUmabP2%mHLjrgMpkbzarP7}YpqELqmSh`ZVB4CX$P!WbN
zuQd}$!GnYIG?Lf~PVRGydAx>PJJ-F)bbFebZ1y)YqAn<c<X?&CsIsedyaz%<P1;mI
z$nFSoMVoB~QjqD}WN}K-F+FRgRugnN8j9$pVSY@#glU|ir3{QDXCRQG%=ZCp4xMGz
zQQuMnR9ShDoNj!eCpG?!6g4UFn?OeRC^=2&k6?D(yPsJs>=6}PVM>T9R~oUKjE8!&
zQUH<1YzjArd`+vi8Iol+UtyW1GR(bzX^X9(iyvFec;w7Ae|9M<6&%NBoKoE|%B0Xm
zYvK&dr!__;#x7G>5&YM*@H#MpZevz-Vn{-qg^IXn=xJ11`fjpGsR(SMZ!r}o5iW-$
z78%_ioLA;v=s%}5YQ&OAG0d2dRN2yhaZ$uenRcb1YvHDdta%^*7haM#+#K>7$8Dmx
zR#M2AGSYy0-b*BzR4J$j^VXkGW&^uu)k2@)#n~@WmbZ=`<f4aH%zeV#R&7y%C6^aE
pJr7?K9n&}R8pg*HrageHTJxt)0AGx&Wv*<%-(JJJv~Bm%e*ibNN=g6#

literal 0
HcmV?d00001

diff --git a/src/assets/images/weak-light.png b/src/assets/images/weak-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc6e6d1a85cf97fb6acc9e29e99ba6a9354e7141
GIT binary patch
literal 1233
zcmeAS@N?(olHy`uVBq!ia0vp^3P7yG!3HE*cI@g0k~2JA978G?-#%cRpyD}6#Z#zz
z)y&=QE-q<lX<?y2P!0m$&(H#tfQ$|g2icOA=H}+ovU~PSuJb-=;pL^}<^JbER{AWe
zaJ0L4JEy?*d-h{9hNZWkzj(o5_U&iT+t2I2cD9=vyk3`XdyiN8_oJP)j~?=#+4Z_I
zaLw`EKQEo#T@eTs*%|-x+fnA)ZStPd+kak<D))cnz4bizXNd0SmWuDb->g%~z4PpT
zmhHW>)AQ~fE&lD2zxm+TErqk6Z<Bj3#xVb_`=w*K^X6ZA%Un=Wa^To8F`(+!$o_KX
z4I4MQN^h@py!QBR&C6%8kA(U26RyRcFV?<m=YHqx^sM>Mzd^0JzpCVS&9-?g3U;^q
zm-ODYxlpxdw*K8c-Qv%ndiGy~if9W!?0dIe?)@`w^Y@Qjp&or6AGE8sZ^vx?t9Iwx
ze!!ggwZc4pSEcy>sQE8)EpDYHCwH6W74HW*^~l|tmES7kI{t$Z*d;*s9<86I{O%br
z1VlT2*Dl&Vv$y}r{zK2d)*l4%Az`$B1H@(~f$zU_>?fJ!eU4uUbv-Ps_B*}&_A|$p
z)8Wqh&3`>^?KoTCdg<-wn^i&$JMO3do(K%O|6IVx+Wb|8p>Y5CZ_1gE&HjseZ9kv>
z+LPf?9mIqGw5R0FKYwj9!;!y`K=~7{ao2ACT6IRCOCXW?bA7<BTDxd}kV{<hjiu#J
z*0+{^SJ@Zxo8eI-FkPHE=Kg7Z=3U!PV3>p}%)6~#HT&idkAKE%cB_9}dh7X3f%E5~
zLdt6)LY9hg6a2rJNyqpD6T^3CV)*Rz#~T_i_OIW0GJuTz194o%L4p61fEqS`oM^Kh
z;zd|`xV@`dD1KFKoWYU(PlWfL&8bm2zZMcq2OvT4eA~NuM}UbyoadwdPl)qDDFfug
z50E6c6Y45fXP^Th-njz}r5bQtROSKQ1BynHoN*o)pNt36dGwEe-i+ad{YNp}{a*~j
zmOs(ZFhp`%{zeiF)9*Sj5!YAW4T-Wn2_51`)#dITShIUxeJ>;|^<{v`8xj_-8=>hv
fzU{~RqxMV{)=`sI)rsT-iz)_BS3j3^P6<r_8xyrw

literal 0
HcmV?d00001

diff --git a/src/assets/images/weak-light_HL.png b/src/assets/images/weak-light_HL.png
new file mode 100644
index 0000000000000000000000000000000000000000..67cf23baa1f5fca72f1a3f8776831f03ffdd11d9
GIT binary patch
literal 235
zcmeAS@N?(olHy`uVBq!ia0vp^3P7yG$P6Uy$~4XZDaPU;cPGZ1Cw1z99L@rd$YKTt
zZeb8+WSBKa0w~B9;1l8sq#0^|CCyt}24pam1o;Is{Ewcfv=zuJ@N{tushBhM+(F)E
z0|A$dKLt4R{Mhwamu_l3q}1xSfVtSXtMl;zOOG=T=ca`_|6M1e_u%8@jFR;?llL0!
z?3G^WslD+m_rpB?kfH}o*MjVBtb4e;C`?YrB+$6@QpYBT`H2>Z>;D}6B_Fo%UFB`}
ZI!2RDkM7M!inKv)@^tlcS?83{1OP^-Q7Hfb

literal 0
HcmV?d00001

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 7228c52..7844fa4 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -88,6 +88,12 @@ div:focus {
 .pl-5 {
   padding-left: 5px;
 }
+.p-2{
+  background: rgba(247, 248, 252, 1);
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 15px;
+}
 
 .block {
   display: block;
diff --git a/src/views/controlCenter/6170/index.vue b/src/views/controlCenter/6170/index.vue
new file mode 100644
index 0000000..b41866c
--- /dev/null
+++ b/src/views/controlCenter/6170/index.vue
@@ -0,0 +1,490 @@
+<template>
+    <div class="device-page p-2">
+        <!-- 头部信息栏 -->
+        <div class="header-bar">
+            <div>设备名称：6170零零一</div>
+            <div>设备型号：BJQ6170</div>
+            <div class="device-status">设备状态：<span class="online">在线</span></div>
+            <div>电量：80%</div>
+            <div>续航：1小时55分钟</div>
+        </div>
+
+        <!-- 主体内容区域 -->
+        <div class="content-wrapper">
+            <!-- 第一行：灯光模式 + 灯光亮度、强制报警、位置信息 -->
+            <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="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>
+                    </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="brightness" :min="0" :max="100" :step="1"
+                                size="small" />
+                            <span class="brightness-value">%</span>
+                            <el-button type="primary" class="save-btn">保存</el-button>
+                        </div>
+                        <el-button type="danger" class="alarm-btn">强制报警</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>经纬度 114°7'E 30°28'N</span>
+                            </div>
+                            <div class="location-item">
+                        
+                                <div>地址 <span class="lacatin_gps">ksjkjwekrnjewrnjewrnjwerjweb</span></div>
+                                <el-button link type="primary" class="view-btn">查看</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 placeholder="请输入设备名称" />
+                            </div>
+                            <div class="form-item">
+                                <span class="form-label">职位:</span>
+                                <el-input placeholder="请输入设备名称" />
+                            </div>
+                            <div class="form-item">
+                                <span class="form-label">姓名</span>
+                                <el-input value="王平安" />
+                            </div>
+                            <div class="form-item">
+                                <span class="form-label">ID:</span>
+                                <el-input placeholder="请输入设备名称" />
+                            </div>
+                            <el-button type="primary" class="register-btn">登记</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" value="现场危险，停止救援！紧急撤离至安全区域！"
+                                resize="none" />
+                            <el-button type="primary" class="send-btn">发送</el-button>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+<script setup name="DeviceControl" lang="ts">
+import { ref } from 'vue';
+
+const brightness = ref(50);
+// 定义灯光模式的类型接口
+interface LightMode {
+    id: string;
+    name: string;
+    icon: string;
+    activeIcon: string;
+    active: boolean;
+    switchStatus: boolean;
+}
+// 导入图片资源（确保路径正确）
+import strongLightDefault from '@/assets/images/strong-light.png';
+import strongLightActive from '@/assets/images/strong-light_HL.png';
+import weakLightDefault from '@/assets/images/weak-light.png';
+import weakLightActive from '@/assets/images/weak-light_HL.png';
+import strobeLightDefault from '@/assets/images/strobe-light.png';
+import strobeLightActive from '@/assets/images/strobe-light_HL.png';
+import floodLightDefault from '@/assets/images/flood-light.png';
+import floodLightActive from '@/assets/images/flood-light_HL.png';
+import laserLightDefault from '@/assets/images/laser-light.png';
+import laserLightActive from '@/assets/images/laser-light_HL.png';
+
+// 灯光模式数据
+// 灯光模式数据（引用导入的图片）
+const lightModes = ref<LightMode[]>([
+    {
+        id: 'strong',
+        name: '强光',
+        icon: strongLightDefault, // 直接使用导入的变量
+        activeIcon: strongLightActive,
+        active: true,
+        switchStatus: true
+    },
+    {
+        id: 'weak',
+        name: '弱光',
+        icon: weakLightDefault,
+        activeIcon: weakLightActive,
+        active: false,
+        switchStatus: false
+    },
+    {
+        id: 'strobe',
+        name: '爆闪',
+        icon: strobeLightDefault,
+        activeIcon: strobeLightActive,
+        active: false,
+        switchStatus: false
+    },
+    {
+        id: 'flood',
+        name: '泛光',
+        icon: floodLightDefault,
+        activeIcon: floodLightActive,
+        active: false,
+        switchStatus: false
+    },
+    {
+        id: 'laser',
+        name: '激光',
+        icon: laserLightDefault,
+        activeIcon: laserLightActive,
+        active: false,
+        switchStatus: false
+    }
+]);
+// 当前选中的模式
+const currentMode = computed(() => {
+    return lightModes.value.find(mode => mode.active);
+});
+// 处理模式点击事件
+const handleModeClick = (modeId: string) => {
+    // 重置所有模式状态
+    lightModes.value.forEach(mode => {
+        const isTargetMode = mode.id === modeId;
+        mode.active = isTargetMode;
+        mode.switchStatus = isTargetMode;
+    });
+
+    // 可以在这里添加模式切换的业务逻辑
+    console.log(`切换到${lightModes.value.find(m => m.id === modeId)?.name}模式`);
+};
+
+// 监听开关状态变化
+lightModes.value.forEach(mode => {
+    watch(() => mode.switchStatus, (newVal) => {
+        if (newVal) {
+            // 如果打开当前开关，关闭其他所有开关
+            handleModeClick(mode.id);
+        } else {
+            // 如果关闭当前开关
+            mode.active = false;
+        }
+    });
+});
+</script>
+<style lang="scss" scoped>
+.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;
+            }
+        }
+    }
+
+    .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: 100%;
+            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;
+            }
+
+            .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
+            }
+        }
+
+        .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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/controlCenter/controlPanel/components/map.vue b/src/views/controlCenter/controlPanel/components/map.vue
new file mode 100644
index 0000000..e5f5010
--- /dev/null
+++ b/src/views/controlCenter/controlPanel/components/map.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="amap_page">
+    <div ref="mapRef" class="amap-container"></div>
+    <div class="content_top">
+      <div class="content_layout">
+        <!-- 左侧设备列表（带复选框） -->
+        <div class="device_list">
+          <!-- 全选复选框 -->
+          <div class="list_header">
+            <el-checkbox v-model="checkAll" @change="handleCheckAllChange" label="全选"></el-checkbox>
+          </div>
+
+          <!-- 设备项（带复选框） -->
+          <div class="device_item" v-for="device in deviceList" :key="device.id">
+            <!-- 复选框 -->
+            <el-checkbox :value="device.id" v-model="checkedDeviceIds" class="device_checkbox"></el-checkbox>
+
+            <!-- 设备信息 -->
+            <div class="device_page">
+              <div class="device_info">
+                <div class="device_name">{{ device.name }}</div>
+                <div class="device_model">{{ device.model }}</div>
+                <div class="device_status" :class="{ online: device.status === '在线', offline: device.status === '离线' }">
+                  {{ device.status }}
+                </div>
+              </div>
+
+              <!-- 控制按钮 -->
+              <el-button class="control_btn" @click="handleControl(device)">控制</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const router = useRouter();
+// 声明高德地图全局类型
+declare var AMap: any;
+
+// 高德Key与安全密钥
+const AMAP_KEY = '90bc158992feb8ccd0145e168cab1307';
+const AMAP_SECURITY_CODE = '5ed9004cb461cd463580b02a775c8d91';
+
+// 地图实例
+const mapRef = ref<HTMLDivElement | null>(null);
+let mapInstance: any = null;
+
+// 模拟设备数据
+const deviceList = ref([
+  { id: 1, name: '6170一号', model: 'BJQ6170', status: '在线', lng: 114.4074, lat: 30.5928 },
+  { id: 2, name: '6170二号', model: 'BJQ6170', status: '在线', lng: 114.4174, lat: 30.5928 },
+  { id: 3, name: '6170三号', model: 'BJQ6170', status: '离线', lng: 114.4074, lat: 30.6028 },
+  { id: 4, name: '6170四号', model: 'BJQ6170', status: '在线', lng: 114.4174, lat: 30.6028 },
+]);
+
+// 复选框状态管理
+const checkedDeviceIds = ref<number[]>([]); // 存储选中的设备ID
+const checkAll = ref(false); // 全选状态
+
+// 全选/取消全选
+const handleCheckAllChange = (val: boolean) => {
+  checkedDeviceIds.value = val
+    ? deviceList.value.map(device => device.id)  // 全选：选中所有设备ID
+    : [];  // 取消全选：清空
+};
+
+// 监听单个复选框变化，更新全选状态
+watch(checkedDeviceIds, (newVal) => {
+  checkAll.value = newVal.length === deviceList.value.length && deviceList.value.length > 0;
+});
+
+// 设备控制事件
+const handleControl = (device: any) => {
+  console.log('控制设备：', device);
+    const deviceId = device.id;
+  router.push('/controlCenter/6170/' + deviceId);
+};
+
+// 地图初始化（保持不变）
+const initMap = () => {
+  if (!window.AMap || !mapRef.value) return;
+
+  mapInstance = new AMap.Map(mapRef.value, {
+    center: [114.4074, 30.5928],
+    zoom: 15,
+    resizeEnable: true
+  });
+
+  // 设备标记点
+  deviceList.value.forEach(device => {
+    new AMap.Marker({
+      position: [device.lng, device.lat],
+      title: device.name,
+      map: mapInstance
+    });
+  });
+};
+
+onMounted(() => {
+  window._AMapSecurityConfig = { securityJsCode: AMAP_SECURITY_CODE };
+  if (window.AMap) {
+    initMap();
+  } else {
+    const script = document.createElement('script');
+    script.src = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}`;
+    script.onload = initMap;
+    document.head.appendChild(script);
+  }
+});
+
+onUnmounted(() => {
+  if (mapInstance) mapInstance.destroy();
+});
+</script>
+
+<style scoped>
+/* 地图容器 */
+.amap_page {
+  position: relative;
+}
+
+.amap-container {
+  height: 640px;
+  border-radius: 4px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.content_top {
+  width: 210px;
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
+  background: rgba(255, 255, 255, 1);
+  height: 620px;
+  position: absolute;
+  z-index: 1;
+  top: 10px;
+  left: 10px
+}
+
+/* 全选行样式 */
+.list_header {
+  padding: 12px;
+  border-bottom: 1px solid #eee;
+  font-weight: 600;
+}
+
+/* 设备项样式 */
+.device_item {
+  padding: 0px 12px;
+  display: flex;
+  align-items: center;
+
+  /* 复选框与内容间距 */
+  cursor: default;
+  transition: background 0.2s;
+}
+
+/* 复选框样式 */
+.device_checkbox {
+  flex-shrink: 0;
+  /* 复选框不压缩 */
+}
+
+/* 设备信息区域 */
+.device_page{
+background-color: rgba(247, 248, 252, 1);
+  margin-bottom: 5px;
+  width: 84%;
+  padding: 5px;
+  border-radius: 4px;
+  position: relative;
+}
+
+.device_name {
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.device_model {
+  font-size: 12px;
+  color: #666;
+  margin: 4px 0;
+}
+
+.device_status {
+  font-size: 12px;
+}
+
+.online {
+  color: #00b42a;
+}
+
+.offline {
+  color: #f53f3f;
+}
+
+/* 控制按钮 */
+.control_btn {
+  font-size: 12px;
+  padding: 0px 15px;
+  flex-shrink: 0;
+  position: absolute;
+  right: 16px;
+  bottom: 10px;
+  background: rgba(2, 124, 251, 0.06);
+  color: rgba(2, 124, 251, 1);
+  border:none;
+}
+</style>
diff --git a/src/views/controlCenter/controlPanel/index.vue b/src/views/controlCenter/controlPanel/index.vue
new file mode 100644
index 0000000..89bb868
--- /dev/null
+++ b/src/views/controlCenter/controlPanel/index.vue
@@ -0,0 +1,297 @@
+<template>
+  <div class="p-2">
+    <el-row :gutter="20">
+      <!-- 部门树 -->
+      <el-col :lg="4" :xs="24" style="" class="main-tree">
+        <el-input v-model="deptName" placeholder="输入分组名称" prefix-icon="Search" clearable />
+        <el-tree ref="deptTreeRef" class="mt-2" node-key="id" :data="deptOptions"
+          :props="{ label: 'groupName', children: 'children' }" :expand-on-click-node="false"
+          :filter-node-method="filterNode" highlight-current default-expand-all @node-click="handleNodeClick"></el-tree>
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+          :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card>
+              <!-- =========搜索按钮操作======= -->
+              <div class="btn_search">
+                <el-button :type="isListView ? 'primary' : ''" @click="switchView('list')">
+                  {{ isListView ? '列表显示' : '列表显示' }}
+                </el-button>
+                <el-button :type="!isListView ? 'primary' : ''" @click="switchView('map')">
+                  {{ !isListView ? '地图显示' : '地图显示' }}
+                </el-button>
+                <el-button type="primary" plain>发送消息</el-button>
+                <el-button type="primary" plain>电子围栏</el-button>
+                <el-button type="danger" plain>强制报警</el-button>
+                <el-button type="primary" plain>高级筛选</el-button>
+              </div>
+              <el-collapse accordion>
+                <el-collapse-item title="高级筛选">
+                  <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
+                    <el-form-item label="设备类型" prop="deviceId">
+                      <el-select v-model="queryParams.deviceId" placeholder="全部" clearable>
+                        <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="设备名称" prop="deviceName">
+                      <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable />
+                    </el-form-item>
+                    <el-form-item label="设备状态" prop="deviceStatus">
+                      <el-select v-model="queryParams.deviceStatus" placeholder="设备状态" clearable>
+                        <el-option label="在线" value="1"></el-option>
+                        <el-option label="离线" value="0"></el-option>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="设备MAC" prop="deviceMac">
+                      <el-input v-model="queryParams.deviceMac" placeholder="请输入设备MAC" clearable />
+                    </el-form-item>
+                    <el-form-item label="设备IMEI" prop="deviceImei">
+                      <el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable
+                        @keyup.enter="handleQuery" />
+                    </el-form-item>
+                    <el-form-item label="使用人员" prop="currentOwnerId">
+                      <el-input v-model="queryParams.currentOwnerId" placeholder="请输入使用人员姓名" clearable
+                        @keyup.enter="handleQuery" />
+                    </el-form-item>
+                    <el-form-item label="通信方式" prop="communicationMode">
+                      <el-select v-model="queryParams.communicationMode" placeholder="请选择通信方式" clearable>
+                        <el-option label="4G" value="0"></el-option>
+                        <el-option label="蓝牙" value="1"></el-option>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item>
+                      <el-button type="primary" @click="handleQuery">查询</el-button>
+                      <el-button @click="resetQuery">重置</el-button>
+                    </el-form-item>
+                  </el-form>
+                </el-collapse-item>
+              </el-collapse>
+            </el-card>
+          </div>
+        </transition>
+        <el-card class="Maplist">
+          <div v-if="isListView" key="list">
+            <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="50" align="center" />
+              <el-table-column  label="设备名称" align="center" prop="deviceName" />
+              <el-table-column  label="设备图片" align="center" prop="devicePic">
+                <template #default="scope">
+                  <el-popover placement="right" trigger="click">
+                    <template #reference>
+                      <img :src="scope.row.devicePic"
+                        style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
+                        class="hover:opacity-80 transition-opacity" />
+                    </template>
+                    <img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
+                  </el-popover>
+                </template>
+              </el-table-column>
+              <el-table-column  label="设备类型" align="center" prop="typeName" />
+              <el-table-column  label="使用人员" align="center" prop="personnelBy" />
+              <el-table-column  label="电量" align="center" prop="battery" />
+              <el-table-column  label="设备状态" align="center" prop="onlineStatus">
+                <template #default="scope">
+                  <div class="normal green" v-if="scope.row.onlineStatus==1">在线</div>
+                  <div class="normal red" v-if="scope.row.onlineStatus==0">离线</div>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
+                <template #default="scope">
+                  <el-button link type="primary" @click="handleControl(scope.row)">控制面板</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+              :total="total" @pagination="getList" />
+          </div>
+          <div v-else key="map">
+            <Amap />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup name="User" lang="ts">
+import api from '@/api/controlCenter/controlPanel/index'
+import { deviceQuery, deviceVO } from '@/api/controlCenter/controlPanel/types';
+import Amap from "./components/map.vue";
+import { optionselect } from '@/api/system/post';
+import { UserVO } from '@/api/system/user/types';
+const router = useRouter();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
+const deviceList = ref<deviceVO[]>();
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<number | string>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const deptName = ref();
+const deptOptions = ref([])
+const sys_communication = ref([])
+const deptTreeRef = ref<ElTreeInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const userFormRef = ref<ElFormInstance>();
+const isListView = ref(true);
+
+const initData: PageData<'', deviceQuery> = {
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    deviceId: '',
+    deviceName: '',
+    deviceStatus: '',
+    deviceMac: '',
+    deviceImei: '',
+    currentOwnerId: '',
+    communicationMode: '',
+    queryParams: '',
+    groupId: ''
+  },
+  rules: undefined,
+  form: ''
+};
+const data = reactive<PageData<'', deviceQuery>>(initData);
+
+const { queryParams, form, } = toRefs<PageData<'', deviceQuery>>(data);
+const switchView = (view) => {
+  isListView.value = (view === 'list');
+};
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    deptTreeRef.value?.filter(deptName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+/** 查询用户列表 */
+const getList = async () => {
+  loading.value = false;
+  const res = await api.deviceControlCenterList(queryParams.value);
+  loading.value = false;
+  deviceList.value = res.rows;
+  total.value = res.total;
+};
+
+/** 查询部门下拉树结构 */
+const getDeptTree = async () => {
+  const res = await api.devicegroupList('');
+
+  deptOptions.value = res.data;
+  //enabledDeptOptions.value = filterDisabledDept(res.data);
+};
+
+/** 过滤禁用的部门 */
+const filterDisabledDept = (deptList: any[]) => {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+};
+
+/** 节点单击事件 */
+const handleNodeClick = (data: any) => {
+  queryParams.value.groupId = data.id;
+  handleQuery();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.groupId = undefined;
+  deptTreeRef.value?.setCurrentKey(undefined);
+  handleQuery();
+};
+
+
+/** 设备控制跳转 */
+const handleControl = (row: any) => {
+  const deviceId = row.id;
+  router.push('/controlCenter/6170/' + deviceId);
+};
+
+/** 选择条数  */
+const handleSelectionChange = (selection: UserVO[]) => {
+  ids.value = selection.map((item:any) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+/** 重置操作表单 */
+const reset = () => {
+  userFormRef.value?.resetFields();
+};
+
+onMounted(() => {
+  getDeptTree(); // 初始化部门数据
+  getList(); // 初始化列表数据
+});
+
+// async function handleDeptChange(value: number | string) {
+//   const response = await optionselect(value);
+//   postOptions.value = response.data;
+//   form.value.postIds = [];
+// }
+</script>
+<style lang="scss" scoped>
+.main-tree {
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
+  background: rgba(255, 255, 255, 1);
+  width: 212px;
+  border: none;
+  padding-top: 10px;
+
+}
+
+.el-card {
+  border: none
+}
+
+.btn_search {
+  padding: 0px 15px 15px 0px;
+  // border-bottom: 1px solid rgba(235, 238, 248, 1);
+}
+
+.queryFormRef {
+  margin-top: 20px;
+}
+
+.normal {}
+
+.green {
+  color: rgba(0, 165, 82, 1);
+}
+
+.red {
+  color: rgba(224, 52, 52, 1);
+}
+
+.Maplist {
+  height: 680px;
+  overflow: auto;
+}
+</style>