From 1cbd436f7377f3bb2c3598b50fc8f21ca4af012b Mon Sep 17 00:00:00 2001
From: Kven <2955163637@qq.com>
Date: Wed, 8 Jan 2025 11:13:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E5=A2=9E=E7=89=A9=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E6=A8=A1=E5=9D=97=E5=8F=8A=E4=BC=98=E5=8C=96=E9=83=A8?=
 =?UTF-8?q?=E9=97=A8=E6=A0=91):=20=E6=96=B0=E5=A2=9E=E7=89=A9=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E6=A8=A1=E5=9D=97=E5=8F=8A=E4=BC=98=E5=8C=96=E5=85=B6?=
 =?UTF-8?q?=E5=AE=83=E6=A8=A1=E5=9D=97=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/vite.config.dev.ts                     |   2 +-
 src/api/dept.ts                               |  11 +
 src/api/message-mgmt.ts                       |   2 -
 src/api/tsl.ts                                |  75 ++
 src/assets/objectNetwork.png                  | Bin 0 -> 10118 bytes
 src/mock/deptTree.ts                          |  34 +
 src/router/routes/modules/iot.ts              |  23 +
 .../workplace/components/announcement.vue     |  94 +++
 .../workplace/components/quick-operation.vue  |  35 +
 .../workplace/components/recently-visited.vue |  44 ++
 .../iot/device/components/device-detail.vue   | 146 ++--
 .../iot/device/components/device-edit.vue     |  95 ++-
 src/views/iot/device/index.vue                |  23 +-
 .../iot/product/components/product-detail.vue | 101 +--
 .../iot/product/components/product-edit.vue   | 445 ++++++++++++
 .../iot/product/components/product-tsl.vue    | 648 ++++++++++++++++++
 src/views/iot/product/index.vue               |  19 +
 .../message/components/message-edit.vue       |  84 ++-
 18 files changed, 1699 insertions(+), 182 deletions(-)
 create mode 100644 src/api/tsl.ts
 create mode 100644 src/assets/objectNetwork.png
 create mode 100644 src/mock/deptTree.ts
 create mode 100644 src/views/dashboard/workplace/components/announcement.vue
 create mode 100644 src/views/dashboard/workplace/components/quick-operation.vue
 create mode 100644 src/views/dashboard/workplace/components/recently-visited.vue
 create mode 100644 src/views/iot/product/components/product-edit.vue
 create mode 100644 src/views/iot/product/components/product-tsl.vue

diff --git a/config/vite.config.dev.ts b/config/vite.config.dev.ts
index e2d05a1..7ed0243 100644
--- a/config/vite.config.dev.ts
+++ b/config/vite.config.dev.ts
@@ -14,7 +14,7 @@ export default mergeConfig(
       proxy: {
         '/api': {
           // target: 'http://8.134.75.234:8081',
-          target: 'http://127.0.0.1:8081',
+          target: 'http://192.168.3.238:8081',
           changeOrigin: true,
         },
       },
diff --git a/src/api/dept.ts b/src/api/dept.ts
index 877c0ae..d6939eb 100644
--- a/src/api/dept.ts
+++ b/src/api/dept.ts
@@ -11,6 +11,17 @@ export interface DeptRecord extends DeptCreateRecord {
   id: string;
 }
 
+// 获取部门树
+export function getAllDeptTree(id: number | string) {
+  return axios({
+    method: 'get',
+    url: '/api/rest/dept/tree',
+    params: {
+      id,
+    }
+  });
+}
+
 // 添加区域
 export function create(data: DeptCreateRecord) {
   return axios.post(`/api/rest/dept`, data);
diff --git a/src/api/message-mgmt.ts b/src/api/message-mgmt.ts
index b9e65f0..34e575d 100644
--- a/src/api/message-mgmt.ts
+++ b/src/api/message-mgmt.ts
@@ -24,8 +24,6 @@ export interface MessageCreateRecord {
   attachmentIds?: string[];
 }
 
-
-
 // 查看详情
 export function queryMessage(userId: number, messageId: number) {
   return axios.get(`/api/rest/message/${userId}/${messageId}`);
diff --git a/src/api/tsl.ts b/src/api/tsl.ts
new file mode 100644
index 0000000..f15f26f
--- /dev/null
+++ b/src/api/tsl.ts
@@ -0,0 +1,75 @@
+import axios from 'axios';
+
+export interface Record {
+  current: number;
+  size: number;
+}
+
+export interface ServeRecord extends Record {
+  name?: string;
+  identifier?: string;
+  productId: number;
+}
+
+export interface PropertyRecord extends Record {
+  name?: string;
+  identifier?: string;
+  productId: number;
+  dataType?: string;
+  ioType?: string;
+}
+
+export interface eventRecord extends Record {
+  name?: string;
+  level?: string;
+  identifier?: string;
+  productId?: number;
+}
+
+export function queryServeList(data: ServeRecord) {
+  return axios({
+    url: '/api/rest/tsl/serve',
+    method: 'get',
+    params: data,
+  });
+}
+
+export function queryPropertyList(data: PropertyRecord) {
+  return axios({
+    url: '/api/rest/tsl/property',
+    method: 'get',
+    params: data,
+  });
+}
+
+export function queryEventList(data: eventRecord) {
+  return axios({
+    url: '/api/rest/tsl/event',
+    method: 'get',
+    params: data,
+  });
+}
+
+export function createServe(data: any) {
+  return axios.post(`/api/rest/tsl/serve`, data);
+}
+
+export function createProperty(data: any) {
+  return axios.post(`/api/rest/tsl/property`, data);
+}
+
+export function createEvent(data: any) {
+  return axios.post(`/api/rest/tsl/event`, data);
+}
+
+export function deleteServe(data: any) {
+  return axios.delete(`/api/rest/tsl/serve/${data}`, );
+}
+
+export function deleteProperty(data: any) {
+  return axios.delete(`/api/rest/tsl/property/${data}`);
+}
+
+export function deleteEvent(data: any) {
+  return axios.delete(`/api/rest/tsl/event/${data}`);
+}
\ No newline at end of file
diff --git a/src/assets/objectNetwork.png b/src/assets/objectNetwork.png
new file mode 100644
index 0000000000000000000000000000000000000000..bef6f50d1fd256d5c830c07c481ef19d167cbd4e
GIT binary patch
literal 10118
zcmcI~^;cU>xOEaNg#tl}Q-T$DEgIadNO9NV?hrh<yA&&>XektTcW<%cQna`h=$H3?
zYu*3g{%~f_nKia%o;maE{p@IURXJ=-GE4vffUO`e{SKKA|M!5=k!iJVO#w0ky1$c?
z1k_AY8~^}NfP%DymXGm?5tfhEkMGY5%JS+x#F!~}L55UX@&Flp$Jjtys+*#8eS7C0
zH!RvLXxzTgCb9sS=_H+2b)rt?Ph;nfWdnPI?+ZE(9WUfV`kSt`Uy(|y7f9l#=y~51
zyv<JC8Q;m{`JI<-cJnOOsm9}9`~7D5ulV05j!?x>lu;BrQP`-!e=i53g@9tes0$c6
zE+f4BPmu`n^8tPV=fN$<>(5@-`a*LK2gxV%HdK`HAZrL-<}z#3y;cV>r9|rd@Yn;Q
zL2QCFKgIN;U_xbPrz>(MksWM}JO9blpTK}3-XcOE{Zi$nnZMo_(=A`aK?tKn-{h{;
zV89>+fPrDa8Dly|tihbw@lx_riroaVlb??}DmALl+~!$Wy-Rk4?W`g1WW0SX;3-0R
z7=*CM%Ov8i+D#_#Fy3}b(0O=p=*~J|kegGLw>$_R*kFn;x*73S(b^9=)4L^MolBpV
zNx&Y6Bw4Eiqnko&#t}vNV1ot7%CkctzMh)r)v@t;X`o68*kAke)D-yg{FE_F5!--^
zil=;GK5o}A6s3*?HhlJ16{3#^V|g=6)HTkbBZ>(%ZVF(SQfBY|d|PS$h-+Rxq~$l4
z^6(>o0;G%CdmqWPROuG@PC>khPRhz{2f0FWPW9@x*dOT^2nSWMJ>crGiuz6xz0<7u
zA}DcSI5W!PGo~a~#XgrDw{}q+a&2AP!st40KqTVa9$Sw1tlA#6EQdmO?^===C`^;Q
zsYt4`l&4yXrCuceSGSV3YCG_&9((72(6)M?*1lgHjD*1Uvq42^UZxM>O(9O4J+_<o
zh~0Z!eXe*h4{eiVOih4m$>spDC@@X|-Sii(Y4mS~t$Yz6425K!OKX>}C8@Sl_*c0x
z*O)qBr0iPw{&FO&(;eG<8PczkC7)<RyX>{}`yOk*4+P+g{5H1xP@3{=Yf!*kSf-os
zxBG(_U(00kFDNbMAa+*XcI}P+Gc{NosP3eTvdS@~rdonC<jFo8`T@0W?yUBV#KQtd
zw}$VA$D`Z&I0~#<I^ostn{oRw04yfU29A$pGRZXTXCS)B6`AYEe4zuVTP}=Fb*!5d
z>`~tV_D_d0H4Ijem|W7=G>oIT)JdF@kNh=4QTr3fSLKq%1lP5z#ChfgY%j?e;FJ8b
z_~bKrS+#kY3gfC#vo4G&m~3(Mbwb)?I{GY7QWqm5%55t_Ym?q}HG&g2?qo5BhqG_D
z`giZ;@K+)h_{*bW%SfD>K^+m3v-}TiR24s=I^;%_g!;E>qk3tt)oJB5_}eNPw2`K#
zd!07=9$5rn8nu3(-gt;Kfy#n+_c62o9g?Nvidh}xp)>!X$!wzG2LqNe<{D`)S0Jss
z%5U^2fQ$;Xfu+EgNSnq$Ox022T`=|@FcO76OIL3WPHP8`_)wx^Q_Bn|9qnlVMy#;H
z@9Uuo2kxq5JkKv9BZVH6*e6)6S0iwfemwd@D!3wYFw3Y7?scz5@wPFQ_<5Y<Uhs~8
zYGU1;ic+?3egSMKiYXY!aL-#-Zw4G}jNVnx`xfpPILs_zZeriO!=Z-j1ER8dm&H?p
zg(r5JZt<j0uS?%LI;@Y9e#GGXqc)50`B1hlBNKs<l-@2rs*XDx1^Y`EI0GD{&r%LO
zek-0j7<#1wC|U0BUWFP)FVnH9OV2(aFjV}W;$)VA(vafEpxD_S2Tnf$IFW}1(<HRV
z(1i2LS3nAw017W65IzM^#~Dqls}$p1aIozvqH3@J9SWpv1m4A#x!JMGVgW0PqR;HF
zM)2r^yT<KX@aVp1UekeF(W0e$zDf|G!+xH%j1aqiJo5fd(y9a*lpa;1`F-RQ9GB4z
zv5yaox^n3yfEvd8(iL=<sj&r!kTk)~EL9bDY>rdfjD#UQy&})twY%#$=2-#U_cT1G
zONW=_(5VY9#y${dr_H_u%TBq5Lf2T=CXHS4;JOOFYH)A=;4Q2f^ZQjf+h5wpSDZoU
z8!oAC93VG?J23<9r}0OTkKtmEq}|C+A6|HukPDcRJ&mbp9`BEuz^iuccQ4hi=Ik-w
zByd(RI(!c8+;iNlhor7FnkewFwW5Ew%yU~5;OM>V(M>DcC;`LzMEnLjO+PAne1#_6
zsf9H<UXWf|wyrT?IeZxrhkKkg_1FS7wWL&nLhygVHSO}Nm+#YCB3PywKEI0w2!;`C
z135ovsGYW%&%P6TN%&D`2GE$2X4|tu9?rj+7m?fOupWq$r3%`%u=X?S%Z|N75uyB*
zV;QZmIN<{fr!S|W^)YmP&o6m_0iC)eyfUMPbC5FAWl0nLzBX<he9u5UJJ?L+_o^T@
z7t`}fi$6ZC(IIOpBi5L9*N)r$AZTX4=kqVhmvM`HPU`pTnO=$QS0|(@2BLK%3Ddvt
zNcy3S`tc4d!IF>#GxH#Irrp=jF<(NQetbZvx8lE?s?>8%<^vt!=NmrftS-7K9ugkq
ztDBK5sHfNx)gD!dC2vLH*ND(n5`$L~Up=B)lt^%8?Q=LTewbvZMeD|Q_nD@Vep`*K
zwjJhEkaYsij=T?}SFw)4HacGHpGJJ4%No7p_<p9<e|A<VuQ7Nqak5B!-8^cenE&yd
z@i;}otA-@-PLm|iau3C!tUC>Rj<|Y)1;g9Tf`V?4Z@J7z{g_-`p=oDy@)tllNem^n
zJIlQMZX3!9vnse8`oP*~l}J8o8rMaQ@Eb4DZuy}6r71#<%6&9H5iL~I!mp7k0<Yv}
ziN{r&lrqg0%YvGTo4=|fpXM`nqFmEU{HyBck1s-7F37ZI|2;U?b^&~o6QvU$M+4{7
zXBP0fzh_Bzowr>iT-mXD&GrBAu)uF`GP^2%b?Htaz&UPlOWIUcZGTz1{Z<Erd9$$*
z><_TQcyccsh^s8-o48jJU+&o&S6cKA=-Q0K(1`I12#us!)3CrX8AjUF*Jfp({2n^j
zS7y`|@~q=n40gXV_F55((RdwSUwL}is4^37R;KhXqsTTtCHhg6Fh7fRm$v7bXTPmZ
z{XOcq5u$KKZo>ZA4>#%e9nIB<#x}Swb3=e6<e`1FabmuWk4V@)v{FD5-xVdZ=;!BV
z3bJ4}QvHY2uy}mUDlURQlF-HUhv<EQnS)qO&8)n_rO4ULJ5vwZmy*oCP%ZNFX8lAi
z&xoLu0k{CXKm|1#F&U|vM#n^>RTr3=+7?|?1L0{WpXUfa`9#{V5D7F+SR%`cIqHms
z^r-!3iD&vEC!~mE@lnLG%eAsGPH5{(Sm-B|iu<<YPXXB_tt(y`V`x7w7<T`>vB;6Q
z=qN89GyFNvF=-Fq7Z4iAFN!pDTG43`SR3iajZ2{0_<dBFJ0a{Xl!%Kij{rwUscp@h
z1asT7uG04v#lu*v+XyqIC<x#5k|6}?>ED#aaL%z2bT*t({nHOL_Fn3#Ew23wI9>{x
zcW>hm|2|texs&@#nla|n6PJF)aDC8mw&?-u)2RDPEcg4uFYVQJFL+I#Qa>mS_S&k{
zU*A`e!aVHoh%^B`1?*esII7Nyh4U%RYP%v4zWnl_ZCe6r^Cr1pIM21u>kYt#$&a##
z@kz(LmDI|VXbin*zG@KSQb*81rjHmTqWtn)_xN&#CsW`5KH~+nHJdCp9^*WM%F4V&
zm#v9LI&rZ=drLGLFqkbhipM_^aXfiv-WctN{#XMrADal{IlZQpm+_Zk2^&9^r|*#9
zGOT+Zx3<SKs|H99|IjrQ#iLDi#kRicx*NqR+^+>skaLgErO-yY+KZ%Ty0o=BrTkfL
z2O&W6Z*bF^1fIP`D()ise7=b3uR5G$eAR~UV`g4_-g%4b(in}srKreaZYzT#gYn4D
z4jbG-P(PzZrdf$Z0`%3Df+utZ&>(0@<ACgcqVUtvw5VwIMb5yw?+jI5z+#q!vo4go
z7mF@upZ*O(Fif@{>F`>Zd(Ha^+BCm35q!aHXZ)<`N#_NQQp1Gy{biI&=m?7O+`nLv
zi)UOhq1gD;OM~kn@1b^kLm)8G?D&~pO$ZIaZfL=k^N0b*d-D*UU##*xu_JKaE*NUu
zP#7}%OOluA6Ttk7-kjC)5s-%2cx_D`J4p~IpkPQ)ZA^oJRDE&)(lmtovVtc7Re#pk
zQz`iR$0Ym}fc*ts=)3HgaD-5-R4?xOm!*nzh2{Ef#5IPthw|4z(>-+9m8|XN9A0YE
z`-z_nG?{|Q#7A*M6iwei2#ba2P#F}+0lk1wY%X9XmwlW^0&-M3^HfdRmtOw)*m<Q@
z<9AhSmR!V-w+M^`&yso{U=pg&dw^g`*Uzo+wfG&`{ME00j-;4SCx6~Vxg=B=x^bu$
zVB{B&5Jm_yJcpA>d~+)i?(-2MxY%LW>GE~*AUf^5`p@4>{{c21G9bEShL?}U5Vge=
zsKi70Dfc$@CE}r8%aX{X-HNN0Oky5vURPO;hwAcEZ=S5*n)s5jjZ8wsrHV`<FOX2g
zHl|938E$#fTLk)VL<cXH@A6FtoCLFxvh&G>suS$KT%K6<P#|$8&2=fjygnUSN9ZM4
zu4uO(0gP6Xj!_|>UI18pE&zBD*Yh$7ms*-9pES$n(>&o=7`m%P%&SeT9te~)2OLUP
zKZ7@sNDhd0Nk>JOQg6#y5+L|~m4s1nZBhzCV2F96Kzpk=)zoGm5ggz3T2X|z>(Fu?
zATBm2NpIGOOXxnH;La`5X3Y(-NV`(IoyucEUpJH(0A^GSM%SfboumTz*#})WAv?C_
zY!3CBaA`r*j5#LK2UB%FolfuC&lsX-WwgoL%Q=JitqII8G8`!1S|7JL=W({JBt!p0
z6=R0Oj&QJ}3Prc=NCdrY&|ogf85!8KZ;-A5D@l4>Qi9j)M#MWT!1lY;EMP$7tdur+
zmxYW9ZCgZYlM&BJSA3PGBu=9egec)Zqk^^$4g~PZ$|oTZno<PYFXFl>#)~9)k4CC=
zfZyWO`d_o6WJ`CbAX?G<x41@r&#k=nnXVhYxRE_KT#Qr44ez#Dc+W99KFO_H4?=7=
z%9~8b;#q!el!mGS2_+asdGVZN*s#%(U%{ny!^566axlec?BExia2r``B@NPE`%gx+
z3>~5+Bi&y`mH)E92^nD?^?amp9<RZvDj#NP!~Dpk8mvI_H2pcc;h8we1G+4qHH#iG
zgX|jIA7cj7d6Qh0kH=iy8vM>HGYkSbfCxlzATPMyom94R{U9g~I!M%+JvPlIK_i>i
zBjMejd5QGR;vk}SeoDIAQz2)XoT~f>g1NhsTBQ1%xp{0JY`25Q+!;-LK>+UXB_2Ft
zi@fI`6?f|l1&bExyUyJ0@pR{sn1qqZ-m6a?VvK~SW9jAJMx>5p9QlYg*L29G*JG2s
z8}3mmrhA7<)Ihs2yxRV}uT|`h;Q|NnyIkLP&%qP0bs_n6Z?N7ltFv=6R^h1?{>%{V
zkYknILw80F4k_^`0`0Zxrgk($^|D{q+g^dtI@6>`76^@fK)X|R26%;4mcXLiUU>Fj
zn#k1Io2mv%C5N4A+mHXO(Em|8;`LG$&*e^tqw`<+BzvBsBL>%#dk%c3Z&)_zIjsk4
zjoObRG^5g6(l}HKJ}Oi2JJa-Cj$Fq1v+Yf_Igk<^a>!KXiYI%cGhi<Z15-?;iKA?!
zq(1GEQTVBWFN3(js#}jc-Mo~Rm4@)49j3dX`{n4WWxm6ru5mJr*87BSVa8I<3nW*b
zR99CSm+X^AKJ@;?und<L%Xey2_$sW2yz{d{mGOtZo%8|Rq4;#`RHaAkR|>D!-itK#
zaG;qz^MbeRTxqz7iYGss=BZXT-vXp9Tz91mg{c%V*(A~W3yVVD#c$7B7^h>oQ_4po
zVn-@zb(U5-z71iuAR)SsCrNhnuo6vi>XL{~p1wU;WAF^)?blX8ZD#o0;vce)=#f4U
zkC12`R}FRLPh^1&@?Xd%k@&37cQ|650MB^9qe3jcAqr0#WpCDi-By$4*A)^e=C1K3
z)7KcHx=bWFu1Nn>ZGnB1JGfmD<yVWQ8br2!?U~FO%;(#Eqd<Ty+@l*Vgzw6)^=%{M
z`~>?qB-Q826B8D^HrH_?F^1R3I;@r}1EeEA%}#UN9l3}>KRe+~Ih8|5AB(56`fMN?
zTer=@{9KzU5=$ij6I+(q475P0Z%7K}TtA1KEEcbbUxl^H%VRr$wJ_evZhYzek7`Wa
zB+a!oMo@Z?sL@ZP&r*1TFd(|RvC#n3ZCAhaoyeAw4#DldBRU-Z(I#&vlpt=RooUFQ
zmv!;#vJ14gZZj^|z$+B!+UN3(;$ID5Yti#d=s^z`Id$s*8a9fwR+VjYXtvWBa-<W?
zPsswE9YHwM(>Z#S;`r6ZDPG|t%UWnjtVUTrjm&FFrTE*b^BO{p2~~uz8;j5P0l2dQ
zx-@faGdTnG_3zS-dhx`z;3fZj)`PZJBHM1S)Eiotgx6S+9r#Ob?dG|rHTREYy1jCY
z&*a`LFsllp)n5&e%-|a{ItNeT)e_6SzB=5*_!zLx>80+DJo5olaoT{9+3#jfpv~4G
zra02_lF#*NIgLIt{@W38ymT&K-uVVn3OnxV-yL1(ag@kTx$pNIaGB3PG|2d&g!G9C
zS|r<(Q%Mmr!7Z24pU{U#ANt-B4g1t*hWy0-F=1ZW!kMy2b}HkT2i`O%2>XkZeOJGr
zB-i0RTexl<gJ!$;*M{}xCNK^ppAk500|(o)ER&yF4jVL-ja=4#$Y4L>2x3X>aeDC*
zxW`RUhf58>zO>c$HRzK8<fCo5K?;^{lVUy!zj3Lz=mH@qowIi)fUxjad$p^e+J4X@
z_EcAeUaK+@?qwAnXJpDSmyVL@{2s8a7&%;ZJ}n$vd3*mOC;ii3na^lrjfMUzu3+`0
zB4PG|*0*D1z6JqIA6ZQ3K_7WEuBb`yj&ZT;Z4;X!b<>dk*^I`)w_OMnd`Sxp_`co%
z#pyL%&asMbXDWDpWiCmzO^l!pjpSubSkvWeNAB)sU>cVkJM!{$-rfOkoomxvZ$J#C
zsI2v9y<-`4e+?k0Yc{evEdIr!%8H6^)|h9OBG>a^_!r31)RbaSa6VbIpp3QhV_mbU
zZ3wE|CxuP{`b%@R)jywJ=#A+h_b;LaZ8#X%T;7Gw6(=X!@zE;Y;T3T%n)Dq_to?qR
z%K1VHhePmFD2A6)jvwA4=aZ6x)qQC*D&Dy3=~fwA$%*Ap-D9FPyR&nv^3UyM+@l<`
zk-tDY3n(=|FkA%pG#)hhgem(Z*O0eX{j}4!ok2eA{iE01C4Pc$KU6h9#hUbJ0#Hem
zFaqG=GI0v!CBNP64XsbsK&4@5*S6RdtoSUy@u6m&xZ(3FDfko-Z?9^o;@_{Wxo{<|
z$r%}__R7@;2$(5`R_Q}D5O^H_G{b9AN=EvpkGJW)zWOlC>om`oP_lM*?*gogM<pHF
z4MEb|CZOi3E^5-D;skW#ysL8Ij3$9c9O$LX3x)h#lf3UGHY+nq>ga6iBNd-U%sRnz
za`ChxprHtPLxPy%7-o?VWIm#yh_~NN{qzw`MBrXGtR$0{P-m<S)bSF5cDHs7Ctv?Q
zBKT|_%V<?#+aTN0-BQc_)a-2UXWB?|l__iRRzap<LjzF;d+OzF${9ukN)mV-I9T<}
zf6%88lusMy>};rN&HE)1r+33$K#SwPo(k?+T9Q6Q`{o7TILaf!21~;C$3T8!0tk`k
z?C+QB4U?O`vpFY@eNXnx-^1Z{WJb#goT-5=jZo#+xwMr`9(fjVPRRmdx3SIxRkWVy
z71n;UH@|`fU?4V5R3c=tOlkIJu#9injDmdqOFE6oi&Mbw1u;DizMq>t3n7U_=vF<h
zsx!mL-~Onfr&7R{Ff0Rj=Nhaus2<^W=+R|0r&Ogov)Ie3aE^bJP=Ml{ndT%u<po!&
zjd$Aof*6^5oNt+d<yV7~o77MVVFBp!S+pbMb<t%w=9qi4`n7+TP47c;n{Lz697*wx
zR^{>nt9E=p%{?_zS9e;8;B;K@ic?m8f}XSqy>2<8oO09woRdPyV%bK7r1}aHAbN?}
zzjYF)b*24&th-mi5EZNV`RRH6?zX^}^^Pl<J>_zgPfRS7UYIQKI~+()U;45vy|NtJ
zeXt_s-s<^=IBja+u3q^5OW~)%>-Nwe_*vwMN9RlgOQPr58)^`mbJueLCivaUB+hj(
zcRyF$rt-XIZdWz?jlWN(PeICj8zyzmUK_S#(cot|CzVKe1eY1k_WSd&`JMA199FIW
zKUWgk1+tt6P4LWmptE1R_uy2~t<vEWhNOodjss-l&YAN~*1j>yhG95kQ{qU>D`-!$
zK`mCoBRJ3qqono-CO##BDu^nNAML{b!5xyUxJ`L}dRtzKU8$k;`5rS#Mg-mJF876C
zBXwkLal!LmrRYK0D{>f)iSI<eXq%ik9_tFf@$HM-ga9_(W%o^g8`g{GL7Q-5`0lG0
zftcrS=aU6@E(GjYaZuzK(rY9TWe*=<G@w({ny-}*#VN6a%D~od=Ahx`#<DtzL&dS7
z9me7IRh>Cq*6Da^!hYV~)j1Oue!F(;?&pyzO7M&&%Yfk+fwgPA*sJejL&A2Ahw93J
zFS;{#ob`5$-}{xr&Q`AHa=XmNLcDkwLT$;sEjmd|pyE#Nm4Dv%u}X?lC8f<pL$dSV
z*;K!&2E@x0&S~8pLt5O5JPi$Oj}hGn3&x*qzN-&S>x1J_58o=J>i|3ZyY4v0Oyn(A
zf;Q=1-jr82aaL=|jJB+*k(y1)FMbzgJPYO-)%>eDmjmD^jt1gTbNibgwJryRu%na)
zc+Pe1ANT<{+Yy#kM^YQH<n}}z`^_{1prk&XNpX6}c4nlz7AuTEWVamiGVd-^cp&I?
z_X1}kcN7-Mq%A|2Ju89+N0lh>HFeI8blf(#6DT|vw9C@kkFX>ojbrk9h&)ir9|++f
zf+Hf4ekY*`em$E^M}EieAtV;pA|xid_5e!KfhO;Ad)wctZivb<)3?L*bM`BN?4Z)(
z>bi`9qoIaq9l1(k;gwG;%<u+29J=b)$LjyXJ1o_!+&&}>ZdLdn?lGCY`M}m5>M<1>
zP8Tl#6r^Lip${KseQsOP*Ss)99lpD{pTZa1eyeKob!Rbt&Z*&_TYVNFg+gXFnaGE{
zUh<R-uK;b3@=25)Z{$#5?Yf^gg^#Gs*CMs6GY(=!rnf3EB?C`un)(MZ4Q#djP`Mpt
zI)I*pDo@7#W}5zGKnQ$@^zq2{8o#dlQq1o0Nig%fk5?swnnh}9wR-q^)W!~e^f~6?
zKH({g^YjJ{j5Qt_DCo4UH*sUJOiT+4I01*HN8EEmP+g^H2F{G;=V}9*6t=MeI7)|s
zuc(EV-jf@mBJ{&vF1S%ToT@yyT(mzLS-76F%a{)~Q+V<kUNPOW%?gq+yq|L>cqE`E
zqZsQ8%$JR32ciBVB<U(Xs<m5NasCX=Zwy-ATA<LDkB27w+G|(O;s9<w2LXWrRG0fs
zzd@84FE9O)N)?gp*Mf$eloXjDq2rgVTmT+sra-z@n&*VgFkCE@!I1~AfF9@huH!H_
zkKhs+`1qiD%We0_1{l1aWDVc{{fFr*qk;wA`Qe%6AAv0{vZwgOeSR3L&Waa58f1li
ztOk~46MAOa1?f$HOC9!8_v_ok+M6|LM8Z^!IlmGz_~DYpa_cb5FF{=`K@$KZ!M$CG
zaOFGP*U4RF`Fm^@#L%hdV)<^`06gQmg!P?T0w@jaZ)me+Ef){AxpTykywW5$8q2RD
z>%!hBFZ~)!Ej`pqyI4$!WMd%pHQ&~Qp97s7ruH*Z0{Kh4Z>eFdkfp%;(xd^WU1R?E
zfiK^5$78N=BuoD_`3rF?yaS8?VemwHZDs8O(N=}l;`YEG@W$5}o^kp%3DE_Ia%1MZ
zZ;wi3T`!<qA2`?Io%xPRqQ&_MK`^16@6dBz>T}+f(R`MBYn&TDZ0@W{_w>@J>^z1k
z{(+Fb(MTR9*{RZ_z?b98>Z`}=P8oxtZ8|32RZ@tnYXoRm|5@u|BH=t}!Lhu!vfVAA
z34o{LeWA>mK~jdjm2oJ#KLApucm0qzr`1_}PRcnsZYlk~@EEY}<H{FA3GZ~jel2M^
zD7BkEb>WJtH?ge|n%f<DMhGwDcZAVL3kMX?p8|_>*LoHJ%_HgruA}T_MoXHTHk$>?
zdCjf5Q|rYfC%BjP(0v=KBRrZXWx81XWyTz5z=3HU4&fY=g^3ZIS>LimC!ziU17fx{
zCh~d}pY98c5AK6C3upElcV+v=sM}fW%Fz7LdPwVCoa@71zKQ3rtREhk;RLCX4hSlp
zH>y9L6z@SvIM3#JRLbKbaSKnU5~M^Mg#WBxKZEG_a^~T6B;oZBEBWV8UG!zwo8ECV
zj0#(4!vWZ!oN#B7?EZ~C>tXGBmmd}Np^dMru8jYH8+H<305^Cc<V;0s-A6WMQTtwP
zCzBk$&v&|WO1Hr9MHSXegaM7SkawB)D~ODr=<!f$us(N~!k&2*e!qJc-5C_-O)FWt
zetbO?ZV22l5y4+k#~8ehjB%2$;d$r1^LQ@VmGKKComH1}EAxV^8$}m;K<D@OavGDh
z(9(ELrDg%4jwM0Lt4?3udohz>lnbC_nh*JwX0a8OxTery2al3$Q23vdp~BnIzV=gE
zN>+AmOw&>)Y)Fk9M}{f$3+A7B^vJ)&_YcS*>C3t#;z>oiL8>k3$%*n}uS)a0Jtf(k
zr<W*0_-9011$riP$H6b1<Ks^+1!$$CgsM|l-CnVf1ur()tbasT^hzfaD+)%aIzPu0
z(enQT05Ev}(*hXjWn6f>@R7trUUGlA0)S)H75eafb!U^U${v9T<78w&TvwJ&@x+sW
zW?zPmsxhMe>h^4akBBwp^BZvp)!=E^!RcHSN3Kjl%#FQRAL5fmibp0dZJnb5R)&Pn
zRRd-?xq3EA#iy4+W8&~qxSJ<;XXA63US9UEaOR6QrSFOI$9@!(iDSTQxbMN#ikx{q
zS#$zR!^u;j$<HUz2K}UztT@+1B(Ea^3D>(FCFxhU%wAE(PMW|G%${y&B<55B31-8=
zm~rwojS-ao%O51-WfleUvFx!V(~_^cD;AaSM^}!z&{5-v`Jyasdh5x{1cVc{X&N0B
z63A@G!#Pr2U$Ttc_b~}js3*}PX7>34h(K<FL_LN`FGJt~a_(=ixP1fY{RIr2ENkWq
zD$%vkyHfV_HP}vvqU<JTzZon;lHQYz=Bq??j^t_GcLhb$r+BH3nKv<so@i@(<EMC*
zE~^U{U1POLVrXU#DAaK%c<1&8iz|Cc?YcDV#gjvAl+?4nexjO=@vAAP2|65j;~YOz
z78_TYL#PE4uZ2W7<o=Dkh4y{5zD_cXK!cb)D~Vu=;?vO-6u!1ClaiIpQRWc7l6oeb
z^WlRtDTH}JrG@6&KJ#bP+6EAcm<rgz#X$K@oqlzEHCz3%v5SpALfD<$qcmc`Z<4?e
zEzU1zfZ{eUzK_gNPEb7bI2SQyrfrc{s6Kt~KY&!?i*E$fvlbCPPC@#Zx@}k<+y1T_
zVsBp+9GZ;#3Q%e{17<ps?(|Q>Dk!GITbJ-#S>xYRdtUEagfrqfj((<dB60!z#=m@F
z>X)Y!I>xWurV#hx=3NvWN-*tuqvMIT`3AN^o0WDDhe+Xh{gVwW+^C#BknA9WpWdAW
zm+%?<t%=Vy{5?E*QPs+$DB%jx<ZqyYRV;=Hz5l697HiKpmul@vEA2Oa6;R*6c#I57
zH(CE|jt@2Z(eur5f0eHWgPM6vfFO3{HCmF$hZEZ6!-SRZ+u_<)f4k__ru@AVw^NeI
zYi~vP6<^;&*Oig&Q;A6b1!K#-gRd!AB#3jpyXYsrw~PeI7c|HsL4jcS-*<lQcPpI(
ziX#LccfycVwC^-#l<3^u0SrR3XjOJKX6sphE~fcfxAQi)5Rii5C~{nH(y|@<SwKr*
zY8b^mb`%vk727{CjrVieJ2y^|q(rN)tMyn((6ldRkTi~%kZ@`R5+rWZ4^Zm`+W3qU
zbnPs^L`yPkg1!5<$x@q55<AduFIj)pHFLP<e$hW)%q<1%S9JeJl{m=AnmJ?hqPo14
zh-Kh-k96TDZzJ8bCpiy0k{Lh&>Jy4u)Ct$&3;Vt%ahF&`<Y$HO*hLwU$Fd=De>&0W
zhFYwxe`Hl91gSUiC6F^}$6MDF+S<S7Gdq9e|9eGY5>B#*1MLO;k9@)SZjDU>*#F`0
z8^+s#6(5W7ZaIiFQm3+B9dpjNe)*_yrC^HKfcfDcpI6_L#q_@ar>kBDFz-=#(lg%V
z+8?BNtD?|hO(?#OKB$tVOcU<@XHK6TLt!szzJ|C6D^BO$ncH!+BRRq>1cXTS!mlMo
zf#8O+3lOg7J#zo;6)O07j2hbsaEVcibrpY@j+ra(Q}B#!L2@Ac)$1c4Gu{1rThO^e
z@2b(XJxutE9Wzf%&#!z6LNt{Sx;T<bMO}yWCs@Q-jPT~oahy)x7O|Q8s{WZ<0&ww*
zRQYzu6}#xr+;mi#1oRb`Y`@bA<r)(^&ImH>@cmL~4I_7VUY2!7GoUrjM6sfndHFDd
zndx&FZW^Hw%4gru{gzjvwgbEm)7pVD%*w$2lSq?^A^HUdac%^WgkOd!_v(I3>-R@0
zZdQOPokufA3qZ|#aX;qJoS+!6r5%gKFQ0;Se~Ha(jA8+NGuM|eU$g5Bw+yc#jAGxe
zb<0mK0UIS8YQQ20VeL*;(hyCqliBrbta!B&+<G>58G6BPr-V!bjErb$NYQe?P+u3g
z-S{sv?k*Da{a_4bV6GEW7!YOn6>V%7|D|DQKJJGIh`t#uP7kHb-W<rTdcp9&Qlp^8
zc0?>*8Wb<~9#7#%2Xww9MIR$;cEr7hyVX8=^YnK3G7e<LbT#+G>EIo}bu86ur)rbQ
zjT+a`obiSTUYYuj!`zC({_aEpbvjhxDx8v!+4%;kOc_~=nxqFW&-Y7|a9Kxc6hOC$
zZp;3-)kvq0|Hor4`Ak)R%YO{pku*+pYBK`Sa^)}YWsuPibs}Xd$A8Cj@hk5EkUbjs
zIrLW^hXiZK7l%!GZ2(hV<GYN#Ze#~<U0UDi3H~R6`9CQ7hwIyKk}DBziiQ-{0Tg6Z
KrE4TjL;oM)bnH|B

literal 0
HcmV?d00001

diff --git a/src/mock/deptTree.ts b/src/mock/deptTree.ts
new file mode 100644
index 0000000..89e993f
--- /dev/null
+++ b/src/mock/deptTree.ts
@@ -0,0 +1,34 @@
+import Mock from 'mockjs';
+import setupMock, { successResponseWrap } from '@/utils/setup-mock';
+
+// 生成部门树数据
+const deptTree = Mock.mock({
+  'totalDept': {
+    'dept': '总部门',
+    'children': [
+      {
+        'dept': '部门1',
+        'members': [
+          {'name': '@cname'},
+          {'name': '@cname'}
+        ]
+      },
+      {
+        'dept': '部门2',
+        'members': [
+          {'name': '@cname'},
+          {'name': '@cname'}
+        ]
+      }
+    ]
+  }
+});
+
+setupMock({
+  setup: () => {
+    Mock.mock(new RegExp('/api/deptTree'), () => {
+      return successResponseWrap(deptTree);
+    })
+  }
+})
+// 假设你需要将这个数据作为一个 API 的响应
diff --git a/src/router/routes/modules/iot.ts b/src/router/routes/modules/iot.ts
index bc65654..2cd262f 100644
--- a/src/router/routes/modules/iot.ts
+++ b/src/router/routes/modules/iot.ts
@@ -46,6 +46,29 @@ const IOT: AppRouteRecordRaw = {
         permissions: ['*'],
       },
     },
+    {
+      path: 'device/:id',
+      name: 'deviceDetail',
+      component: () => import('@/views/iot/device/components/device-detail.vue'),
+      meta: {
+        title: '设备详情',
+        requiresAuth: true,
+        showInMenu: false,
+        permissions: ['*'],
+      },
+    },
+    {
+      path: 'product/tsl/:id',
+      name: 'productTsl',
+      component: () => import('@/views/iot/product/components/product-tsl.vue'),
+      meta: {
+        title: '物模型',
+        requiresAuth: true,
+        showInMenu: false,
+        permissions: ['*'],
+      },
+    }
+
   ],
 };
 
diff --git a/src/views/dashboard/workplace/components/announcement.vue b/src/views/dashboard/workplace/components/announcement.vue
new file mode 100644
index 0000000..d8ab12a
--- /dev/null
+++ b/src/views/dashboard/workplace/components/announcement.vue
@@ -0,0 +1,94 @@
+<template>
+  <a-card
+    class="general-card"
+    title='公告'
+    :header-style="{ paddingBottom: '0' }"
+    :body-style="{ padding: '15px 20px 13px 20px' }"
+  >
+    <template #extra>
+      <a-link @click="$router.push({ name: 'Bulletins' })">查看更多</a-link>
+    </template>
+    <div>
+      <div v-for="(item, idx) in renderData" :key="idx" class="item">
+        <a-tag color=blue size="small">通知</a-tag>
+        <span class="item-content" @click="$router.push({name:'Details',params:{id:item.id}})">
+          {{ item.title }}
+        </span>
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+
+  // 获取公告列表
+  import { BulletinsRecord } from '@/api/bulletins';
+  import { useBulletinsStore } from '@/store';
+  import { ref } from 'vue';
+
+  const bulletinsStore = useBulletinsStore();
+  const renderData = ref<BulletinsRecord[]>([]);
+
+  // 获取公告列表
+  const fetchData = async (
+    params: BulletinsRecord = { current: 1 ,size: 5}
+  ) => {
+    try {
+      const res = await bulletinsStore.getBulletinsList(params);
+      renderData.value = res.data.records;
+    } catch (err) {
+      // you can report use errorHandler or other
+    }
+  };
+  fetchData();
+
+
+  const list = [
+    {
+      type: 'orangered',
+      label: '活动',
+      content: '内容最新优惠活动',
+    },
+    {
+      type: 'cyan',
+      label: '消息',
+      content: '新增内容尚未通过审核，详情请点击查看。',
+    },
+    {
+      type: 'blue',
+      label: '通知',
+      content: '当前产品试用期即将结束，如需续费请点击查看。',
+    },
+    {
+      type: 'blue',
+      label: '通知',
+      content: '1月新系统升级计划通知',
+    },
+    {
+      type: 'cyan',
+      label: '消息',
+      content: '新增内容已经通过审核，详情请点击查看。',
+    },
+  ];
+</script>
+
+<style scoped lang="less">
+  .item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 24px;
+    margin-bottom: 4px;
+    .item-content {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-left: 4px;
+      color: var(--color-text-2);
+      text-decoration: none;
+      font-size: 13px;
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/workplace/components/quick-operation.vue b/src/views/dashboard/workplace/components/quick-operation.vue
new file mode 100644
index 0000000..fad1a21
--- /dev/null
+++ b/src/views/dashboard/workplace/components/quick-operation.vue
@@ -0,0 +1,35 @@
+<template>
+  <a-card
+    class="general-card"
+    :title="$t('workplace.quick.operation')"
+    :header-style="{ paddingBottom: '0' }"
+    :body-style="{ padding: '24px 20px 0 20px' }"
+  >
+    <template #extra>
+      <a-link>{{ $t('workplace.quickOperation.setup') }}</a-link>
+    </template>
+    <a-row :gutter="8">
+      <a-col v-for="link in links" :key="link.text" :span="8" class="wrapper">
+        <div class="icon">
+          <component :is="link.icon" />
+        </div>
+        <a-typography-paragraph class="text">
+          {{ $t(link.text) }}
+        </a-typography-paragraph>
+      </a-col>
+    </a-row>
+    <a-divider class="split-line" style="margin: 0" />
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  const links = [
+    { text: 'workplace.contentManagement', icon: 'icon-file' },
+    { text: 'workplace.contentStatistical', icon: 'icon-storage' },
+    { text: 'workplace.advanced', icon: 'icon-settings' },
+    { text: 'workplace.onlinePromotion', icon: 'icon-mobile' },
+    { text: 'workplace.contentPutIn', icon: 'icon-fire' },
+  ];
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/dashboard/workplace/components/recently-visited.vue b/src/views/dashboard/workplace/components/recently-visited.vue
new file mode 100644
index 0000000..805c4f7
--- /dev/null
+++ b/src/views/dashboard/workplace/components/recently-visited.vue
@@ -0,0 +1,44 @@
+<template>
+  <a-card
+    class="general-card"
+    :title="$t('workplace.recently.visited')"
+    :header-style="{ paddingBottom: '0' }"
+    :body-style="{ paddingTop: '26px' }"
+  >
+    <div style="margin-bottom: -1rem">
+      <a-row :gutter="8">
+        <a-col v-for="link in links" :key="link.text" :span="8" class="wrapper">
+          <div class="icon">
+            <component :is="link.icon" />
+          </div>
+          <a-typography-paragraph class="text">
+            {{ $t(link.text) }}
+          </a-typography-paragraph>
+        </a-col>
+      </a-row>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  const links = [
+    {
+      text: 'workplace.contentManagement',
+      icon: 'icon-storage',
+    },
+    {
+      text: 'workplace.contentStatistical',
+      icon: 'icon-file',
+    },
+    {
+      text: 'workplace.advanced',
+      icon: 'icon-settings',
+    },
+  ];
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-card-header-title) {
+    line-height: inherit;
+  }
+</style>
diff --git a/src/views/iot/device/components/device-detail.vue b/src/views/iot/device/components/device-detail.vue
index 4d47e58..2dc6de9 100644
--- a/src/views/iot/device/components/device-detail.vue
+++ b/src/views/iot/device/components/device-detail.vue
@@ -1,70 +1,102 @@
 <template>
-  <a-button
-    type="outline"
-    size="small"
-    status="success"
-    style="padding: 7px; margin-right: 10px"
-    @click="handleClick"
-  >
-    <template #icon><icon-list /></template>
-    详情
-  </a-button>
-
-  <a-modal
-    width="600px"
-    :visible="visible"
-    @cancel="handleCancel"
-  >
-    <template #title>设备详情</template>
-    <a-descriptions style="margin-top: 20px" :data="formData" size="large" :title=formData.name :column="1">
-      <a-descriptions-item label="产品名称">{{formData.productId}}</a-descriptions-item>
-      <a-descriptions-item label="硬件版本">{{formData.hardwareVersion}}</a-descriptions-item>
-      <a-descriptions-item label="固件版本">{{formData.firmwareVersion}}</a-descriptions-item>
-      <a-descriptions-item label="扩展属性">{{formData.extendParams}}</a-descriptions-item>
-    </a-descriptions>
-
-    <template #footer>
-<!--      <a-button class="editor-button"  @click="handleCancel">取消</a-button>-->
-      <a-button class="editor-button"  type="primary" @click="handleCancel">确定</a-button>
-    </template>
-  </a-modal>
+  <div class="container">
+    <Breadcrumb :items="['物联网管理', '设备管理', '设备详情']" />
+    <a-card class="general-card" title=" ">
+      <a-descriptions v-model="renderData" size="large">
+        <template #title><h3 style="margin-top: -15px">设备详情</h3></template>
+        <a-descriptions-item label="设备名称">{{renderData.name }}</a-descriptions-item>
+        <a-descriptions-item label="硬件版本">{{renderData.hardwareVersion }}</a-descriptions-item>
+        <a-descriptions-item label="固件版本">{{renderData.firmwareVersion }}</a-descriptions-item>
+        <a-descriptions-item label="所属产品">{{renderData.productId }}</a-descriptions-item>
+<!--        <a-descriptions-item label="备注">{{renderData.remark }}</a-descriptions-item>-->
+        <a-descriptions-item label="创建时间">{{dayjs(renderData.createTime).format('YYYY-MM-DD HH:mm:ss') }}</a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+    <a-card class="general-card" style="margin-top: 10px">
+      <a-tabs :active-key="activeKey"  @tab-click="handleMenuClick" style="padding-top: 20px">
+        <a-tab-pane key="1" tab="参数" title="扩展属性">
+          <a-table :columns="columns" :data="renderData.extendParams" />
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="基本信息" title="基本信息">
+          基本信息
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="执行服务" title="执行服务"> 执行服务内容 </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </div>
 </template>
 
 <script lang="ts" setup>
-  import useVisible from '@/hooks/visible';
-  import {  defineEmits, PropType, ref } from 'vue';
-  import { DeviceCreateRecord } from '@/api/device';
-  import '@wangeditor/editor/dist/css/style.css'
+  import dayjs from 'dayjs';
+  import { useRoute } from 'vue-router';
+  import { onMounted, ref } from 'vue';
+  import { queryDeviceDetail } from '@/api/device';
 
-
-  const props = defineProps({
-    prem: {
-      type: Object as PropType<DeviceCreateRecord>,
+  const route = useRoute();
+  const id = Number(route.params.id);
+  const columns = [
+    {
+      title: '参数名称',
+      dataIndex: 'name',
+      slotName: 'name',
     },
-    isCreate: Boolean,
-  });
-  const emit = defineEmits(['refresh']);
-  const { visible, setVisible } = useVisible(false);
-
-  const formData = ref<any>({
-    ...props.prem,
-  });
-
-
-  // 组件被点击
-  const handleClick = () => {
-    setVisible(true);
+    {
+      title: '参数标识',
+      dataIndex: 'identifier',
+      slotName: 'identifier',
+    },
+    {
+      title: '数据类型',
+      dataIndex: 'dataType',
+      slotName: 'dataType',
+    },
+    {
+      title: '参数类型',
+      dataIndex: 'type',
+      slotName: 'type',
+    },
+  ];
+  const activeKey = ref('1');
+  const renderData = ref([]);
+  const fetchData = async (Id: number) => {
+    const res = await queryDeviceDetail(Id);
+    renderData.value = res.data;
   };
-
-  // 关闭
-  const handleCancel = async () => {
-    setVisible(false);
+  const handleMenuClick = (e: any) => {
+    activeKey.value = e;
   };
-
+  onMounted(() => {
+    fetchData(id);
+  });
 </script>
 
 <style scoped>
-  .editor-button{
-    position: static
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+
+  h1 {
+    font-size: 24px;
+    margin-bottom: 10px;
+  }
+
+  .meta span {
+    margin-right: 20px;
+  }
+
+  .attachments li {
+    margin-bottom: 10px;
+  }
+
+  .attachments a {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #1890ff;
+    text-decoration: none;
+  }
+
+  .attachments a:hover {
+    text-decoration: underline;
   }
 </style>
diff --git a/src/views/iot/device/components/device-edit.vue b/src/views/iot/device/components/device-edit.vue
index 540db64..7254c53 100644
--- a/src/views/iot/device/components/device-edit.vue
+++ b/src/views/iot/device/components/device-edit.vue
@@ -82,13 +82,25 @@
       <a-form-item
         field="extendParams"
         label="扩展属性"
-        :rules="[{ required: true, message: '扩展属性不能为空' }]"
-        :validate-trigger="['change']"
       >
-        <a-input
-          v-model="formData.extendParams"
-          placeholder='请输入扩展属性'
-        />
+<!--        <a-input-->
+<!--          v-model="formData.extendParams"-->
+<!--          placeholder='请输入扩展属性'-->
+<!--        />-->
+        <div style="width: 100%">
+          <div style="width: 100%;margin-bottom: 5px; ">
+            <a-space v-for="(param,index) in paramsData" :key="index" style="margin-bottom: 5px">
+              <a-input v-model="param.name"  placeholder="名称" allow-clear />
+              <a-input v-model="param.identifier"  placeholder="标识" allow-clear />
+              <a-select v-model="param.dataType" :options="dataTypeOptions" allow-search />
+              <a-select v-model="param.type" :options="typeOptions" allow-search />
+              <a-button type="text"  @click="handleDeleteParams(index)"><icon-minus-circle /></a-button>
+            </a-space>
+          </div>
+          <a-button  @click="handleAddParams" style="width: 100%" >
+            <icon-plus />
+          </a-button>
+        </div>
       </a-form-item>
     </a-form>
 
@@ -108,6 +120,7 @@
   import { useMessageStore } from '@/store';
   import '@wangeditor/editor/dist/css/style.css'
   import { createDevice, updateDevice } from '@/api/device';
+  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
 
   const props = defineProps({
     prem: {
@@ -115,6 +128,58 @@
     },
     isCreate: Boolean,
   });
+  const paramsData = ref([
+    {
+      name: '',
+      identifier: '',
+      dataType: '',
+      type: '',
+    },
+  ]);
+  const dataTypeOptions = computed<SelectOptionData[]>(() => [
+    {
+      label: '整型',
+      value: 'INT',
+    },
+    {
+      label: '单精度浮点型',
+      value: 'FLOAT',
+    },
+    {
+      label: '双精度浮点型',
+      value: 'DOUBLE',
+    },
+    {
+      label: '布尔型',
+      value: 'BOOLEAN',
+    },
+    {
+      label: '字符串',
+      value: 'STRING',
+    },
+    {
+      label: '日期型',
+      value: 'DATE',
+    },
+    {
+      label: '透传',
+      value: 'RAW',
+    },
+  ]);
+  const typeOptions = computed<SelectOptionData[]>(() => [
+    {
+      label: '物模型输入',
+      value: 'INPUT',
+    },
+    {
+      label: '物模型输出',
+      value: 'OUTPUT',
+    },
+    {
+      label: '读写属性',
+      value: 'RW',
+    },
+  ]);
   const emit = defineEmits(['refresh']);
   const modalTitle = computed(() => {
     return props.isCreate ? '创建设备' : '编辑设备';
@@ -142,7 +207,22 @@
       options.value = []
     }
   };
-
+  // 点击添加参数
+  const handleAddParams = () => {
+    // paramsVisible.value = true;
+    paramsData.value.push({
+      name: '',
+      identifier: '',
+      dataType: '',
+      type: '',
+    });
+  };
+  // 删除参数
+  const handleDeleteParams = (record: any) => {
+    if (record !== -1) {
+      paramsData.value.splice(record, 1);
+    }
+  };
   // 组件被点击
   const handleClick = () => {
     setVisible(true);
@@ -153,6 +233,7 @@
     const valid = await CreateRef.value?.validate();
     if (!valid) {
       // 新增
+      formData.value.extendParams = paramsData.value;
       if (props.isCreate) {
         // formData.value.username = formData.value.email;
         const res = await createDevice(formData.value);
diff --git a/src/views/iot/device/index.vue b/src/views/iot/device/index.vue
index 29470e9..462d1ed 100644
--- a/src/views/iot/device/index.vue
+++ b/src/views/iot/device/index.vue
@@ -162,17 +162,16 @@
           {{ record.online == true? '是' : '否' }}
         </template>
         <template #operations="{ record }">
-<!--          <a-button-->
-<!--            type="outline"-->
-<!--            size="small"-->
-<!--            status="success"-->
-<!--            style="padding: 7px; margin-right: 10px"-->
-<!--            @click="openDetail(record.id)"-->
-<!--          >-->
-<!--            <template #icon><icon-list /></template>-->
-<!--            详情-->
-<!--          </a-button>-->
-          <DeviceDetail :prem="record" />
+          <a-button
+            type="outline"
+            size="small"
+            status="success"
+            style="padding: 7px; margin-right: 10px"
+            @click="openDetail(record.id)"
+          >
+            <template #icon><icon-list /></template>
+            详情
+          </a-button>
           <DeviceEdit
             ref="editUserRef"
             :prem="record"
@@ -338,7 +337,7 @@
   // 打开详情
   function openDetail(id:number): void{
     const url = router.resolve({
-      name: 'Detail',
+      name: 'deviceDetail',
       params: {id}
     }).href;
     router.push(url);
diff --git a/src/views/iot/product/components/product-detail.vue b/src/views/iot/product/components/product-detail.vue
index e16d117..323d7f7 100644
--- a/src/views/iot/product/components/product-detail.vue
+++ b/src/views/iot/product/components/product-detail.vue
@@ -1,20 +1,27 @@
 <template>
   <div class="container">
-    <Breadcrumb :items="['物联网管理', '产品管理','产品详情']" />
+    <Breadcrumb :items="['物联网管理', '产品管理', '产品详情']" />
     <a-card class="general-card" title=" ">
-      <div class="announcement-detail">
-        <a-descriptions :data="renderData" size="large" title="产品详情" bordered >
-          <a-descriptions-item label="产品名称">{{renderData.name}}</a-descriptions-item>
-          <a-descriptions-item label="产品类型">{{renderData.productType}}</a-descriptions-item>
-          <a-descriptions-item label="产品型号">{{renderData.model}}</a-descriptions-item>
-          <a-descriptions-item label="通讯协议">{{renderData.link}}</a-descriptions-item>
-          <a-descriptions-item label="备注">{{renderData.remark}}</a-descriptions-item>
-          <a-descriptions-item label="创建时间">{{dayjs(renderData.createTime).format('YYYY-MM-DD HH:mm:ss')}}</a-descriptions-item>
-          <a-descriptions-item label="扩展属性">
-            <a-table :columns="columns" :data="renderData.params" row-key="id" :pagination="false"/>
-          </a-descriptions-item>
-        </a-descriptions>
-      </div>
+      <a-descriptions v-model="renderData" size="large">
+        <template #title><h3 style="margin-top: -15px">产品详情</h3></template>
+        <a-descriptions-item label="产品名称">{{renderData.name }}</a-descriptions-item>
+        <a-descriptions-item label="产品类型">{{renderData.productType }}</a-descriptions-item>
+        <a-descriptions-item label="产品型号">{{renderData.model }}</a-descriptions-item>
+        <a-descriptions-item label="通讯协议">{{renderData.link }}</a-descriptions-item>
+        <a-descriptions-item label="备注">{{renderData.remark }}</a-descriptions-item>
+        <a-descriptions-item label="创建时间">{{dayjs(renderData.createTime).format('YYYY-MM-DD HH:mm:ss') }}</a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+    <a-card class="general-card" style="margin-top: 10px">
+      <a-tabs :active-key="activeKey"  @tab-click="handleMenuClick" style="padding-top: 20px">
+        <a-tab-pane key="1" tab="参数" title="参数">
+          <a-table :columns="columns" :data="renderData.params" />
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="基本信息" title="基本信息">
+          基本信息
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="执行服务" title="执行服务"> 执行服务内容 </a-tab-pane>
+      </a-tabs>
     </a-card>
   </div>
 </template>
@@ -27,7 +34,7 @@
 
   const route = useRoute();
   const id = Number(route.params.id);
-  const columns=[
+  const columns = [
     {
       title: '参数名称',
       dataIndex: 'name',
@@ -49,72 +56,34 @@
       slotName: 'type',
     },
   ];
-  const renderData = ref<any>(
-    {
-      name: '产品名称',
-      productType: '设备',
-      model: '123456',
-      link: 'TCP',
-      remark: '123456',
-      createTime: '2023-08-08 10:10:10',
-      params:[
-        {
-          name:'设备名称',
-          identifier:'1.0.0',
-          dataType:'1.0.0',
-          type:'123456',
-        },
-        {
-          name:'设备名称',
-          identifier:'1.0.0',
-          dataType:'1.0.0',
-          type:'123456',
-        },
-        {
-          name:'设备名称',
-          identifier:'1.0.0',
-          dataType:'1.0.0',
-          type:'123456',
-        },
-      ]
-    },
-  );
-  // const fetchData = async (Id: number) => {
-  //   const res = await queryProductDetail(Id);
-  //   renderData.value = res.data;
-  // };
-  // onMounted(() => {
-  //   fetchData(id);
-  // });
+  const activeKey = ref('1');
+  const renderData = ref([]);
+  const fetchData = async (Id: number) => {
+    const res = await queryProductDetail(Id);
+    renderData.value = res.data;
+  };
+  const handleMenuClick = (e: any) => {
+    activeKey.value = e;
+  };
+  onMounted(() => {
+    fetchData(id);
+  });
 </script>
 
-
 <style scoped>
   .container {
     padding: 0 20px 20px 20px;
   }
 
-  .announcement-detail {
-    min-width: 800px;
-    max-width: 800px;
-    margin: auto;
-    padding: 20px;
-    border: 1px solid #ddd;
-    background-color: #fff; /* 白色背景，与淡蓝色背景区分开来 */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-
   h1 {
     font-size: 24px;
     margin-bottom: 10px;
   }
 
-
   .meta span {
     margin-right: 20px;
   }
 
-
   .attachments li {
     margin-bottom: 10px;
   }
@@ -131,5 +100,3 @@
     text-decoration: underline;
   }
 </style>
-
-
diff --git a/src/views/iot/product/components/product-edit.vue b/src/views/iot/product/components/product-edit.vue
new file mode 100644
index 0000000..fd2404a
--- /dev/null
+++ b/src/views/iot/product/components/product-edit.vue
@@ -0,0 +1,445 @@
+<template>
+  <a-button v-if="props.isCreate" type="primary" @click="handleClick">
+    <template #icon><icon-plus /></template>
+    新建
+  </a-button>
+  <a-button
+    v-if="!props.isCreate"
+    type="outline"
+    size="small"
+    :style="{ marginRight: '10px', padding: '7px' }"
+    @click="handleClick"
+  >
+    <template #icon><icon-edit /></template>
+    修改
+  </a-button>
+
+  <a-modal
+    width="900px"
+    height="500px"
+    :visible="visible"
+    @cancel="handleCancel"
+  >
+    <template #title>{{ modalTitle }}</template>
+    <a-form
+      ref="CreateRef"
+      :model="formData"
+      :style="{ width: '800px',height: '420px' }"
+    >
+      <!-- 产品名称 -->
+      <a-form-item
+        field="name"
+        label='产品名称'
+        :rules="[{ required: true, message: '产品名称不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="formData.name"
+          placeholder='请输入产品名称'
+        />
+      </a-form-item>
+      <!-- 产品分类-->
+      <a-form-item
+        field="productType"
+        label="产品分类"
+        :rules="[{ required: true, message: '产品分类不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="formData.productType"
+          placeholder='请选择产品分类'
+        />
+      </a-form-item>
+      <!-- 产品类型 -->
+      <a-form-item
+        field="model"
+        label="类型"
+        :rules="[{ required: true, message: '产品类型不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="formData.model"
+          placeholder='请输入产品类型'
+        />
+      </a-form-item>
+      <!-- 接入方式 -->
+      <a-form-item
+        field="link"
+        label="接入"
+        :rules="[{ required: true, message: '接入方式不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-select
+          v-model="formData.link"
+          placeholder='请输入接入方式'
+          :options="linkOptions"
+          allow-search
+        />
+      </a-form-item>
+      <!-- 备注 -->
+      <a-form-item
+        field="remark"
+        label="备注"
+      >
+        <a-input
+          v-model="formData.remark"
+          placeholder='请输入备注'
+        />
+      </a-form-item>
+      <!-- 参数   -->
+      <a-form-item
+        field="params"
+        label="参数"
+      >
+<!--        <a-table-->
+<!--          :columns="columns"-->
+<!--          :data="paramsData"-->
+<!--          :bordered="false"-->
+<!--          :pagination="false"-->
+<!--          :table-layout-fixed="true"-->
+<!--          :show-header="false"-->
+<!--          :hoverable="false"-->
+<!--          :column-resizable="true"-->
+<!--          :filter-icon-align-left="true"-->
+<!--          :body-cell-class="{ padding: '0px',marginLeft: '-10px' }"-->
+<!--        >-->
+<!--          <template #name="{ record }">-->
+<!--            <a-input-->
+<!--              v-model="record.name"-->
+<!--              placeholder="名称"-->
+<!--            />-->
+<!--          </template>-->
+<!--          <template #identifier="{ record }">-->
+<!--            <a-input-->
+<!--              v-model="record.identifier"-->
+<!--              placeholder="标识"-->
+<!--            />-->
+<!--          </template>-->
+<!--          <template #dataType="{ record }">-->
+<!--            <a-select-->
+<!--              v-model="record.dataType"-->
+<!--              :options="dataTypeOptions"-->
+<!--              allow-search-->
+<!--            />-->
+<!--          </template>-->
+<!--          <template #type="{ record }">-->
+<!--            <a-select-->
+<!--              v-model="record.type"-->
+<!--              :options="typeOptions"-->
+<!--              allow-search-->
+<!--            />-->
+<!--          </template>-->
+<!--          <template #operation="{ record }">-->
+<!--            <a-button type="text"  @click="handleDeleteParams(record)"><icon-minus-circle /></a-button>-->
+<!--          </template>-->
+<!--          <template #footer>-->
+<!--            <a-button  @click="handleAddParams" style="width: 100%" >-->
+<!--              <icon-plus />-->
+<!--            </a-button>-->
+<!--          </template>-->
+<!--        </a-table>-->
+        <div style="width: 100%">
+          <div style="width: 100%;margin-bottom: 5px; ">
+            <a-space v-for="(param,index) in paramsData" :key="index" style="margin-bottom: 5px">
+              <a-input v-model="param.name"  placeholder="名称" allow-clear />
+              <a-input v-model="param.identifier"  placeholder="标识" allow-clear />
+              <a-select v-model="param.dataType" :options="dataTypeOptions" allow-search />
+              <a-select v-model="param.type" :options="typeOptions" allow-search />
+              <a-button type="text"  @click="handleDeleteParams(index)"><icon-minus-circle /></a-button>
+            </a-space>
+          </div>
+          <a-button  @click="handleAddParams" style="width: 100%" type="outline">
+            <icon-plus />
+          </a-button>
+        </div>
+      </a-form-item>
+    </a-form>
+
+    <template #footer>
+      <a-button class="editor-button"  @click="handleCancel">取消</a-button>
+      <a-button class="editor-button"  type="primary" @click="handleSubmit">确定</a-button>
+    </template>
+  </a-modal>
+
+  <a-modal
+    width="900px"
+    :visible="paramsVisible"
+    @cancel="paramsCancel"
+  >
+    <template #title>添加参数</template>
+    <a-form
+      ref="CreateRef"
+      :model="paramsData"
+      :style="{ width: '650px' }"
+    >
+      <!-- 添加参数  -->
+      <a-form-item
+        field="name"
+        label="参数名称"
+        :rules="[{ required: true, message: '参数名称不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="paramsData.name"
+          placeholder='请选择参数名称'
+        />
+      </a-form-item>
+      <!-- 参数标识  -->
+      <a-form-item
+        field="identifier"
+        label="参数标识"
+        :rules="[{ required: true, message: '参数标识不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="paramsData.identifier"
+          placeholder='请选择参数标识'
+        />
+      </a-form-item>
+
+      <a-form-item
+        field="dataType"
+        label="数据类型"
+        :rules="[{ required: true, message: '数据类型不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-select
+          v-model="paramsData.dataType"
+          placeholder='请输入数据类型'
+          :options="dataTypeOptions"
+          allow-search
+        />
+      </a-form-item>
+      <a-form-item
+        field="type"
+        label="参数类型"
+        :rules="[{ required: true, message: '参数类型不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-select
+          v-model="paramsData.type"
+          placeholder='请输入参数类型'
+          :options="typeOptions"
+          allow-search
+        />
+      </a-form-item>
+    </a-form>
+
+    <template #footer>
+      <a-button class="editor-button"  @click="paramsCancel">取消</a-button>
+      <a-button class="editor-button"  type="primary" @click="paramsSubmit">确定</a-button>
+    </template>
+  </a-modal>
+
+</template>
+
+<script lang="ts" setup>
+  import useVisible from '@/hooks/visible';
+  import { computed, defineEmits, onMounted, PropType, ref } from 'vue';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { Message } from '@arco-design/web-vue';
+  import '@wangeditor/editor/dist/css/style.css'
+  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
+  import { createProduct, ProductCreateRecord, queryProductDetail, updateProduct } from '@/api/product';
+
+  const props = defineProps({
+    prem: {
+      type: Object as PropType<ProductCreateRecord>,
+    },
+    isCreate: Boolean,
+    id: Number,
+  });
+  const emit = defineEmits(['refresh']);
+  const modalTitle = computed(() => {
+    return props.isCreate ? '创建产品' : '编辑产品';
+  });
+  const { visible, setVisible } = useVisible(false);
+  const CreateRef = ref<FormInstance>();
+  const formData = ref<any>({
+    // params: [],
+    // ...props.prem,
+  });
+  const columns=[
+    {
+      title: '参数名称',
+      dataIndex: 'name',
+      slotName: 'name',
+      width: '120',
+    },
+    {
+      title: '参数标识',
+      dataIndex: 'identifier',
+      slotName: 'identifier',
+      width: '120',
+      align: 'left'
+    },
+    {
+      title: '数据类型',
+      dataIndex: 'dataType',
+      slotName: 'dataType',
+      width: '150',
+      align: 'left'
+    },
+    {
+      title: '参数类型',
+      dataIndex: 'type',
+      slotName: 'type',
+      width: '180',
+      align: 'left'
+    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      slotName: 'operation',
+      align: 'left'
+    }
+  ];
+  const paramsData = ref([
+    {
+      name: '',
+      identifier: '',
+      dataType: '',
+      type: '',
+    },
+  ]);
+  const linkOptions = computed<SelectOptionData[]>(() => [
+    {
+      label: 'TCP',
+      value: 'TCP',
+    },
+    {
+      label: 'HTTP',
+      value: 'HTTP',
+    },
+    {
+      label: 'MQTT',
+      value: 'MQTT',
+    },
+  ]);
+  const dataTypeOptions = computed<SelectOptionData[]>(() => [
+    {
+      label: '整型',
+      value: 'INT',
+    },
+    {
+      label: '单精度浮点型',
+      value: 'FLOAT',
+    },
+    {
+      label: '双精度浮点型',
+      value: 'DOUBLE',
+    },
+    {
+      label: '布尔型',
+      value: 'BOOLEAN',
+    },
+    {
+      label: '字符串',
+      value: 'STRING',
+    },
+    {
+      label: '日期型',
+      value: 'DATE',
+    },
+    {
+      label: '透传',
+      value: 'RAW',
+    },
+  ]);
+  const typeOptions = computed<SelectOptionData[]>(() => [
+    {
+      label: '物模型输入',
+      value: 'INPUT',
+    },
+    {
+      label: '物模型输出',
+      value: 'OUTPUT',
+    },
+    {
+      label: '读写属性',
+      value: 'RW',
+    },
+  ]);
+  const paramsVisible = ref(false);
+  const paramsName = ref([]);
+  const fetchData = async (Id: number | undefined) => {
+    const res = await queryProductDetail(Id);
+    formData.value = res.data;
+  };
+  // 组件被点击
+  const handleClick = () => {
+    setVisible(true);
+    if (!props.isCreate) {
+      fetchData(props.id);
+    }
+  };
+  // 提交
+  const handleSubmit = async () => {
+    const valid = await CreateRef.value?.validate();
+    if (!valid) {
+      // 新增
+      if (props.isCreate) {
+        formData.value.params = paramsData.value;
+        // formData.value.username = formData.value.email;
+        const res = await createProduct(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: '新建成功',
+            duration: 5 * 1000,
+          });
+          emit('refresh');
+          setVisible(false);
+        }
+        CreateRef.value?.resetFields();
+      } else {
+        // 编辑
+        const res = await updateProduct(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: '修改成功',
+            duration: 5 * 1000,
+          });
+          emit('refresh');
+          setVisible(false);
+        }
+      }
+    }
+  };
+
+  // 点击添加参数
+  const handleAddParams = () => {
+    // paramsVisible.value = true;
+    paramsData.value.push({
+      name: '',
+      identifier: '',
+      dataType: '',
+      type: '',
+    });
+  };
+  // 删除参数
+  const handleDeleteParams = (record: any) => {
+    if (record !== -1) {
+      paramsData.value.splice(record, 1);
+    }
+  };
+  // 点击取消
+  const paramsCancel = () => {
+    paramsVisible.value = false;
+  };
+  // 参数模态框提交
+  const paramsSubmit = () => {
+    paramsVisible.value = false;
+    formData.value.params.push(paramsData.value);
+    paramsName.value.push(paramsData.value.name);
+  }
+  // 关闭
+  const handleCancel = async () => {
+    setVisible(false);
+  };
+</script>
+
+<style scoped>
+  .editor-button{
+    position: static
+  }
+</style>
diff --git a/src/views/iot/product/components/product-tsl.vue b/src/views/iot/product/components/product-tsl.vue
new file mode 100644
index 0000000..7ea5aba
--- /dev/null
+++ b/src/views/iot/product/components/product-tsl.vue
@@ -0,0 +1,648 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['物联网管理', '产品管理', '物模型']" />
+    <a-card class="general-card" title=" " style="height: 50px">
+      <h3 style="margin-top: -24px">物模型</h3>
+    </a-card>
+    <a-card class="general-card" style="margin-top: 10px;padding-top: 20px">
+      <a-tabs type="rounded" position="left"  size="large" @change="changeKey"  animation style="">
+        <a-tab-pane key="1" title="属性">
+          <a-button  type="primary" style="margin-bottom: 10px"  @click="handleClick">
+            <template #icon><icon-plus /></template>
+            新建
+          </a-button>
+          <a-table :columns="columns" :data="propertyData" >
+            <template #operation="{ record }">
+              <a-button
+                type="outline"
+                status="danger"
+                size="small"
+                style="padding: 7px;margin-right: 10px"
+                @click="handleDeleteProperty(record)"
+              >
+                <template #icon><icon-delete /></template>
+                删除
+              </a-button>
+            </template>
+          </a-table>
+        </a-tab-pane>
+        <a-tab-pane key="2" title="服务">
+          <a-button  type="primary" style="margin-bottom: 10px" @click="handleClick">
+            <template #icon><icon-plus /></template>
+            新建
+          </a-button>
+          <a-table :columns="columns" :data="serveData" >
+            <template #operation="{ record }">
+              <a-button
+                type="outline"
+                status="danger"
+                size="small"
+                style="padding: 7px;margin-right: 10px"
+                @click="handleDeleteServe(record)"
+              >
+                <template #icon><icon-delete /></template>
+                删除
+              </a-button>
+            </template>
+          </a-table>
+        </a-tab-pane>
+        <a-tab-pane key="3" title="事件">
+          <a-button  type="primary" style="margin-bottom: 10px"  @click="handleClick">
+            <template #icon><icon-plus /></template>
+            新建
+          </a-button>
+          <a-table :columns="columns" :data="eventData" >
+            <template #operation="{ record }">
+              <a-button
+                type="outline"
+                status="danger"
+                size="small"
+                style="padding: 7px;margin-right: 10px"
+                @click="handleDeleteEvent(record)"
+              >
+                <template #icon><icon-delete /></template>
+                删除
+              </a-button>
+            </template>
+          </a-table>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </div>
+
+  <a-modal
+    width="900px"
+    height="500px"
+    :visible="visible && keyValue==='1'"
+    @cancel="handleCancel"
+  >
+    <template #title>新建属性</template>
+    <a-form
+      ref="propertyCreateRef"
+      :model="propertyAddData"
+      :style="{ width: '650px' }"
+    >
+      <!-- 设备名称 -->
+      <a-form-item
+        field="name"
+        label="属性名称"
+        :rules="[{ required: true, message: '设备名称不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="propertyAddData.name"
+          placeholder='请输入设备名称'
+        />
+      </a-form-item>
+      <!-- 标识 -->
+      <a-form-item
+        field="identifier"
+        label="标识"
+        :rules="[{ required: true, message: '标识不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="propertyAddData.identifier"
+          placeholder='请输入标识'
+        />
+      </a-form-item>
+      <!-- 数据类型 -->
+      <a-form-item
+        field="dataType"
+        label="数据类型"
+        :rules="[{ required: true, message: '数据类型不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-select v-model="propertyAddData.dataType" :options="dataTypeOptions" allow-search placeholder="请选择数据类型"/>
+      </a-form-item>
+      <!-- 读写类型 -->
+      <a-form-item
+        field="ioType"
+        label="读写类型"
+      >
+        <a-radio-group v-model="propertyAddData.ioType">
+          <a-radio value="1">读写</a-radio>
+          <a-radio value="2">只读</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <!-- 备注 -->
+      <a-form-item
+        field="remark"
+        label="备注"
+      >
+        <a-textarea
+          v-model="propertyAddData.remark"
+          placeholder='请输入备注'
+        />
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-button class="editor-button"  @click="handleCancel">取消</a-button>
+      <a-button class="editor-button"  type="primary" @click="handleSubmit">确定</a-button>
+    </template>
+  </a-modal>
+
+  <a-modal
+    width="900px"
+    height="500px"
+    :visible="visible && keyValue==='2'"
+    @cancel="handleCancel"
+  >
+    <template #title>新建服务</template>
+    <a-form
+      ref="serveCreateRef"
+      :model="serveAddData"
+      :style="{ width: '650px' }"
+    >
+      <!-- 服务名称 -->
+      <a-form-item
+        field="name"
+        label="服务名称"
+        :rules="[{ required: true, message: '服务名称不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="serveAddData.name"
+          placeholder='请输入服务名称'
+        />
+      </a-form-item>
+      <!-- 标识 -->
+      <a-form-item
+        field="identifier"
+        label="标识"
+        :rules="[{ required: true, message: '标识不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="serveAddData.identifier"
+          placeholder='请输入标识'
+        />
+      </a-form-item>
+      <!-- 输入参数 -->
+      <a-form-item
+        field="inputs"
+        label="输入参数"
+      >
+        <div style="width: 100%">
+          <div style="width: 100%;margin-bottom: 5px; ">
+            <a-space v-for="(param,index) in serveInputData" :key="index" style="margin-bottom: 5px">
+              <a-input v-model="param.name"  placeholder="名称" allow-clear />
+              <a-input v-model="param.identifier"  placeholder="标识" allow-clear />
+              <a-select v-model="param.dataType" :options="dataTypeOptions" allow-search placeholder="数据类型" />
+              <a-select v-model="param.type" :options="typeOptions" allow-search placeholder="类型"/>
+              <a-button type="text"  @click="handleDeleteParams(index,'serveInputData')"><icon-minus-circle /></a-button>
+            </a-space>
+          </div>
+          <a-button  @click="handleAddParams('serveInputData')" style="width: 100%" type="outline">
+            <icon-plus />
+          </a-button>
+        </div>
+      </a-form-item>
+      <!-- 输出参数 -->
+      <a-form-item
+        field="outputs"
+        label="输出参数"
+      >
+        <div style="width: 100%">
+          <div style="width: 100%;margin-bottom: 5px; ">
+            <a-space v-for="(param,index) in serveOutputData" :key="index" style="margin-bottom: 5px">
+              <a-input v-model="param.name"  placeholder="名称" allow-clear />
+              <a-input v-model="param.identifier"  placeholder="标识" allow-clear />
+              <a-select v-model="param.dataType" :options="dataTypeOptions" allow-search placeholder="数据类型"/>
+              <a-select v-model="param.type" :options="typeOptions" allow-search placeholder="类型"/>
+              <a-button type="text"  @click="handleDeleteParams(index,'serveOutputData')"><icon-minus-circle /></a-button>
+            </a-space>
+          </div>
+          <a-button  @click="handleAddParams('serveOutputData')" style="width: 100%" type="outline">
+            <icon-plus />
+          </a-button>
+        </div>
+      </a-form-item>
+      <!-- 备注 -->
+      <a-form-item
+        field="remark"
+        label="备注"
+      >
+        <a-textarea
+          v-model="serveInputData.remark"
+          placeholder='请输入备注'
+        />
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-button class="editor-button"  @click="handleCancel">取消</a-button>
+      <a-button class="editor-button"  type="primary" @click="handleSubmit">确定</a-button>
+    </template>
+  </a-modal>
+
+  <a-modal
+    width="900px"
+    height="500px"
+    :visible="visible && keyValue==='3'"
+    @cancel="handleCancel"
+  >
+    <template #title>新建事件</template>
+    <a-form
+      ref="eventCreateRef"
+      :model="eventAddData"
+      :style="{ width: '650px' }"
+    >
+      <!-- 事件名称 -->
+      <a-form-item
+        field="name"
+        label="服务名称"
+        :rules="[{ required: true, message: '服务名称不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="eventAddData.name"
+          placeholder='请输入服务名称'
+        />
+      </a-form-item>
+      <!-- 标识 -->
+      <a-form-item
+        field="identifier"
+        label="标识"
+        :rules="[{ required: true, message: '标识不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="eventAddData.identifier"
+          placeholder='请输入标识'
+        />
+      </a-form-item>
+      <!-- 类型 -->
+      <a-form-item
+        field="type"
+        label="类型"
+        :rules="[{ required: true, message: '类型不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="eventAddData.type"
+          placeholder='请输入类型'
+        />
+      </a-form-item>
+      <!-- 输出参数 -->
+      <a-form-item
+        field="outputs"
+        label="输出参数"
+      >
+        <div style="width: 100%">
+          <div style="width: 100%;margin-bottom: 5px; ">
+            <a-space v-for="(param,index) in eventOutputData" :key="index" style="margin-bottom: 5px">
+              <a-input v-model="param.name"  placeholder="名称" allow-clear />
+              <a-input v-model="param.identifier"  placeholder="标识" allow-clear />
+              <a-select v-model="param.dataType" :options="dataTypeOptions" allow-search placeholder="数据类型"/>
+              <a-select v-model="param.type" :options="typeOptions" allow-search placeholder="类型"/>
+              <a-button type="text"  @click="handleDeleteParams(index,'eventOutputData')"><icon-minus-circle /></a-button>
+            </a-space>
+          </div>
+          <a-button  @click="handleAddParams('eventOutputData')" style="width: 100%" type="outline">
+            <icon-plus />
+          </a-button>
+        </div>
+      </a-form-item>
+      <!-- 备注 -->
+      <a-form-item
+        field="remark"
+        label="备注"
+      >
+        <a-textarea
+          v-model="eventAddData.remark"
+          placeholder='请输入备注'
+        />
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-button class="editor-button"  @click="handleCancel">取消</a-button>
+      <a-button class="editor-button"  type="primary" @click="handleSubmit">确定</a-button>
+    </template>
+  </a-modal>
+
+
+</template>
+
+<script lang="ts" setup>
+  import { useRoute } from 'vue-router';
+  import { computed, onMounted, ref } from 'vue';
+  import useVisible from '@/hooks/visible';
+  import {
+    createEvent,
+    createProperty,
+    createServe,
+    deleteEvent,
+    deleteProperty,
+    deleteServe,
+    queryEventList,
+    queryPropertyList,
+    queryServeList
+  } from '@/api/tsl';
+  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { Message } from '@arco-design/web-vue';
+
+  const { visible, setVisible } = useVisible();
+  const route = useRoute();
+  const id = Number(route.params.id);
+  const columns = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      slotName: 'name',
+    },
+    {
+      title: '标识',
+      dataIndex: 'identifier',
+      slotName: 'identifier',
+    },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+      slotName: 'remark',
+    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      slotName: 'operation',
+    },
+  ];
+  const serveData = ref([]);
+  const propertyData = ref([]);
+  const eventData = ref([]);
+  const keyValue = ref('1');
+  const paramsData = ref([]);
+  const dataTypeOptions = computed<SelectOptionData[]>(() => [
+    {
+      label: '整型',
+      value: 'INT',
+    },
+    {
+      label: '单精度浮点型',
+      value: 'FLOAT',
+    },
+    {
+      label: '双精度浮点型',
+      value: 'DOUBLE',
+    },
+    {
+      label: '布尔型',
+      value: 'BOOLEAN',
+    },
+    {
+      label: '字符串',
+      value: 'STRING',
+    },
+    {
+      label: '日期型',
+      value: 'DATE',
+    },
+    {
+      label: '透传',
+      value: 'RAW',
+    },
+  ]);
+  const typeOptions = computed<SelectOptionData[]>(() => [
+    {
+      label: '物模型输入',
+      value: 'INPUT',
+    },
+    {
+      label: '物模型输出',
+      value: 'OUTPUT',
+    },
+    {
+      label: '读写属性',
+      value: 'RW',
+    },
+  ]);
+  const propertyAddData = ref({
+    productId:id,
+  });
+  const eventAddData = ref({
+    productId:id,
+    outputs: [{
+      name: '',
+      identifier: '',
+      dataType: '',
+      type: '',
+    }],
+  });
+  const serveAddData = ref({
+    productId:id,
+    inputs: [{
+      name: '',
+      identifier: '',
+      dataType: '',
+      type: '',
+    }],
+    outputs: [{
+      name: '',
+      identifier: '',
+      dataType: '',
+      type: '',
+    }],
+  });
+  const serveInputData = ref([{
+    name: '',
+    identifier: '',
+    dataType: '',
+    type: '',
+  }]);
+  const serveOutputData = ref([{
+    name: '',
+    identifier: '',
+    dataType: '',
+    type: '',
+  }]);
+  const eventOutputData = ref([{
+    name: '',
+    identifier: '',
+    dataType: '',
+    type: '',
+  }]);
+  const propertyCreateRef = ref<FormInstance>();
+  const eventCreateRef = ref<FormInstance>();
+  const serveCreateRef = ref<FormInstance>();
+
+  const fetchData = async (Id: number) => {
+    const params={
+      size:10,
+      current:1,
+      productId:Id,
+    }
+    const res1 = await queryServeList(params);
+    serveData.value = res1.data.records;
+    const res2 = await queryPropertyList(params);
+    propertyData.value = res2.data.records;
+    const res3 = await queryEventList(params);
+    eventData.value = res3.data.records;
+  };
+  const changeKey= (e:any) =>{
+    keyValue.value = e;
+  }
+  // 组件被点击
+  const handleClick = () => {
+    setVisible(true);
+  };
+  // 关闭
+  const handleCancel = async () => {
+    setVisible(false);
+  };
+  // 确定
+  const handleSubmit = async () => {
+
+    if(keyValue.value==='1'){
+      const valid = await propertyCreateRef.value?.validate();
+      if (!valid) {
+        const res = await createProperty(propertyAddData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: '新建成功',
+            duration: 5 * 1000,
+          });
+          await fetchData(id);
+          setVisible(false);
+        }
+      }
+
+    } else if(keyValue.value==='2') {
+      const valid = await serveCreateRef.value?.validate();
+      if (!valid) {
+        serveAddData.value.inputs = serveInputData.value;
+        serveAddData.value.outputs = serveOutputData.value;
+        const res = await createServe(serveAddData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: '新建成功',
+            duration: 5 * 1000,
+          });
+          await fetchData(id);
+          setVisible(false);
+        }
+      }
+    } else if(keyValue.value==='3') {
+      const valid = await eventCreateRef.value?.validate();
+      if (!valid) {
+        eventAddData.value.outputs = eventOutputData.value;
+        const res = await createEvent(eventAddData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: '新建成功',
+            duration: 5 * 1000,
+          });
+          await fetchData(id);
+          setVisible(false);
+        }
+      }
+    }
+
+  };
+  // 删除参数
+  const handleDeleteParams = (record: any,data: string) => {
+    console.log(record);
+    if (record !== -1 && data==='serveInputData') {
+      serveInputData.value.splice(record, 1);
+    } else if (record!== -1 && data==='serveOutputData') {
+      serveOutputData.value.splice(record, 1);
+    } else if (record!== -1 && data==='eventOutputData') {
+      eventOutputData.value.splice(record, 1);
+    }
+  };
+  // 点击添加参数
+  const handleAddParams = (data:string) => {
+    console.log(data);
+    if(data==='serveInputData'){
+      serveInputData.value.push({
+        name: '',
+        identifier: '',
+        dataType: '',
+        type: '',
+    });
+    }else if(data==='serveOutputData') {
+      serveOutputData.value.push({
+        name: '',
+        identifier: '',
+        dataType: '',
+        type: '',
+      });
+    } else if(data==='eventOutputData') {
+      eventOutputData.value.push({
+        name: '',
+        identifier: '',
+        dataType: '',
+        type: '',
+      });
+    }
+  };
+  // 删除属性
+  const handleDeleteProperty = async (record: any) => {
+    const res = await deleteProperty(record.id);
+    console.log(res);
+    if (res.status === 200) {
+      Message.success({
+        content: '删除成功',
+        duration: 5 * 1000,
+      });
+      await fetchData(id);
+    }
+  };
+  // 删除服务
+  const handleDeleteServe = async (record: any) => {
+    console.log(record);
+    const res = await deleteServe(record.id);
+    if (res.status === 200) {
+      Message.success({
+        content: '删除成功',
+        duration: 5 * 1000,
+      });
+      await fetchData(id);
+    }
+  };
+  // 删除事件
+  const handleDeleteEvent = async (record: any) => {
+    const res = await deleteEvent(record.id);
+    if (res.status === 200) {
+      Message.success({
+        content: '删除成功',
+        duration: 5 * 1000,
+      });
+      await fetchData(id);
+    }
+  };
+
+  onMounted(() => {
+    fetchData(id);
+  });
+</script>
+
+<style scoped>
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+
+  h1 {
+    font-size: 24px;
+    margin-bottom: 10px;
+  }
+
+  .meta span {
+    margin-right: 20px;
+  }
+
+  .attachments li {
+    margin-bottom: 10px;
+  }
+
+  .attachments a {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #1890ff;
+    text-decoration: none;
+  }
+
+  .attachments a:hover {
+    text-decoration: underline;
+  }
+</style>
diff --git a/src/views/iot/product/index.vue b/src/views/iot/product/index.vue
index 431fbcb..b0b0774 100644
--- a/src/views/iot/product/index.vue
+++ b/src/views/iot/product/index.vue
@@ -172,6 +172,16 @@
             <template #icon><icon-list /></template>
             详情
           </a-button>
+          <a-button
+            type="outline"
+            size="small"
+            status="warning"
+            style="padding: 7px; margin-right: 10px"
+            @click="openTsl(record.id)"
+          >
+            <template #icon><icon-list /></template>
+            物模型
+          </a-button>
           <ProductEdit
             :id="record.id"
             ref="editUserRef"
@@ -339,6 +349,15 @@
     router.push(url);
   };
 
+  // 打开物模型
+  function openTsl(id:number): void{
+    const url = router.resolve({
+      name: 'productTsl',
+      params: {id}
+    }).href;
+    router.push(url);
+  };
+
   // 删除
   const handleDelete = async (id: number) => {
     const res = await deleteProduct(id);
diff --git a/src/views/system/message/components/message-edit.vue b/src/views/system/message/components/message-edit.vue
index bfcb000..b33ef4a 100644
--- a/src/views/system/message/components/message-edit.vue
+++ b/src/views/system/message/components/message-edit.vue
@@ -134,11 +134,12 @@
       <a-card style="margin-right: 10px;width: 30%">
         <a-tree
           :data="deptTreeData"
-          checkable="true"
+          :field-names="{ title: 'name', key: 'id', children: 'children' }"
           style="margin-bottom: 8px; max-width: 240px"
           @select="handleClickTree"
           @check="handleCheckTree"
-        />
+        >
+        </a-tree>
       </a-card>
       <a-card style="flex: 1">
         <a-button type="primary" >全选</a-button>
@@ -146,11 +147,11 @@
           :data="selectedDepartmentMembers"
           :columns="columns"
           style="height: 520px">
-          <template #key="{ record }">
-            <a-checkbox v-model="selectedIds" :value="record.key"> </a-checkbox>
+          <template #id="{ record }">
+            <a-checkbox v-model="selectedIds" :value="record.id"> </a-checkbox>
           </template>
-          <template #title="{ record }">
-            {{ record.title }}
+          <template #username="{ record }">
+            {{ record.username }}
           </template>
         </a-table>
       </a-card>
@@ -165,7 +166,7 @@
 
 <script lang="ts" setup>
   import useVisible from '@/hooks/visible';
-  import { computed, defineEmits, PropType, ref, shallowRef, onBeforeUnmount, reactive } from 'vue';
+  import { computed, defineEmits, PropType, ref, shallowRef, onBeforeUnmount, reactive, onMounted } from 'vue';
   import { CreateRecord } from '@/api/user';
   import { FormInstance } from '@arco-design/web-vue/es/form';
   import { Message } from '@arco-design/web-vue';
@@ -174,6 +175,7 @@
   import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
   import { IEditorConfig } from '@wangeditor/editor'
   import '@wangeditor/editor/dist/css/style.css'
+  import { getAllDeptTree } from '@/api/dept';
 
   const props = defineProps({
     prem: {
@@ -205,12 +207,12 @@
   const columns = computed<any[]>(()=>[
     {
       title: '操作',
-      dataIndex: 'key',
-      slotName: 'key',
+      dataIndex: 'id',
+      slotName: 'id',
     },
     {
       title: '用户',
-      dataIndex: 'title',
+      dataIndex: 'username',
     },
   ])
 
@@ -253,33 +255,33 @@
   //     },
   //   },
   // );
-  const deptTreeData = reactive([
+  const deptTreeData = ref([
     {
-      key: '1',
-      title: '总部门',
+      id: '1',
+      name: '总部门',
       children: [
         {
-          key: '2',
-          title: '部门1',
+          id: '2',
+          name: '部门1',
           members: [
-            { key: '101', title: '成员1' },
-            { key: '102', title: '成员2' }
+            { id: '101', username: '成员1' },
+            { id: '102', username: '成员2' }
           ]
         },
         {
-          key: '3',
-          title: '部门2',
+          id: '3',
+          name: '部门2',
           members: [
-            { key: '201', title: '成员3' },
-            { key: '202', title: '成员4' }
+            { id: '201', username: '成员3' },
+            { id: '202', username: '成员4' }
           ]
         },
         {
-          key: '4',
-          title: '部门3',
+          id: '4',
+          name: '部门3',
           members: [
-            { key: '203', title: '成员5' },
-            { key: '204', title: '成员6' }
+            { id: '203', username: '成员5' },
+            { id: '204', username: '成员6' }
           ]
         }
       ]
@@ -287,6 +289,13 @@
   ]);
   const selectedDepartmentMembers: any = ref([]);
   const renderData = ref<any[]>([]);
+  // 获取部门树
+  const getDeptTree = async () => {
+    const res = await getAllDeptTree(1);
+    if (res.status === 200) {
+      deptTreeData.value = res.data;
+    }
+  }
   // 部门树查询
   const queryDeptTree= async ()=>{
     deptVisible.value = true;
@@ -299,7 +308,7 @@
     while (queue.length > 0) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const node = queue.shift()!;
-      if (selectedKeys.includes(node.key)) {
+      if (selectedKeys.includes(node.id)) {
         if (node.members) {
           selectedMembers.push(...node.members);
         }
@@ -313,12 +322,12 @@
 
 
   // 部门树被点击
-  const handleClickTree = (key: string[]) => {
+  const handleClickTree = (id: string[]) => {
     // 假设 '1' 是总部门的键
-    if (key[0] === '1' || key.length === 0) {
+    if (id[0] === '1' || id.length === 0) {
       // 广度优先遍历树，获取所有成员
       const allMembers: any[] = [];
-      const queue:any = [...deptTreeData];
+      const queue:any = [...deptTreeData.value];
       while (queue.length > 0) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const node = queue.shift()!;
@@ -333,17 +342,17 @@
       renderData.value = selectedDepartmentMembers.value;
       return;
     }
-    const Members = getSelectedMembers(deptTreeData, key);
+    const Members = getSelectedMembers(deptTreeData.value, id);
     selectedDepartmentMembers.value = Members;
   }
   // 部门树被选中
-  const handleCheckTree = (key: string[]) => {
-    if (key[0] === '1' ) { // 假设 '1' 是总部门的键
+  const handleCheckTree = (id: string[]) => {
+    if (id[0] === '1' ) { // 假设 '1' 是总部门的键
       const allKeys: string[] = [];
       const traverseTree = (node: any) => {
         if (node.members) {
           node.members.forEach((member: any) => {
-            allKeys.push(member.key);
+            allKeys.push(member.id);
           });
         }
         if (node.children) {
@@ -352,14 +361,14 @@
           });
         }
       };
-      deptTreeData.forEach((node: any) => {
+      deptTreeData.value.forEach((node: any) => {
         traverseTree(node);
       });
       selectedIds.value = allKeys;
 
     } else {
-      const selectedKeys = getSelectedMembers(deptTreeData, key);
-      selectedIds.value = selectedKeys.map(item => item.key);
+      const selectedKeys = getSelectedMembers(deptTreeData.value, id);
+      selectedIds.value = selectedKeys.map(item => item.id);
     }
   };
 
@@ -423,6 +432,9 @@
   const deptTreeCancel = () => {
     deptVisible.value = false;
   };
+  onMounted(async () => {
+    await getDeptTree();
+  });
 </script>
 
 <style scoped>