From 196240b21f46b7a69f02422ddc76c899ca2a269d Mon Sep 17 00:00:00 2001
From: renna <576157508@qq.com>
Date: Mon, 14 Jul 2025 11:05:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B9=B3=E5=8F=B0=E6=A6=82?=
 =?UTF-8?q?=E8=A7=88=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |    3 +
 .env.production                               |    2 +
 .env.staging                                  |    2 +
 README.md                                     |   39 +-
 src/api/monitor/carRunInfo.js                 |   70 +
 src/assets/images/alarm_car.png               |  Bin 0 -> 1807 bytes
 src/assets/images/arrow.png                   |  Bin 0 -> 869 bytes
 src/assets/images/close_icon.png              |  Bin 0 -> 224 bytes
 src/assets/images/warning_car.png             |  Bin 0 -> 1859 bytes
 src/assets/images/weather_icon.png            |  Bin 0 -> 550 bytes
 src/assets/images/weather_station.png         |  Bin 0 -> 472 bytes
 src/components/car/detail/TrackPlayback.vue   |  341 ++++-
 .../map/controls/LayerSwitcher copy.vue       | 1180 -----------------
 src/components/map/controls/LayerSwitcher.vue |   10 +-
 src/components/map/controls/README.md         |  167 +++
 .../map/controls/VehicleAnimationSystem.vue   |  688 ++++++++++
 .../map/controls/VehicleDetailPopup.vue       |  206 +++
 .../map/controls/VehicleLabelSystem.vue       |  299 +++++
 .../controls/VehicleMovementControl copy.vue  |  677 ----------
 .../map/controls/VehicleMovementControl.vue   |  999 ++++++++++++--
 .../VehicleMovementControlRefactored.vue      | 1097 +++++++++++++++
 .../map/controls/VehicleStyleManager.vue      |  220 +++
 .../map/controls/WeatherStationPopup.vue      |  187 +++
 src/components/map/info/AlarmNotification.vue |   33 +-
 src/components/map/info/CarDetail.vue         |   11 +-
 src/components/map/info/eventlist.vue         |    4 +-
 src/router/index.js                           |   15 +-
 src/utils/test_websocket.html                 |    2 +-
 src/utils/websocket.js                        |   12 +
 src/views/car/monitor/detail.vue              |    8 +-
 src/views/car/park/index.vue                  |   18 +-
 src/views/platform/index.vue                  |  280 +++-
 vite.config.js                                |    2 +-
 33 files changed, 4464 insertions(+), 2108 deletions(-)
 create mode 100644 src/api/monitor/carRunInfo.js
 create mode 100644 src/assets/images/alarm_car.png
 create mode 100644 src/assets/images/arrow.png
 create mode 100644 src/assets/images/close_icon.png
 create mode 100644 src/assets/images/warning_car.png
 create mode 100644 src/assets/images/weather_icon.png
 create mode 100644 src/assets/images/weather_station.png
 delete mode 100644 src/components/map/controls/LayerSwitcher copy.vue
 create mode 100644 src/components/map/controls/README.md
 create mode 100644 src/components/map/controls/VehicleAnimationSystem.vue
 create mode 100644 src/components/map/controls/VehicleDetailPopup.vue
 create mode 100644 src/components/map/controls/VehicleLabelSystem.vue
 delete mode 100644 src/components/map/controls/VehicleMovementControl copy.vue
 create mode 100644 src/components/map/controls/VehicleMovementControlRefactored.vue
 create mode 100644 src/components/map/controls/VehicleStyleManager.vue
 create mode 100644 src/components/map/controls/WeatherStationPopup.vue

diff --git a/.env.development b/.env.development
index 6eeb8bb..dc4c90b 100644
--- a/.env.development
+++ b/.env.development
@@ -6,3 +6,6 @@ VITE_APP_ENV = 'development'
 
 # 青岛机场无人驾驶车辆协同云平台/开发环境
 VITE_APP_BASE_API = '/dev-api'
+
+# WebSocket配置
+VITE_APP_WEBSOCKET_URL=ws://10.0.0.126:8080/collision
diff --git a/.env.production b/.env.production
index 6910509..e7596e3 100644
--- a/.env.production
+++ b/.env.production
@@ -7,5 +7,7 @@ VITE_APP_ENV = 'production'
 # 青岛机场无人驾驶车辆协同云平台/生产环境
 VITE_APP_BASE_API = '/prod-api'
 
+VITE_APP_WEBSOCKET_URL='ws://10.0.0.124:8080/collision'
+
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip
\ No newline at end of file
diff --git a/.env.staging b/.env.staging
index 5d43537..f1ae977 100644
--- a/.env.staging
+++ b/.env.staging
@@ -7,5 +7,7 @@ VITE_APP_ENV = 'staging'
 # 青岛机场无人驾驶车辆协同云平台/生产环境
 VITE_APP_BASE_API = '/stage-api'
 
+VITE_APP_WEBSOCKET_URL='ws://10.0.0.124:8080/collision'
+
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip
\ No newline at end of file
diff --git a/README.md b/README.md
index f3e5f5b..78fe374 100644
--- a/README.md
+++ b/README.md
@@ -124,4 +124,41 @@ function getUserOptions() {
 }
 
 使用SockJS + STOMP协议
-滑出蓝色 滑入黄色
\ No newline at end of file
+滑出蓝色 滑入黄色
+
+20250711关键改进说明
+1. 平滑动画核心系统
+​​动画循环引擎​​：使用 requestAnimationFrame 创建流畅的60FPS动画循环
+​​运动预测算法​​：
+记录车辆移动历史轨迹（最多3个点）
+计算运动方向向量用于预测后续位置
+​​物理引擎​​：
+基于真实速度计算每帧最大移动距离
+方向插值时考虑车速影响（车速越高转向越慢）
+2. 新数据结构
+vehicleAnimations：存储所有平滑动画所需数据
+当前位置和方向
+目标位置和方向
+最后更新时间
+预测向量
+vehicleMotionHistory：存储最近位置点用于轨迹预测
+3. 增强的位置更新逻辑
+收到新位置时记录历史点
+计算历史点间的移动向量
+设置目标位置时包含预测偏移量
+当超过300ms没有新数据时使用预测向量继续移动
+4. 性能优化
+距离阈值检查（0.1米）避免不必要的计算
+角度归一化处理0-360度边界情况
+使用缓动函数使运动曲线更自然
+5. 暴露控制接口
+通过defineExpose提供了三个新方法：
+
+startVehicleSmoothing()：启动平滑动画
+stopVehicleSmoothing()：停止平滑动画
+resetVehicleAnimations()：重置所有动画数据
+使用建议
+将此组件整合到现有项目中
+调用startVehicleSmoothing()启动平滑效果
+处理WebSocket消息时继续调用updateVehiclePosition()
+当组件隐藏时调用stopVehicleSmoothing()节省资源
\ No newline at end of file
diff --git a/src/api/monitor/carRunInfo.js b/src/api/monitor/carRunInfo.js
new file mode 100644
index 0000000..7418311
--- /dev/null
+++ b/src/api/monitor/carRunInfo.js
@@ -0,0 +1,70 @@
+import request from '@/utils/request'
+
+// 车辆运动信息管理
+// 查询车辆运动信息列表
+export function listCarRunInfo(query) {
+  return request({
+    url: '/system/vehicle_location/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 导出车辆运动信息列表
+export function exportCarRunInfo(query) {
+  return request({
+    url: '/system/vehicle_location/export',
+    method: 'post',
+    params: query
+  })
+}
+
+// 根据车辆ID查询车辆运动信息列表
+export function listCarRunInfoByVehicleId(vehicleId, query) {
+  return request({
+    url: '/system/vehicle_location/vehicle/' + vehicleId,
+    method: 'get',
+    params: query
+  })
+}
+
+// 根据车牌号查询车辆运动信息列表
+export function listCarRunInfoByLicensePlate(licensePlate, query) {
+  return request({
+    url: '/system/vehicle_location/plate/' + licensePlate,
+    method: 'get',
+    params: query
+  })
+}
+
+// 根据车辆ID查询车辆最新位置信息
+export function getLatestLocationByVehicleId(vehicleId) {
+  return request({
+    url: '/system/vehicle_location/latest/vehicle/' + vehicleId,
+    method: 'get'
+  })
+}
+
+// 根据车牌号查询车辆最新位置信息
+export function getLatestLocationByLicensePlate(licensePlate) {
+  return request({
+    url: '/system/vehicle_location/latest/plate/' + licensePlate,
+    method: 'get'
+  })
+}
+
+// 删除调度日志
+export function delJobLog(jobLogId) {
+  return request({
+    url: '/monitor/jobLog/' + jobLogId,
+    method: 'delete'
+  })
+}
+
+// 清空调度日志
+export function cleanJobLog() {
+  return request({
+    url: '/monitor/jobLog/clean',
+    method: 'delete'
+  })
+}
diff --git a/src/assets/images/alarm_car.png b/src/assets/images/alarm_car.png
new file mode 100644
index 0000000000000000000000000000000000000000..618b5c138f70fefa684b87671329e71c6fdf4e26
GIT binary patch
literal 1807
zcmV+q2k`ibP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH2Bb+uK~#7F?N@7v
zUDXv{d+&43eI#=;uXIdIlSxS!leSivw%Yu0L`4Lv5jubRr>Q9=&{Bu~u?XSjrlpp)
z*g}O;gsS+$h@wKo2VzF>9SBA;7@UMjoMhrW?)%>J+Iuh8Irp5Cd&Zd<1%K%tX7<^y
zwZHYPZ?C-v;M?*|FRZ(Ph>Qw$jp1qw@xJ@^(BMPCe5v)H&3lg>1bA9wWF%VqMRgj$
z<rdm}SWEdjSr`uX(g3x89-Y1B-=|M6eA@pr7mk$FrNDQW%L3pOixYye>*=#M>gpxy
z*AQi7fdxj;QTij!SjA)@2~@c$<sbY0BF+Gm@KRs|d_nQ{@85%3{};3#p?WJZJWTZv
zwZo8wwbsl49OQ_bsdEeUUu80O$JUMIL&uwW|L(hgr6(sR@k=vc-*e9}<2<DL$b$c)
z-+wS$v0Wo?__h&@V<wx|o+=PKc?rZi2isz*@yZR~`@?s0;+Kn_`v0!OpX~1usy;RK
zbeopw<$Lf;0iZbVq2DdGFQ3@=-kFB)sPAN$UT5YqS;<Tbd`T!oi#9LQ^fCi%DP`z;
zKUjFs^JQ~Dz+LzMr0<qSMihpJ_gE`AylM#SiHTwI{MmrsXV2MtCoi;3g<$#~uQwgH
zlF7SG?nB+yysorewX{`b%Bk@@)X!Jlr8_sRaeFw7U6~a-9z0unUV`C`{-DpBnVCtk
zU@Y4=IUWkJh)O{l;mQ5St5q85^HH|h8dxeH6SXpw$xwsl_e8O+rwolW#NU^8UvYDm
z!LFyS9=PkycdHMam|ySG<QD4^<>x4=Oic8G=M7VAjs;*oY^Yy6f1&M224b_|<!ke7
zX-A*of?*^^ve_&+j+4|O9GBE%!c7H}|4(V%cy!kN&1_8{JG|IBLwfLGr94pCx9<R{
zxR`WA$1Iu{=9uu<(MM2Yw7%0^Mb8-FjK*zW{q?4IYNe^ELj;0hYE^mf-f(u33M0#1
zsWBdBE2YVBJOUm5MNCb>j;-2{-&R*;`gm)tV>l@dkmAEMi5)NDcncpt+Qg|_`otX@
zExcBDHtu*I8SetZB1S?8ixS>^x1nF!kl`Cg^RO@BlCgEn^ftF^YH7hS7SaHeN*I}O
z;k92+t7nua^{W-@<43l!hXjMQv1i!D`LYDh$c@&mC-grwGNn--eR&7Jdc6U=qBx<i
z)qq8rOGvM^oPmU9<s(;g?i8~2Nn6f>66Bf22mnMZB{xrCSSOkQ*utQ2%ELt=bPbhJ
zM&d`uYGBNizP1W$g_#0?6oN2LWMPZRZg^l5d|a1!`loBz&7gFT?pRN}4@KFDZA!3|
zlJoa(hTk2j<Dp#zwtaxfpKBS0tg}`MK!fwPRB7qX?%s``Q*)rhSbXtdP-%^^KS?OM
zz{QZdZNy{OP3Lw4(`8etGwDP`iATp9qy^04y)gDP@;(9=pOo&+FNUepf6+6hG2A$}
zEE5JAfSAmP<+znlfAP>`patDcS=SMSI9JfBlwLwS!M2h_W3uI^Amu-Hp=OZ8nsu|X
zS_wU%Fm=Z?Vudsi+?@&ysnAGAKpm`W%w-w7JqtL3Ax_ph;hQgpj)mw2bbRV?5GJ!_
z@30O44&OJ_Z3e1b(5!1db4nZUhl3pglFy|4slWf=TOazp&ka_$n*v7ygLE2O6Scxq
z8igWt`-(FaCN$Yu9bcy*cahP!|8Vd5>pALNFn>X^nTh5)vct$HbdYPu_f44suyf~5
zeB+I`9cw_lC{-8?4|R+5PU=)P-H??GogUwJw3V^I3&KW!E&9=}2Xy@)YJ*wfE5idJ
z{V=r#`N7q!rF|wf^BSfpDz1qY*AdMWfKsWXVSL=FpKkvvYwGKW*#484dxdFGoC~LI
z+e=*d<+c*ivYIS-VN|Oow&8q2!@%GGEG>4LP6q#z2mLp?gD*Vh^*@J#%M4l#--h|Q
zOsxjfKXg|TQg~zrM{Zw}6`3L8@=BBQ4C$ugw(Ya?{a2KWw{1|RQV1D?s27U|SgCZN
zOS8rBV{B}aPtUI}05>*q1BNKAD+<kprf1ETr@a<E<JD?PX4|&iYDsITPoWx=;8})n
zYqqcF7f-&>f)(C&tJ&Ew`r91X_8<qRA2JyVW_!u37Zzt`9(Eyk(5<%e#v7;M?5XV%
zE!$OozG?f|*t+hlJvTR};7gR|To2};?nD2OjSah@%lXE+b2iCm>av_*V`F2alQCm_
xd^`aARsNBoHANoS7#$roA-pQ^tJwK^%4fan*vH$E#q$6F002ovPDHLkV1hh7e%=58

literal 0
HcmV?d00001

diff --git a/src/assets/images/arrow.png b/src/assets/images/arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb9bef3473fd361a1da8261b53131a79deebecb7
GIT binary patch
literal 869
zcmV-r1DgDaP)<h;3K|Lk000e1NJLTq0027x000mO1^@s6s7?n)00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0{TfrK~#7F?N(2V
zQc)DY_x<tTq?iRF2st1vY!;e9%%YIKKr8nx+w~FDkI)BbQ4|poF-*{A2x%82nwi8*
zpf>HMMKA*`=J{UtT+exP-t#$|R!J8Q_uYH`{LbI2LafOe?ti~G+MiU<lQF~^EYI_V
zVb2GyVZI)GnbyRbE{Oz1Gd_+Ft`EP>CaVIr!WW+p4qLE0C(grKZSxo1Lz_q`ulOjQ
zv$J(|b3o_O<VV$Wyt_VM%IQ|Q_?XW9$s}tz)&q|9w-~CTvscd^J?V5hx<iMf{^5<<
z%}-{`c&7rsQ@vK|bG$$sD`n}rjsZk?XEc|N1NW|6@a+KKaen){3pyp9mOD8<mY@qZ
zfWNS{j6pn(0c{GT?n4-JIUbL-Zn<1Ge;yr~?%dUO9p_YvbH-FNo6V+)LPVrwg~)8R
zS_Tl)vl@+tFN1e}o7L-e8;Hr7qz~V4k9?ajxG#hOeAL&nD$uyvle>G}?cvwyZ1?Tn
zwmK(J#)t}3f-y2e&X5y|Vv6FWQYisD0%<-vVdH%Q!DFarFuSA=6l2b4j7p^fI*BL@
zBp-up(3t{#{_@Q&b<Qfffc(f{4HlHmD~M+>o>H_?EEbapVzFezi4O!0vxJe|WImtY
zKpAqD0?~mIzfdToB7ET(DYT)h`u@Y<{?ivbx7GLMbUJ-0m&;|4Z^C$n1LoPItoxP5
zZ1Z4aEb|l$$t)!U?GT?FwZm0|Ai+Mv;C{rJev$`^mApv7sy%}|8l|P`nj%<Hnim}m
zwkNe|l#FguOpMLi)VD!xj4iA6VQ#~tK!MU5!say|BI-J*b`}H8;+Zgl3rZb&Ec{mz
zfp{YPKtT`NB$7`y&^G5;BJdKQ%`PJYZA<1~7{kKkL$x!|zBmdAv7)L}SwY76Jw5%*
zX~CQnp|e~CKu)uLC7;_NS<Van3Q$KRMR0`H;vXVkx+CZ(i#>`<fm-4pU#i+(yWNJ*
vd9T+K-EJ4I;2)eP)^*|A0iRO*Uqbu=)?zx93KiIV00000NkvXXu0mjfIQEGj

literal 0
HcmV?d00001

diff --git a/src/assets/images/close_icon.png b/src/assets/images/close_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..4bac0e03390f654a506b25f875cbe8d7b07338f4
GIT binary patch
literal 224
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k&H|6fVg?3oVGw3ym^DWND9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~z5ztq#kF{FaAbwVR=g8~oBL5q&X7ERI**j}+b
zU|F|f@|EK^mRy`R$)xf{tRjn&RG_8>_nD|jzS5~|F>z@Rn{zyw&fP!eZ<Od;l;|4t
z(63N$;`s+Y^D8&)(A>G<)1D`XmbDmE?r*$zFsT1;gO=g3yFwRkGuZ!Rn`&@j?;L}3
Ren1B>c)I$ztaD0e0su+AP1yhd

literal 0
HcmV?d00001

diff --git a/src/assets/images/warning_car.png b/src/assets/images/warning_car.png
new file mode 100644
index 0000000000000000000000000000000000000000..4710083dc69766f05b4f12d0c4d1eab369d03a4d
GIT binary patch
literal 1859
zcmV-J2fX-+P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH2G~hNK~#7F?N@7T
z99I=S_uhHzu3vHD;Iv5-8^uZ$L;?9nY5SwD(t@C+L26yfLl9L6!b2qD2UJMK*;EBY
zkthlXp|%8pplYI~0f~r*5K1Ik5G_Ux7^1p)DXwG3-u3Q!cV=hqy{G5S!`@ljY5S``
z+H391+&gp6`ObIG%K-0;xBFnN6GUV*u>E<pfzLd$2belc5>P96SloO1Aiz<L$;Mbj
zECUhD%8I*@!!u}F6kb*Nvtt7Q;TUKQph*d+ec#=?;ky1CK2%`09kAMEq{`awD;QW)
z;n9co)0SI-;ktMM){znKUsi<ZOZ-0vR<=2pG%xvpU(eqsE&voU+OftEudDp2Z|xz@
zeoCNspvFO38DOCMBO_27LJir>=FrChw-P1WXnsA>uzTyf%ST?CDuny?eNLY|d2&?{
z?CQ$DIY6KM6-ntI&-(BC>hYPf*R%>&=tVT6n=9x*bqmG{5|lYm&ta-|>Pv%P+tMRG
zHP?_oAAWS|p)R4S6B9=pv_-e;;8z2nrQAc8ZGNDBv-jy&YoV{+<ucu4=iQuSwgaIg
z6rxVbOZ0h(=%_1Y>2Lgg?s2K)Vqcy=aA>sm!!=iQ4-D*aRx_BdZT)^j^|!TB?AS|<
z$C!j3@^;~SSS?rm8R0f&xDGEhwYnHc|D2Hg91ofocrLv3{43QnGmGI5fHv$JbRQ%q
zT^Htb$H>UYiX*o&N?XDMLKp*7;7Rt>gC`ai2zzgcvcWoFzBDc>B`6V{HL|EHIooPR
z@O6)f@B0s5dq;<bHy^)$;{zW(T>9~UXE!$K<2r+@L;)V&Po5qOXyD`K!|`c-@3a4_
z`JohIOAnTA+REnNv$3<8vt)}?<>==}cc1>utl}{aoZsH<vY#ofYft>k|NK;0k01MY
z{Q~(z2nmP`0QKaT4-f%k04w7rO(4mp=qa72g3Qzqh)eU8R@MXj&W(rWixU$^2n53{
zfXBax(6T+&(V`?do>s-}AeWdl$C(IeU87%R`(wfNZZEHQ`j(&Z0fsWMGTt>lqkjF|
zl%Ci<WbNME#cm|qA`=rkGw4m$HSbfVF4y62f1i?n*wn$Vy=e>Io64n253_@<jf$GT
z;#*g;PDmb~;D&P*{L4MZn$M^}>JyXB%fG$HJuDb@#xf#elA^K9ceIsKv(&79%P*Uc
z(xcL-U--vo-5WM_!p(_r47J+eSQNlAsAt0vO>S4nP@xPJS4siR8WUIKS+hn6kw8Y(
z$K1`gCe)&uki1J|z)+{|)}d4aWrg0A%s0_qrA>jdWr$99r?4{&L;}eWP1m7bcH6J+
zv|g?T`s^*6#T^`F7hvLmm_#d?XwD&1w&>YrP<ZlA@s$&2^^x1RSwoxh`eT#>qnZ#M
zg~?wQ=MAY?#+l@g?q3$g+MFwP&m;=sY70xur!_X7M$g>1M2c-GXrkIN_yqqrnOU->
zx?rt1g7i@Jvj1ZoUzs3leVaZTM~nf|l8)vvv=|6$F%Bce`L;|*dEY3B8i~j*Os!<8
z90p7ML~LKwb3kj}KuEt^+MAkzu}}cl@J;sGtPOyUIZP?XOb$pyCf2rCv|62w+bJC@
zZQ0MvT$<Xc(2@!>0F+b*t0BwhEVw%_aEDow8tN}xu}<)qgS4YzkdT}7T$rv=PX;`J
z_JKZqmo12BGGrlO=g%zge@1Yvh=6Eh0DR`f+`;EghwEPagdED{^$tTtD6#(OKj)v;
zC={m<R-CEGI2rFw%bS8_q3QbR`zp8EOy>>nvvq#{laU;%s|<bQ+7ClpW&rHmxf4&F
zdfv|o(Trl700au^M5Lk+^(fNIE=5lm`r2_F2+XO`)uBJ#49N2dqPCb5WtV_(kW(oQ
zCh~pB>N+$zDyZ4EC^u~^H+`{~0Z=R!HH?n>Wv}wXLMMKZ(%Aa{l-xft4T^K&H#~2i
zi?GyCLORYOGabglf{hJ$b%}-zeH&nYE}nW)AF?g|JwIfZe=<=xj)F@Uom%L@?6g~{
zz~p<Is}&Wq#`<>L-H{V+KXJL48cmn{rrd0J7iZURDvjNBjVcx+$We9}8#};?#RDyV
zITk&PjGW|?vm3jCTU)pV{gl=f9nIy%z`0bK4C>UztF?MUwtf3Y9O?A;DpY+E0>=`~
ziWlnHxii13!z#VqT5_%#{z4u+j~Z5gJ-99%W@Fy2cF&zZ|BEJ=hHkB$yLL^&#aD(T
zI$l$Sg+(vK+F;K`Z+d!K!J8P1(_NT{Y6$E5J*;^(T`JV3raW?=i8o{fqdt!OWW*XB
x9W`Lz(EkzbGU!OSkuf|xY}1@$wvxZK<2B>)@6MyBQ8WMm002ovPDHLkV1jQ%i?sj%

literal 0
HcmV?d00001

diff --git a/src/assets/images/weather_icon.png b/src/assets/images/weather_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e7f0e04c98c8bf4a70c3e5161b79d6caf41ed52
GIT binary patch
literal 550
zcmV+>0@?kEP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0lP^=K~#7Fy_8E%
z0znXl|7wXbF3j9OSoqi}H-HNm5jAl)oB%iha05I6y*A2t1K<X@LtrsCa9BcQ+N$B<
zFuW6EC7o1Hb$?x5^-lwTY_x5`nPXoc__+2BJjJ8)pqqOG<Bn||`6w7do~KqM?DF@f
z0xF%1cDDjA9Xn+VoE0D}fqfLa_xgP;@ch-jB^AJSHX0)xE(3)!i*sfTcH`K?4B(9h
zNVqxe$z06>K2X{f#s}+hj8g1+oRM{S64V+CKr%?}3hQQdu76W&NpmKfQCI+qG$Pq~
z)3FjJ{^grp<|J+>JXmKh0b>H>!iHg>A(ArKb=Sc-yVAm*7+uYQiXsw;A>Mh?E<@7-
zWl>i*!KPXMHf5~P4hQ`MIC2Gn4hKl~vbwkl7BHs3xoj@#_7_587CD%2q<fFLy$vR}
z_`K7J$>nAMLY0eL4qd_GXyd$|D-cYQ56G{9Nqw6$e=eJ2;2Dw53Y1|Q8(@;18lkcT
zY-hAbgbemH`JbiMOF%JxJ(>&+I*aY*jX|mC<DjCe0w~KxbhifVajeYUPxS9<t!Qwk
o2UZz6<)&DM%ttSy+xSoW0qPpTwH*s7r~m)}07*qoM6N<$f~hXwIRF3v

literal 0
HcmV?d00001

diff --git a/src/assets/images/weather_station.png b/src/assets/images/weather_station.png
new file mode 100644
index 0000000000000000000000000000000000000000..25ef7940456b5c016660ee3b11a417ac1daabd13
GIT binary patch
literal 472
zcmV;}0Vn>6P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0c}Y{K~#7F?N>`u
z!axvxJ+hYzK;Q}%u8k+~2*w-WQe21&iSFP8!VSEExCN>52r0Y(?laSNSZKb*gen&n
z^A=F)e*I>uyYs3796HFBcrsWAwp?OtR$=?aifcpa4L<Jx9-<a#_&#dg?_w!ffWRHp
zgl$b}2TqfA6V84D44;8chQydN)Rc*v#M~#!=H&trh~}y1`QpKw<<DxM1Pt=P9H0Ws
z9IZm{JQbSsZq~1Iil5Tx$WQQFLmT-kT%dFWv5sdVwm}6Hsc}ALs3@M%G<s61RTlhs
z>PDpXH7a0;3YR-lbX>(((#=G(G*?x$eC$qRt-Hyr^EommC=?j(7h+ONO#UMDD!XI#
z8p={W%Mu3JLRm7U#@g_gBD$0z``J9E%TfDkmv#etV!LF9$J-V%V_#VLz+b}ofb#+8
z1I`DW4>%uiKJY($Kn{yg6KteI7O?&_>)oy|*r=urSIKymVe1VJ7Wf9!zdf%%nuJ3D
O0000<MNUMnLSTZ^QN`{6

literal 0
HcmV?d00001

diff --git a/src/components/car/detail/TrackPlayback.vue b/src/components/car/detail/TrackPlayback.vue
index f8f69e5..736b7e4 100644
--- a/src/components/car/detail/TrackPlayback.vue
+++ b/src/components/car/detail/TrackPlayback.vue
@@ -34,7 +34,8 @@
           <div class="task-row3">
             <span class="point start">起点</span>
             <span class="label">{{ item.start }}</span>
-            <span class="arrow">——&gt;</span>
+            <!-- <span class="arrow">——&gt;</span> -->
+            <img class="arrow" src="@/assets/images/arrow.png" alt="arrow">
             <span class="point end">终点</span>
             <span class="label">{{ item.end }}</span>
           </div>
@@ -52,18 +53,18 @@
           <div class="panel-header">
             <span class="dot"></span>
             <span class="panel-title">轨迹详情</span>
-            <el-button size="small" type="primary" class="replay-btn">回放</el-button>
+            <el-button size="small" type="primary" class="replay-btn" @click="handleReplay">回放</el-button>
           </div>
           <!-- 第二行 -->
           <div class="panel-info">
             <div class="info-row">
-              <span class="carno">QN001</span>
-              <span class="info-item">最大时速 <b>91km/h</b></span>
-              <span class="info-item">平均时速 <b>28km/h</b></span>
-              <span class="info-item">总里程 <b>63.3km</b></span>
-              <span class="info-item">耗时 <b>20min</b></span>
-              <span class="info-item warn">冲突告警 <b>1</b></span>
-              <span class="info-item prewarn">冲突预警 <b>1</b></span>
+              <span class="carno">{{ activeTask?.licensePlate || activeVehicleId || "未选择车辆" }}</span>
+              <span class="info-item">最大时速 <b>{{ trackDetails.maxSpeed }}km/h</b></span>
+              <span class="info-item">平均时速 <b>{{ trackDetails.averageSpeed }}km/h</b></span>
+              <span class="info-item">总里程 <b>{{ trackDetails.totalDistance }}km</b></span>
+              <span class="info-item">耗时 <b>{{ trackDetails.totalTime }}min</b></span>
+              <span class="info-item warn">冲突告警 <b>{{ trackDetails.warnings }}</b></span>
+              <span class="info-item prewarn">冲突预警 <b>{{ trackDetails.preWarnings }}</b></span>
             </div>
           </div>
           <!-- 第三行：进度条 -->
@@ -79,7 +80,7 @@
               <!-- 预警/告警红旗 -->
               <div
                 v-for="flag in flags"
-                :key="flag.time"
+                :key="flag.label"
                 class="progress-flag"
                 :style="{left: flag.percent+'%'}"
                 :title="flag.label"
@@ -95,7 +96,7 @@
               </div>
             </div>
             <div class="progress-bottom">
-              <span class="start-time">2024-09-10 12:00:00</span>
+              <span class="start-time">{{ trackDetails.startTime || "未开始" }}</span>
               <div class="speed-select">
                 <el-dropdown @command="setSpeed">
                   <span class="el-dropdown-link">
@@ -110,7 +111,7 @@
                   </template>
                 </el-dropdown>
               </div>
-              <span class="end-time">2024-09-10 12:20:00</span>
+              <span class="end-time">{{ trackDetails.endTime || "未结束" }}</span>
             </div>
           </div>
         </div>
@@ -120,8 +121,31 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted, defineProps, watchEffect } from "vue";
 import { Search } from "@element-plus/icons-vue";
+import { 
+  listCarRunInfo, 
+  exportCarRunInfo, 
+  listCarRunInfoByVehicleId, 
+  listCarRunInfoByLicensePlate, 
+  getLatestLocationByVehicleId, 
+  getLatestLocationByLicensePlate 
+} from "@/api/monitor/carRunInfo";
+import { ElMessage } from "element-plus";
+
+// 查询参数
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  timeRange: [],
+  vehicleId: '',
+  licensePlate: ''
+});
+
+// 数据列表
+const runInfoList = ref([]);
+const loading = ref(false);
+const total = ref(0);
 
 // 车辆信息模拟数据
 const carInfo = {
@@ -134,59 +158,254 @@ const carInfo = {
   phone: "15689742356",
 };
 
-// 任务模拟数据
-const tasks = [
-  {
-    id: 1,
-    no: "001",
-    name: "东园区驱鸟",
-    time: "2024年8月16日 18:12:06--2024年8月18日 18:12:09",
-    start: "航站楼01西门",
-    end: "航站楼02东门",
-    status: "已完成",
-    speed: "28km/h",
-  },
-  {
-    id: 2,
-    no: "002",
-    name: "西园区驱鸟",
-    time: "2024年8月16日 18:12:06--2024年8月18日 18:12:09",
-    start: "航站楼03西门",
-    end: "航站楼04东门",
-    status: "已完成",
-    speed: "27km/h",
-  },
-  {
-    id: 3,
-    name: "南园区巡逻",
-    time: "2024年8月16日 18:12:09",
-    status: "已完成",
-    speed: "29km/h",
-  },
-  {
-    id: 4,
-    name: "北园区巡逻",
-    time: "2024年8月16日 18:12:09",
-    status: "已完成",
-    speed: "26km/h",
-  },
-];
+// 任务模拟数据（将由接口数据替换）
+const tasks = ref([]);
 
 const search = ref("");
-const activeId = ref(tasks[0].id);
+const activeId = ref(0);
+
+// 接收vehicle属性
+const props = defineProps({
+  vehicle: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+// 轨迹详情数据
+const trackDetails = ref({
+  maxSpeed: "0",
+  averageSpeed: "0",
+  totalDistance: "0",
+  totalTime: "0",
+  warnings: "0",
+  preWarnings: "0",
+  startTime: "",
+  endTime: ""
+});
+
+const activeVehicleId = ref("");
+
+// 监听vehicle属性变化
+watchEffect(() => {
+  if (props.vehicle?.carId) {
+    activeVehicleId.value = props.vehicle.carId;
+    // 更新查询参数
+    queryParams.value.vehicleId = props.vehicle.carId;
+  }
+});
+
+// 获取车辆运动信息列表数据
+async function getRunInfoList() {
+  loading.value = true;
+  try {
+    const response = await listCarRunInfo(queryParams.value);
+    // console.log("-----------------------------------,", response);
+    
+    if (response.code === 200) {
+      runInfoList.value = response.rows || [];
+      total.value = response.total;
+      
+      // 转换数据格式为任务列表
+      // 根据车辆ID对数据进行分组处理
+      const groupByVehicle = {};
+      runInfoList.value.forEach(item => {
+        if (!groupByVehicle[item.vehicleId]) {
+          groupByVehicle[item.vehicleId] = [];
+        }
+        groupByVehicle[item.vehicleId].push(item);
+      });
+      
+      // 将分组后的数据转换为任务列表格式
+      const tasksList = [];
+      Object.keys(groupByVehicle).forEach((vehicleId, index) => {
+        const vehicleData = groupByVehicle[vehicleId];
+        const firstPoint = vehicleData[0];
+        const lastPoint = vehicleData[vehicleData.length - 1];
+        
+        // 计算平均速度
+        const avgSpeed = (vehicleData.reduce((sum, point) => sum + point.speed, 0) / vehicleData.length).toFixed(2);
+        
+        tasksList.push({
+          id: parseInt(vehicleId),
+          no: vehicleId,
+          name: `车辆${firstPoint.licensePlate}轨迹`,
+          time: `${firstPoint.timestamp}--${lastPoint.timestamp}`,
+          start: `经度${firstPoint.longitude},纬度${firstPoint.latitude}`,
+          end: `经度${lastPoint.longitude},纬度${lastPoint.latitude}`,
+          status: "已完成",
+          speed: `${avgSpeed}km/h`,
+          licensePlate: firstPoint.licensePlate,
+          points: vehicleData
+        });
+      });
+      
+      tasks.value = tasksList;
+      
+      // 设置默认选中第一项
+      if (tasks.value.length > 0) {
+        activeId.value = tasks.value[0].id;
+      }
+    } else {
+      ElMessage.error(response.msg || '获取车辆运动信息列表失败');
+    }
+  } catch (error) {
+    console.error('获取车辆运动信息列表异常', error);
+    ElMessage.error('获取车辆运动信息列表异常');
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 根据车辆ID获取轨迹详情
+async function getTrackDetailByVehicleId(vehicleId) {
+  if (!vehicleId) return;
+  
+  try {
+    const response = await listCarRunInfoByVehicleId(vehicleId, {});
+    if (response.code === 200) {
+      const trackData = response.data || [];
+      // 处理轨迹数据...
+      console.log('车辆轨迹数据:', trackData);
+      // 这里可以处理轨迹点、告警点等
+      // 假设返回的数据格式与tasks中的points一致
+      processTrackPoints(trackData);
+    } else {
+      ElMessage.error(response.msg || '获取车辆轨迹详情失败');
+    }
+  } catch (error) {
+    console.error('获取车辆轨迹详情异常', error);
+  }
+}
+
+// 根据车牌号获取车辆最新位置
+async function getLatestLocation(licensePlate) {
+  if (!licensePlate) return;
+  
+  try {
+    const response = await getLatestLocationByLicensePlate(licensePlate);
+    if (response.code === 200) {
+      const locationData = response.data;
+      // 处理位置数据...
+      console.log('车辆最新位置:', locationData);
+    }
+  } catch (error) {
+    console.error('获取车辆最新位置异常', error);
+  }
+}
 
 const filteredTasks = computed(() => {
-  if (!search.value) return tasks;
-  return tasks.filter(
+  if (!search.value) return tasks.value;
+  return tasks.value.filter(
     (t) =>
       t.name.includes(search.value) ||
       t.no.includes(search.value) ||
       t.id.toString().includes(search.value)
   );
 });
-const activeTask = computed(() => tasks.find((t) => t.id === activeId.value));
+
+const activeTask = computed(() => tasks.value.find((t) => t.id === activeId.value));
+
 function selectTask(item) {
   activeId.value = item.id;
+  
+  // 从任务中提取轨迹数据
+  if (item.points && item.points.length > 0) {
+    processTrackPoints(item.points);
+  }
+}
+
+// 处理轨迹点数据
+function processTrackPoints(points) {
+  // 按时间排序
+  points.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+  
+  // 计算最大速度
+  const maxSpeed = Math.max(...points.map(p => p.speed)).toFixed(2);
+  
+  // 计算平均速度
+  const avgSpeed = (points.reduce((sum, p) => sum + p.speed, 0) / points.length).toFixed(2);
+  
+  // 计算总距离 (简单估算，实际应该使用更复杂的地理距离计算)
+  let totalDistance = 0;
+  for (let i = 1; i < points.length; i++) {
+    const prev = points[i-1];
+    const curr = points[i];
+    // 使用直线距离简单估算
+    const dist = Math.sqrt(
+      Math.pow(curr.longitude - prev.longitude, 2) + 
+      Math.pow(curr.latitude - prev.latitude, 2)
+    ) * 111000; // 粗略转换为米
+    totalDistance += dist;
+  }
+  const distanceKm = (totalDistance / 1000).toFixed(2);
+  
+  // 计算总时间
+  const startTime = new Date(points[0].timestamp);
+  const endTime = new Date(points[points.length-1].timestamp);
+  const totalMinutes = Math.round((endTime - startTime) / (60 * 1000));
+  
+  // 更新轨迹详情
+  trackDetails.value = {
+    maxSpeed: maxSpeed,
+    averageSpeed: avgSpeed,
+    totalDistance: distanceKm,
+    totalTime: totalMinutes > 0 ? totalMinutes.toString() : "1",
+    warnings: "0", // 实际应从数据中获取告警信息
+    preWarnings: "0", // 实际应从数据中获取预警信息
+    startTime: points[0].timestamp,
+    endTime: points[points.length-1].timestamp
+  };
+  
+  // 处理告警标记点 (示例，实际应根据数据判断)
+  flags.value = [
+    { 
+      percent: 20, 
+      label: "告警 " + points[Math.floor(points.length * 0.2)].timestamp 
+    },
+    { 
+      percent: 60, 
+      label: "预警 " + points[Math.floor(points.length * 0.6)].timestamp 
+    }
+  ];
+}
+
+// 回放按钮点击处理函数
+function handleReplay() {
+  // 获取当前选中任务
+  const activeTask = tasks.value.find(t => t.id === activeId.value);
+  
+  if (activeTask) {
+    if (activeTask.points && activeTask.points.length > 0) {
+      // 如果任务已包含轨迹点数据，直接处理
+      processTrackPoints(activeTask.points);
+      ElMessage.success('开始轨迹回放');
+    } else {
+      // 如果没有轨迹点数据，根据车辆ID获取
+      getTrackDetailByVehicleId(activeTask.id);
+    }
+  } else if (queryParams.value.vehicleId) {
+    // 使用查询参数中的车辆ID
+    getTrackDetailByVehicleId(queryParams.value.vehicleId);
+  } else if (props.vehicle?.carId) {
+    // 使用传入的车辆ID
+    getTrackDetailByVehicleId(props.vehicle.carId);
+  } else {
+    // 获取列表数据
+    getRunInfoList();
+    ElMessage.info('请先选择一个车辆任务');
+  }
+}
+
+// 导出车辆运动信息
+async function handleExport() {
+  try {
+    await exportCarRunInfo(queryParams.value);
+    ElMessage.success('导出成功');
+  } catch (error) {
+    console.error('导出车辆运动信息异常', error);
+    ElMessage.error('导出车辆运动信息异常');
+  }
 }
 
 const progress = ref(30); // 进度百分比
@@ -195,11 +414,8 @@ const showTooltip = ref(false);
 const tooltipTime = ref("");
 const tooltipLeft = ref(0);
 
-// 预警/告警红旗模拟数据
-const flags = [
-  { percent: 20, label: "告警 12:04:00" },
-  { percent: 60, label: "预警 12:12:00" }
-];
+// 预警/告警红旗模拟数据（将由接口数据替换）
+const flags = ref([]);
 
 // 拖动进度条
 let dragging = false;
@@ -247,6 +463,13 @@ function handleProgressClick(e) {
 function setSpeed(val) {
   speed.value = val;
 }
+
+// 页面加载时获取数据
+onMounted(() => {
+  getRunInfoList();
+  // getLatestLocation("鲁B579");
+  
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/map/controls/LayerSwitcher copy.vue b/src/components/map/controls/LayerSwitcher copy.vue
deleted file mode 100644
index af5748e..0000000
--- a/src/components/map/controls/LayerSwitcher copy.vue	
+++ /dev/null
@@ -1,1180 +0,0 @@
-<template>
-  <div class="layer-switcher">
-    <div class="layer-icon" @click="toggleLayerPanel"></div>
-    
-    <!-- 图层面板 -->
-    <div class="layer-panel" v-if="showPanel">
-      <!-- 标签页切换 -->
-      <div class="panel-tabs">
-        <div 
-          class="tab" 
-          :class="{ active: activeTab === 'icon' }" 
-          @click="activeTab = 'icon'"
-        >
-          图标
-        </div>
-       <div 
-          class="tab" 
-          :class="{ active: activeTab === 'text' }" 
-          @click="activeTab = 'text'"
-        >
-          文本
-        </div> 
-        <div 
-          class="tab" 
-          :class="{ active: activeTab === 'road' }" 
-          @click="activeTab = 'road'"
-        >
-          道路
-        </div>
-      </div>
-      
-      <div class="panel-content" v-if="activeTab === 'icon'">
-        
-        <!-- 航空器图层 -->
-        <div class="layer-group">
-          <div class="group-title">航空器</div>
-          <div class="layer-grid">
-            <div class="layer-item" v-for="layer in exampleVehicleLayers.filter(l => l.id !== 'no-people-car')" :key="'example-'+layer.id">
-              <label class="checkbox-container">
-                <input type="checkbox" :checked="layer.visible" @change="toggleExampleLayer(layer)">
-                <span class="checkmark"></span>
-                <span class="layer-name">{{ layer.name }}</span>
-                <img :src="layer.icon" class="layer-icon-preview" />
-              </label>
-            </div>
-          </div>
-        </div>
-        
-        <!-- 无人车全选 -->
-        <div class="layer-group">
-          <div class="group-title">无人车</div>
-          <div class="layer-grid-full">
-            <div class="layer-item">
-              <label class="checkbox-container">
-                <input type="checkbox" :checked="getExampleLayerById('no-people-car').visible" @change="toggleExampleLayer(getExampleLayerById('no-people-car'))">
-                <span class="checkmark"></span>
-                <span class="layer-name">无人车全选</span>
-                <img :src="noPeopleCarIcon" class="layer-icon-preview" />
-              </label>
-            </div>
-          </div>
-        </div>
-        
-        <!-- 常用车辆 -->
-        <div class="layer-group">
-          <div class="group-title">常用车辆</div>
-          <div class="layer-grid">
-            <div class="layer-item">
-              <label class="checkbox-container">
-                <input type="checkbox" :checked="getLayerById('driving-car').visible" @change="toggleVehicleLayer(getLayerById('driving-car'))">
-                <span class="checkmark"></span>
-                <span class="layer-name">驱鸟车</span>
-              </label>
-            </div>
-            <div class="layer-item">
-              <label class="checkbox-container">
-                <input type="checkbox" :checked="getLayerById('push-car').visible" @change="toggleVehicleLayer(getLayerById('push-car'))">
-                <span class="checkmark"></span>
-                <span class="layer-name">摆渡车</span>
-              </label>
-            </div>
-            <div class="layer-item">
-              <label class="checkbox-container">
-                <input type="checkbox" :checked="getLayerById('military-car').visible" @change="toggleVehicleLayer(getLayerById('military-car'))">
-                <span class="checkmark"></span>
-                <span class="layer-name">牵引车</span>
-              </label>
-            </div>
-          </div>
-        </div>
-          
-        <!-- 其他车辆图层 -->
-        <div class="layer-group">
-          <div class="group-title">其他车辆</div>
-          <div class="layer-grid">
-            <div class="layer-item" v-for="layer in otherVehicleLayers" :key="'vehicle-'+layer.id">
-              <label class="checkbox-container">
-                <input type="checkbox" :checked="layer.visible" @change="toggleVehicleLayer(layer)">
-                <span class="checkmark"></span>
-                <span class="layer-name">{{ layer.name }}</span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <div class="panel-content" v-else-if="activeTab === 'text'">
-        <div class="layer-group">
-          <div class="group-title">文本显示</div>
-          <div class="layer-grid">
-            <div class="layer-item" v-for="layer in exampleVehicleLayers" :key="'label-'+layer.id">
-              <label class="checkbox-container">
-                <input type="checkbox" :checked="layer.showLabel" @change="toggleExampleLabel(layer)">
-                <span class="checkmark"></span>
-                <span class="layer-name">{{ layer.name }}</span>
-              </label>
-            </div>
-          </div>
-        </div>
-        
-        
-      </div>
-      
-      <div class="panel-content" v-else>
-        <div class="layer-group">
-          <div class="group-title">道路图层</div>
-          <div class="layer-grid-full">
-            <div class="layer-item">
-              <label class="checkbox-container">
-                <input type="checkbox" :checked="!hideRoadLayer" @change="toggleHideRoadLayer" />
-                <span class="checkmark"></span>
-                <span class="layer-name">电子围栏</span>
-                <svg class="layer-icon-preview" width="24" height="24" viewBox="0 0 1024 1024"><path d="M356.246145 681.56286c-68.156286-41.949414-107.246583-103.84102-107.246583-169.805384 0-65.966411 39.090297-127.860063 107.246583-169.809477 12.046361-7.414877 15.800871-23.190165 8.385994-35.236526-7.413853-12.046361-23.191188-15.801894-35.236526-8.387018-39.640836 24.399713-72.539106 56.044434-95.137801 91.515297-23.86657 37.461193-36.481889 79.620385-36.481889 121.917724 0 42.297338 12.615319 84.454484 36.481889 121.914654 22.598694 35.469839 55.496965 67.11456 95.137801 91.51325 4.185322 2.576685 8.821923 3.804652 13.400195 3.804652 8.598842 0 16.998139-4.329609 21.836331-12.190647C372.047016 704.752002 368.291482 688.976714 356.246145 681.56286z" fill="#409eff"/></svg>
-              </label>
-            </div>
-            <!-- 添加自定义路线图层选项 -->
-            <div class="layer-item">
-              <label class="checkbox-container">
-                <input type="checkbox" v-model="showCustomRoadLayer" />
-                <span class="checkmark"></span>
-                <span class="layer-name">路线图</span>
-                <svg class="layer-icon-preview" width="24" height="24" viewBox="0 0 1024 1024"><path d="M356.246145 681.56286c-68.156286-41.949414-107.246583-103.84102-107.246583-169.805384 0-65.966411 39.090297-127.860063 107.246583-169.809477 12.046361-7.414877 15.800871-23.190165 8.385994-35.236526-7.413853-12.046361-23.191188-15.801894-35.236526-8.387018-39.640836 24.399713-72.539106 56.044434-95.137801 91.515297-23.86657 37.461193-36.481889 79.620385-36.481889 121.917724 0 42.297338 12.615319 84.454484 36.481889 121.914654 22.598694 35.469839 55.496965 67.11456 95.137801 91.51325 4.185322 2.576685 8.821923 3.804652 13.400195 3.804652 8.598842 0 16.998139-4.329609 21.836331-12.190647C372.047016 704.752002 368.291482 688.976714 356.246145 681.56286z" fill="#FF5722"/></svg>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, watch, computed, onBeforeMount, onUnmounted } from 'vue';
-import { Vector as VectorSource } from 'ol/source';
-import { Vector as VectorLayer } from 'ol/layer';
-import { Style, Icon, Stroke, Fill } from 'ol/style';
-import Feature from 'ol/Feature';
-import Point from 'ol/geom/Point';
-import GeoJSON from 'ol/format/GeoJSON';
-import Overlay from 'ol/Overlay';
-import labelBg from '../../../assets/images/label_bg.png';
-
-// 导入车辆图标
-import car1Icon from '../../../assets/images/Aircraft.png'; //滑入航空器
-import car1Icon1 from '../../../assets/images/Aircraft1.png'; //滑出航空器
-import car2Icon from '../../../assets/images/noPeopleCar.png';
-import noPeopleCarIcon from '../../../assets/images/noPeopleCar.png';
-import airportBg from '../../../assets/images/airport_bg.png'; // 蓝色背景
-import airportOutBg from '../../../assets/images/airport_out.png'; // 黄色背景
-
-// 定义props接收地图实例
-const props = defineProps({
-  map: Object
-});
-
-// 响应式状态
-const showPanel = ref(false);
-const activeTab = ref('icon'); // 默认选中图标标签页
-const selectedTextStyle = ref('white'); // 默认选中白色样式
-
-// 新增：道路tab相关状态
-const hideRoadLayer = ref(false); // 默认不隐藏（即显示）
-const showRoadLayer = computed(() => !hideRoadLayer.value); // 计算属性，与hideRoadLayer相反
-let roadVectorLayer = null;
-
-// 新增：自定义路线图层状态
-const showCustomRoadLayer = ref(true); // 默认显示
-let customRoadVectorLayer = null;
-
-// 车辆图层 - 默认选中
-const exampleVehicleLayers = ref([
-  { 
-    id: 'car1-layer', 
-    name: '滑入航空器', 
-    visible: true, 
-    showLabel: true,
-    icon: car1Icon1,
-    type: 'aircraft-in',
-    layer: null,
-    features: [
-      { id: 'car1-1', position: [40507699.051041, 4026243.105796], name: '滑入航空器1', speed: 50 },
-      { id: 'car1-2', position: [40508097.909698, 4026315.085762], name: '滑入航空器2', speed: 50 }
-    ]
-  },
-  { 
-    id: 'car1-layer1', 
-    name: '滑出航空器', 
-    visible: true, 
-    showLabel: true,
-    icon: car1Icon,
-    type: 'aircraft-out',
-    layer: null,
-    features: [
-      { id: 'car2-1', position: [4.0507e7, 4024000], name: '滑出航空器1', speed: 50 },
-   
-    ]
-  },
-  { 
-    id: 'no-people-car', 
-    name: '无人车全选', 
-    visible: true, 
-    showLabel: true,
-    icon: noPeopleCarIcon,
-    type: 'car',
-    layer: null,
-    features: [
-      { id: 'no-people-car-1', position: [40508392.141630, 4026279.431719], name: '无人车1', speed: 17 },
-      { id: 'no-people-car-2', position: [40507625.995559, 4025622.462289], name: '无人车2', speed: 17 }
-    ]
-  }
-]);
-
-// 车辆图层 - 设置默认显示状态
-const vehicleLayers = ref([
-  { id: 'slip-in-plane', name: '滑入航空器', visible: true, layer: null },
-  { id: 'slip-out-plane', name: '滑出航空器', visible: true, layer: null },
-  { id: 'uav', name: '无人车全选', visible: true, layer: null },
-  { id: 'driving-car', name: '驱鸟车', visible: true, layer: null },
-  { id: 'push-car', name: '摆渡车', visible: true, layer: null },
-  { id: 'military-car', name: '牵引车', visible: true, layer: null },
-  { id: 'special-car', name: '特勤车全选', visible: false, layer: null },
-  { id: 'fire-car', name: '消防车', visible: false, layer: null },
-  { id: 'water-car', name: '清水车', visible: false, layer: null },
-  { id: 'patrol-car', name: '巡逻车', visible: false, layer: null },
-  { id: 'emergency-car', name: '急救车', visible: false, layer: null },
-  { id: 'container-car', name: '客梯车', visible: false, layer: null },
-  { id: 'small-car', name: '小型客车', visible: false, layer: null },
-  { id: 'maintenance-car', name: '维修车', visible: false, layer: null },
-  { id: 'tool-car', name: '工具车', visible: false, layer: null },
-  { id: 'tour-car', name: '巡游车', visible: false, layer: null },
-  { id: 'sewage-car', name: '污水车', visible: false, layer: null },
-  { id: 'road-car', name: '道路车', visible: false, layer: null },
-  { id: 'garbage-car', name: '垃圾车', visible: false, layer: null },
-  { id: 'police-car', name: '警察车', visible: false, layer: null },
-  { id: 'forklift', name: '叉车', visible: false, layer: null }
-]);
-
-
-
-// 计算属性：其他车辆图层（排除常用车辆）
-const otherVehicleLayers = computed(() => {
-  const excludedIds = ['uav', 'driving-car', 'push-car', 'military-car', 'slip-in-plane', 'slip-out-plane'];
-  return vehicleLayers.value.filter(layer => !excludedIds.includes(layer.id));
-});
-
-// 通过ID获取图层
-function getLayerById(id) {
-  return vehicleLayers.value.find(layer => layer.id === id) || { visible: false };
-}
-
-// 通过ID获取示例图层
-function getExampleLayerById(id) {
-  return exampleVehicleLayers.value.find(layer => layer.id === id) || { visible: false };
-}
-
-// 向父组件发出事件
-const emit = defineEmits(['layerChange']);
-
-// 切换图层面板显示
-function toggleLayerPanel() {
-  showPanel.value = !showPanel.value;
-}
-
-// 切换示例图层
-function toggleExampleLayer(layer) {
-  layer.visible = !layer.visible;
-  
-  if (layer.layer) {
-    layer.layer.setVisible(layer.visible);
-  }
-  
-  // 同步更新文本标签的可见性
-  layer.features.forEach(vehicle => {
-    if (vehicle.overlay) {
-      if (layer.visible && layer.showLabel) {
-        // 如果图层可见且文本应该显示，则添加overlay
-        try {
-          props.map.removeOverlay(vehicle.overlay);
-        } catch (e) {
-          // 忽略错误
-        }
-        props.map.addOverlay(vehicle.overlay);
-        if (!allLabelOverlays.includes(vehicle.overlay)) {
-          allLabelOverlays.push(vehicle.overlay);
-        }
-      } else {
-        // 如果图层不可见或文本不应该显示，则移除overlay
-        try {
-          props.map.removeOverlay(vehicle.overlay);
-          allLabelOverlays = allLabelOverlays.filter(o => o !== vehicle.overlay);
-        } catch (e) {
-          // 忽略错误
-        }
-      }
-    }
-  });
-  
-  // 发出图层变化事件
-  emit('layerChange', {
-    type: 'exampleLayer',
-    layer: layer
-  });
-}
-
-// 记录所有已添加的label overlay，便于统一管理
-let allLabelOverlays = [];
-
-function removeAllLabelOverlays() {
-  if (!props.map) return;
-  allLabelOverlays.forEach(overlay => {
-    props.map.removeOverlay(overlay);
-  });
-  allLabelOverlays = [];
-}
-
-function initExampleLayers() {
-  if (!props.map) return;
-  removeAllLabelOverlays(); // 先移除所有label overlay
-  allLabelOverlays = []; // 清空数组
-  
-  exampleVehicleLayers.value.forEach(layerConfig => {
-    const source = new VectorSource();
-    const style = new Style({
-      image: new Icon({
-        src: layerConfig.icon,
-        scale: 1.5,
-        anchor: [0.5, 0.5]
-      })
-    });
-    layerConfig.features.forEach(vehicle => {
-      const feature = new Feature({
-        geometry: new Point(vehicle.position),
-        name: vehicle.name,
-        id: vehicle.id
-      });
-      feature.setStyle(style); // 只设置图标
-      source.addFeature(feature);
-      
-      // 创建标签内容
-      const labelDiv = document.createElement('div');
-      labelDiv.className = `custom-label label-${layerConfig.type}`;
-      
-      // 根据类型选择背景图片 - 滑入使用黄色背景(airport_out.png)，滑出使用蓝色背景(airport_bg.png)
-      let backgroundImage;
-      if (layerConfig.type === 'aircraft-in') {
-        backgroundImage = airportOutBg; // 滑入航空器背景 - 黄色
-      } else if (layerConfig.type === 'aircraft-out') {
-        backgroundImage = airportBg; // 滑出航空器背景 - 蓝色
-      } else {
-        backgroundImage = labelBg; // 普通车辆背景
-      }
-      
-      labelDiv.style.backgroundImage = `url(${backgroundImage})`;
-      labelDiv.style.backgroundRepeat = 'no-repeat';
-      labelDiv.style.backgroundSize = '100% 100%';
-      labelDiv.style.padding = '3px 10px';
-      labelDiv.innerText =
-        layerConfig.type === 'aircraft-in'
-          ? `航空器在线 ${vehicle.speed}km/h`
-          : layerConfig.type === 'aircraft-out'
-          ? `航空器在线 ${vehicle.speed}km/h`
-          : layerConfig.type === 'car'
-          ? `${vehicle.name.replace('无人车', 'QN00')}在线 ${vehicle.speed}km/h`
-          : vehicle.name;
-      
-      // 创建并设置overlay
-      const overlay = new Overlay({
-        element: labelDiv,
-        position: vehicle.position,
-        positioning: 'bottom-center',
-        offset: [0, -20], // 减小偏移量，使标签更接近图标
-        stopEvent: false
-      });
-      
-      vehicle.overlay = overlay;
-      
-      // 只在showLabel为true且图层可见时addOverlay
-      if (layerConfig.showLabel && layerConfig.visible) {
-        props.map.addOverlay(overlay);
-        allLabelOverlays.push(overlay);
-      }
-    });
-    
-    const vectorLayer = new VectorLayer({
-      source: source,
-      visible: layerConfig.visible,
-      zIndex: 10
-    });
-    
-    layerConfig.layer = vectorLayer;
-    props.map.addLayer(vectorLayer);
-    vectorLayer.setVisible(layerConfig.visible);
-    
-    console.log(`初始化图层: ${layerConfig.id}, 图标可见性: ${layerConfig.visible}, 文本可见性: ${layerConfig.showLabel}`);
-  });
-}
-
-// 切换业务图层
-function toggleVehicleLayer(layer) {
-  layer.visible = !layer.visible;
-  
-  if (layer.layer) {
-    layer.layer.setVisible(layer.visible);
-  }
-  
-  // 发出图层变化事件
-  emit('layerChange', {
-    type: 'vehicleLayer',
-    layer: layer
-  });
-}
-
-// 切换文本样式
-function toggleTextStyle(textStyle) {
-  textStyle.visible = !textStyle.visible;
-  
-  // 发出文本样式变化事件
-  emit('layerChange', {
-    type: 'textStyle',
-    style: textStyle
-  });
-}
-
-// 选择文本样式
-function selectTextStyle(style) {
-  selectedTextStyle.value = style;
-  console.log('选择文本样式:', style);
-  
-  // 更新所有标签的样式
-  const allLabels = document.querySelectorAll('.custom-label');
-  allLabels.forEach(label => {
-    // 确保背景图片始终存在
-    label.style.backgroundImage = labelBg;
-    label.style.backgroundRepeat = "no-repeat";
-    label.style.backgroundSize = "100% 100%";
-    
-    // 根据样式名称应用不同的样式
-    switch(style) {
-      case 'blue':
-        // 应用蓝色样式
-        // label.style.backgroundColor = 'rgba(52, 122, 226, 0.7)';
-        // label.style.borderColor = '#347AE2';
-        label.style.color = '#fff';
-        break;
-      case 'white':
-        // 应用白色样式
-        // label.style.backgroundColor = 'rgba(255, 255, 255, 0.7)';
-        // label.style.borderColor = '#ffffff';
-        label.style.color = '#333';
-        break;
-      default:
-        // 默认样式，恢复原始样式
-        if (label.classList.contains('label-aircraft-in')) {
-          // label.style.backgroundColor = 'rgba(245, 231, 79, 0.7)';
-          // label.style.borderColor = '#E4CB0D';
-          label.style.color = '#333'; // 滑入航空器 - 黄色背景，黑色文字
-        } else if (label.classList.contains('label-aircraft-out')) {
-          // label.style.backgroundColor = 'rgba(52, 122, 226, 0.7)';
-          // label.style.borderColor = '#347AE2';
-          label.style.color = '#fff'; // 滑出航空器 - 蓝色背景，白色文字
-        } else if (label.classList.contains('label-car')) {
-          // label.style.backgroundColor = 'rgba(37, 37, 37, 0.7)';
-          // label.style.borderColor = '#484848';
-          label.style.color = '#fff';
-        }
-    }
-  });
-  
-  // 发出文本样式选择事件
-  emit('layerChange', {
-    type: 'selectTextStyle',
-    style: style
-  });
-}
-
-// 更新所有标签的样式
-function updateAllLabelsStyle(styleName) {
-  console.log('更新文本样式为:', styleName);
-  
-  // 移除所有标签上的样式类
-  const allLabels = document.querySelectorAll('.custom-label');
-  allLabels.forEach(label => {
-    label.classList.remove('style-default', 'style-blue', 'style-white');
-    label.classList.add(`style-${styleName}`);
-    
-    // 获取标签的类型
-    const isAircraftIn = label.classList.contains('label-aircraft-in');
-    const isAircraftOut = label.classList.contains('label-aircraft-out');
-    const isCar = label.classList.contains('label-car');
-    
-    // 根据样式名称应用不同的样式
-    switch(styleName) {
-      case 'blue':
-        // 应用蓝色样式
-        // label.style.backgroundColor = 'rgba(52, 122, 226, 0.7)';
-        // label.style.borderColor = '#347AE2';
-        label.style.color = '#fff';
-        label.style.fontSize = '12px';
-        label.style.background = 'url(../../../assets/images/label_bg.png) no-repeat';
-        break;
-      case 'white':
-        // 应用白色样式
-        // label.style.backgroundColor = 'rgba(255, 255, 255, 0.7)';
-        // label.style.borderColor = '#ffffff';
-        label.style.color = '#333';
-        break;
-      default:
-        // 默认样式，恢复原始样式
-        if (isAircraftIn) {
-          // label.style.backgroundColor = 'rgba(245, 231, 79, 0.7)';
-          // label.style.borderColor = '#E4CB0D';
-          label.style.color = '#333'; // 滑入航空器 - 黄色背景，黑色文字
-        } else if (isAircraftOut) {
-          // label.style.backgroundColor = 'rgba(52, 122, 226, 0.7)';
-          // label.style.borderColor = '#347AE2';
-          label.style.color = '#fff'; // 滑出航空器 - 蓝色背景，白色文字
-        } else if (isCar) {
-          // label.style.backgroundColor = 'rgba(37, 37, 37, 0.7)';
-          // label.style.borderColor = '#484848';
-          label.style.color = '#fff';
-        }
-    }
-  });
-}
-
-// 初始化图层
-function initLayers() {
-  if (!props.map) return;
-  
-  // 初始化示例图层
-  initExampleLayers();
-}
-
-// 设置图层可见性的方法（供外部调用）
-function setLayerVisibility(layerId, visible) {
-  // 查找并设置示例图层可见性
-  const exampleLayer = exampleVehicleLayers.value.find(layer => layer.id === layerId);
-  if (exampleLayer) {
-    exampleLayer.visible = visible;
-    if (exampleLayer.layer) {
-      exampleLayer.layer.setVisible(visible);
-    }
-    return true;
-  }
-  
-  // 查找并设置车辆图层可见性
-  const vehicleLayer = vehicleLayers.value.find(layer => layer.id === layerId);
-  if (vehicleLayer) {
-    vehicleLayer.visible = visible;
-    
-    // 发出图层变化事件
-    emit('layerChange', {
-      type: 'vehicleLayer',
-      layer: vehicleLayer
-    });
-    
-    return true;
-  }
-  
-  return false;
-}
-
-// 切换电子围栏显示状态
-function toggleHideRoadLayer() {
-  hideRoadLayer.value = !hideRoadLayer.value;
-  console.log('toggleHideRoadLayer: hideRoadLayer =', hideRoadLayer.value, 'showRoadLayer =', showRoadLayer.value);
-  
-  if (showRoadLayer.value) {
-    addRoadLayer();
-  } else {
-    removeRoadLayer();
-  }
-}
-
-// 组件挂载时初始化
-onMounted(() => {
-  if (props.map) {
-    // 先初始化图层
-    initLayers();
-    
-    // 初始化自定义路线图层
-    loadCustomRoadLayer();
-    
-    // 初始化电子围栏图层 - 默认显示
-    if (showRoadLayer.value) {
-      addRoadLayer();
-    }
-    
-    // 确保样式正确应用
-    setTimeout(() => {
-      console.log('组件挂载后应用默认样式');
-      updateAllLabelsStyle('default');
-    }, 200);
-  }
-});
-
-// 监听地图实例变化
-watch(() => props.map, (newMap) => {
-  if (newMap) {
-    // 先初始化图层
-    initLayers();
-    
-    // 初始化自定义路线图层
-    loadCustomRoadLayer();
-    
-    // 初始化电子围栏图层
-    if (showRoadLayer.value) {
-      addRoadLayer();
-    }
-    
-    // 确保样式正确应用
-    setTimeout(() => {
-      console.log('地图实例变化后应用默认样式');
-      // 直接调用selectTextStyle应用默认样式
-      selectTextStyle('default');
-    }, 200);
-  }
-});
-
-// 向外暴露方法
-defineExpose({
-  setLayerVisibility
-});
-
-async function loadCustomRoadLayer() {
-  // 先移除已存在的自定义路线图层，避免重复
-  removeCustomRoadLayer();
-  if (!props.map) return;
-  try {
-    // 使用相对路径加载自定义路线文件
-    const res = await fetch('./roadTest.json');
-    const geojson = await res.json();
-    const source = new VectorSource({
-      features: new GeoJSON().readFeatures(geojson, {
-        dataProjection: 'EPSG:4326',
-        featureProjection: props.map.getView().getProjection()
-      })
-    });
-    
-    customRoadVectorLayer = new VectorLayer({
-      source,
-      style: new Style({
-        stroke: new Stroke({ color: '#888', width: 4 })
-      }),
-      zIndex: 2, // 确保在标准道路图层之上
-      visible: showCustomRoadLayer.value
-    });
-    
-    props.map.addLayer(customRoadVectorLayer);
-    console.log('loadCustomRoadLayer: 已添加自定义路线图层', customRoadVectorLayer);
-  } catch (e) {
-    console.error('loadCustomRoadLayer: 加载或添加自定义路线图层失败', e);
-  }
-}
-
-function removeCustomRoadLayer() {
-  if (!props.map) return;
-  let removed = false;
-  // 获取所有图层，查找类型为 VectorLayer 且 zIndex 为 2 的（即自定义路线图层）
-  const layers = props.map.getLayers().getArray();
-  for (let i = layers.length - 1; i >= 0; i--) {
-    const lyr = layers[i];
-    if (lyr instanceof VectorLayer && lyr.getZIndex && lyr.getZIndex() === 2) {
-      props.map.removeLayer(lyr);
-      removed = true;
-      console.log('removeCustomRoadLayer: 已移除自定义路线图层', lyr);
-    }
-  }
-  customRoadVectorLayer = null;
-  if (!removed) {
-    console.log('removeCustomRoadLayer: 没有找到可移除的自定义路线图层');
-  }
-}
-
-// 监听自定义路线显示状态变化
-watch(showCustomRoadLayer, (val) => {
-  console.log('showCustomRoadLayer变化:', val);
-  if (val) {
-    if (customRoadVectorLayer) {
-      customRoadVectorLayer.setVisible(true);
-    } else {
-      loadCustomRoadLayer();
-    }
-  } else if (customRoadVectorLayer) {
-    customRoadVectorLayer.setVisible(false);
-  }
-});
-
-async function addRoadLayer() {
-  // 先移除已存在的道路图层，避免重复
-  removeRoadLayer();
-  if (!props.map) return;
-  try {
-    // 使用相对路径，确保在任何部署环境下都能正确加载
-    const res = await fetch('./dianziweilan.json');
-    const geojson = await res.json();
-    const source = new VectorSource({
-      features: new GeoJSON().readFeatures(geojson, {
-        dataProjection: 'EPSG:4326',
-        featureProjection: props.map.getView().getProjection()
-      })
-    });
-    
-    // 创建两个图层样式 - 一个用于普通状态，一个用于闪烁状态
-    const normalStyle = new Style({
-      stroke: new Stroke({ color: 'rgba(0, 0, 0, 0.4)', width: 4 }),
-      fill: new Fill({ color: 'rgba(0, 0, 0, 0.5)' })
-    });
-    
-    const flashStyle = new Style({
-      stroke: new Stroke({ color: 'rgba(255, 0, 0, 0.8)', width: 4 }),
-      fill: new Fill({ color: 'rgba(255, 0, 0, 0.3)' })
-    });
-    
-    roadVectorLayer = new VectorLayer({
-      source,
-      style: normalStyle,
-      zIndex: 1,
-      className: 'fence-layer'
-    });
-    
-    props.map.addLayer(roadVectorLayer);
-    console.log('addRoadLayer: 已添加电子围栏图层', roadVectorLayer);
-    
-    // 开始闪烁效果
-    startFenceFlashing(roadVectorLayer, normalStyle, flashStyle);
-    
-  } catch (e) {
-    console.error('addRoadLayer: 加载或添加电子围栏图层失败', e);
-  }
-}
-
-let flashingInterval = null;
-
-// 启动闪烁效果
-function startFenceFlashing(layer, normalStyle, flashStyle) {
-  // 清除可能存在的旧定时器
-  if (flashingInterval) {
-    clearInterval(flashingInterval);
-  }
-  
-  // 闪烁状态标志
-  let isFlashing = false;
-  
-  // 定时切换样式
-  flashingInterval = setInterval(() => {
-    if (!layer) return;
-    
-    layer.setStyle(isFlashing ? normalStyle : flashStyle);
-    isFlashing = !isFlashing;
-  }, 800); // 每800毫秒切换一次样式
-}
-
-// 停止闪烁效果
-function stopFenceFlashing() {
-  if (flashingInterval) {
-    clearInterval(flashingInterval);
-    flashingInterval = null;
-  }
-}
-
-// 移除电子围栏图层时也停止闪烁
-function removeRoadLayer() {
-  if (!props.map) return;
-  stopFenceFlashing();
-  let removed = false;
-  // 获取所有图层，查找类型为 VectorLayer 且 zIndex 为 1 的（即道路图层）
-  const layers = props.map.getLayers().getArray();
-  for (let i = layers.length - 1; i >= 0; i--) {
-    const lyr = layers[i];
-    if (lyr instanceof VectorLayer && lyr.getZIndex && lyr.getZIndex() === 1) {
-      props.map.removeLayer(lyr);
-      removed = true;
-      console.log('removeRoadLayer: 已移除道路图层', lyr);
-    }
-  }
-  roadVectorLayer = null;
-  if (!removed) {
-    console.log('removeRoadLayer: 没有找到可移除的道路图层');
-  }
-}
-
-watch(showRoadLayer, (val) => {
-  console.log('showRoadLayer变化:', val);
-  if (val) addRoadLayer();
-  else removeRoadLayer();
-});
-
-onUnmounted(() => {
-  removeRoadLayer();
-  removeCustomRoadLayer();
-  stopFenceFlashing();
-});
-
-// 新增：切换label显示
-function toggleExampleLabel(layer) {
-  layer.showLabel = !layer.showLabel;
-  console.log(`切换${layer.name}文本显示:`, layer.showLabel);
-  
-  // 遍历该图层的所有feature，更新其overlay的可见性
-  layer.features.forEach(vehicle => {
-    if (vehicle.overlay) {
-      if (layer.showLabel) {
-        // 如果之前已经添加过，先移除以避免重复
-        try {
-          props.map.removeOverlay(vehicle.overlay);
-        } catch (e) {
-          console.log('移除overlay失败，可能不存在:', e);
-        }
-        
-        // 添加overlay
-        props.map.addOverlay(vehicle.overlay);
-        if (!allLabelOverlays.includes(vehicle.overlay)) {
-          allLabelOverlays.push(vehicle.overlay);
-        }
-      } else {
-        // 移除overlay
-        try {
-          props.map.removeOverlay(vehicle.overlay);
-          allLabelOverlays = allLabelOverlays.filter(o => o !== vehicle.overlay);
-        } catch (e) {
-          console.log('移除overlay失败:', e);
-        }
-      }
-    }
-  });
-  
-  // 发出图层变化事件
-  emit('layerChange', {
-    type: 'labelChange',
-    layer: layer,
-    showLabel: layer.showLabel
-  });
-}
-</script>
-
-<style scoped>
-.layer-switcher {
-  position: relative;
-}
-
-.layer-icon {
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-}
-
-.layer-panel {
-  position: absolute;
-  top: 10px;
-  left: 50px;
-  width:397px;
-  background-color: #424851;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
-  z-index: 3100;
-  overflow: hidden;
-  color: #ffffff;
-}
-
-
-.panel-tabs {
-  display: flex;
-  border-bottom: 1px solid #303850;
-
-}
-
-.tab {
-  padding: 0 20px;
-  height: 40px;
-  line-height: 40px;
-  font-size: 14px;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  color: #F0F0F0;
-  position: relative;
-}
-
-.tab:hover {
-  color: #409eff;
-}
-
-.tab.active {
-  color: #409eff;
-}
-
-.tab.active::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100%;
-  height: 2px;
-  background-color: #409eff;
-}
-
-.panel-content {
-  padding: 10px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.layer-group {
-  margin-bottom: 15px;
-}
-
-.group-title {
-  font-weight: bold;
-  margin-bottom: 8px;
-  padding-bottom: 5px;
-  border-bottom: 1px solid #999999;
-  color: #ffffff;
-}
-
-.layer-grid {
-  display: grid;
-  grid-template-columns: auto auto auto;
-  gap: 5px;
-}
-
-.layer-grid-full {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 5px;
-}
-
-.layer-item {
-  padding: 6px 0;
-}
-
-/* 自定义复选框样式 */
-.checkbox-container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding-left: 30px;
-  cursor: pointer;
-  font-size: 14px;
-  user-select: none;
-}
-
-.checkbox-container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-.checkmark {
-  position: absolute;
-  left: 0;
-  height: 18px;
-  width: 18px;
-  background-color: transparent;
-  border: 1px solid #999999;
-  border-radius: 3px;
-}
-
-.checkbox-container:hover input ~ .checkmark {
-  background-color: #666666;
-}
-
-.checkbox-container input:checked ~ .checkmark {
-  background-color: #0096ff;
-  border-color: #0078cc;
-}
-
-.checkmark:after {
-  content: "";
-  position: absolute;
-  display: none;
-}
-
-.checkbox-container input:checked ~ .checkmark:after {
-  display: block;
-}
-
-.checkbox-container .checkmark:after {
-  left: 6px;
-  top: 2px;
-  width: 5px;
-  height: 10px;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-}
-
-.layer-name {
-  margin-left: 5px;
-  color: #ffffff;
-}
-
-/* 图层图标预览 */
-.layer-icon-preview {
-  width: 20px;
-  height: 20px;
-  margin-left: 8px;
-  object-fit: contain;
-}
-
-/* 滚动条样式 */
-.panel-content::-webkit-scrollbar {
-  width: 6px;
-}
-
-.panel-content::-webkit-scrollbar-track {
-  background: #555555;
-}
-
-.panel-content::-webkit-scrollbar-thumb {
-  background: #999999;
-  border-radius: 3px;
-}
-
-.panel-content::-webkit-scrollbar-thumb:hover {
-  background: #bbbbbb;
-}
-
-/* 文本样式选择器 */
-.style-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  padding: 10px 0;
-}
-
-.style-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 5px 10px;
-}
-
-.style-label {
-  font-size: 14px;
-  color: #ffffff;
-}
-
-.radio-box {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #999999;
-  border-radius: 3px;
-  cursor: pointer;
-  position: relative;
-}
-
-.radio-box:hover {
-  border-color: #bbbbbb;
-}
-
-.radio-box.active {
-  border-color: #0096ff;
-}
-
-.radio-box.active::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 12px;
-  height: 12px;
-  background-color: #0096ff;
-  border-radius: 1px;
-}
-
-.radio-box.blue {
-  border-color: #0096ff;
-}
-
-.radio-box.blue.active::after {
-  background-color: #0096ff;
-}
-
-.radio-box.white {
-  border-color: #ffffff;
-}
-
-.radio-box.white.active::after {
-  background-color: #ffffff;
-}
-
-/* 道路json样式 */
-.road-json {
-  padding: 10px;
-  background-color: #333;
-  border-radius: 4px;
-  margin-top: 10px;
-}
-
-.road-json pre {
-  margin: 0;
-  padding: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-/* 自定义标签样式 */
-.custom-label {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 120px;
-  height: 28px;
-  padding: 0 10px;
-  font-size: 12px;
-  font-weight: bold;
-  border-radius: 4px;
-  border: 1px solid;
-  color: #fff;
-  box-sizing: border-box;
-  white-space: nowrap;
-  z-index: 1000;
-  pointer-events: none;
-  transform: translateX(-50%);
-}
-
-/* 滑入航空器 - 黄色背景，黑色文字 */
-.label-aircraft-in {
-  background-color: rgba(245, 231, 79, 0.7);
-  border-color: #E4CB0D;
-  color: #333;
-}
-
-/* 滑出航空器 - 蓝色背景，白色文字 */
-.label-aircraft-out {
-  background-color: rgba(52, 122, 226, 0.7);
-  border-color: #347AE2;
-  color: #fff;
-}
-
-/* 无人车 */
-.label-car {
-  background-color: rgba(37, 37, 37, 0.7);
-  border-color: #484848;
-  color: #fff;
-}
-
-/* 文本样式类 */
-.custom-label.style-default {
-  /* 默认样式在各个类型中已定义 */
-}
-
-.custom-label.style-blue {
-  background-color: rgba(52, 122, 226, 0.7) !important;
-  border-color: #347AE2 !important;
-  color: #fff !important;
-}
-
-.custom-label.style-white {
-  background-color: rgba(255, 255, 255, 0.7) !important;
-  border-color: #ffffff !important;
-  color: #333 !important;
-}
-</style> 
\ No newline at end of file
diff --git a/src/components/map/controls/LayerSwitcher.vue b/src/components/map/controls/LayerSwitcher.vue
index fe2dcbb..2f3d2e2 100644
--- a/src/components/map/controls/LayerSwitcher.vue
+++ b/src/components/map/controls/LayerSwitcher.vue
@@ -64,7 +64,7 @@
       
       <div class="panel-content" v-else>
         <div class="layer-group">
-          <div class="group-title">道路图层</div>
+          <!-- <div class="group-title">道路图层</div> -->
           <div class="layer-grid-full">
             <div class="layer-item">
               <label class="checkbox-container">
@@ -203,7 +203,7 @@ async function loadCustomRoadLayer() {
     customRoadVectorLayer = new VectorLayer({
       source,
       style: new Style({
-        stroke: new Stroke({ color: '#888', width: 4 })
+        stroke: new Stroke({ color: '#C9C9C9', width: 1 })
       }),
       zIndex: 2, // 确保在标准道路图层之上
       visible: showCustomRoadLayer.value
@@ -266,12 +266,12 @@ async function addRoadLayer() {
     
     // 创建两个图层样式 - 一个用于普通状态，一个用于闪烁状态
     const normalStyle = new Style({
-      stroke: new Stroke({ color: 'rgba(0, 0, 0, 0.4)', width: 4 }),
-      fill: new Fill({ color: 'rgba(0, 0, 0, 0.5)' })
+      stroke: new Stroke({ color: 'rgba(0, 0, 0, 0.4)', width: 1 }),
+      fill: new Fill({ color: 'rgba(0, 0, 0, 0.2)' })
     });
     
     const flashStyle = new Style({
-      stroke: new Stroke({ color: 'rgba(255, 0, 0, 0.8)', width: 4 }),
+      stroke: new Stroke({ color: 'rgba(255, 0, 0, 0.8)', width: 1 }),
       fill: new Fill({ color: 'rgba(255, 0, 0, 0.3)' })
     });
     
diff --git a/src/components/map/controls/README.md b/src/components/map/controls/README.md
new file mode 100644
index 0000000..153a308
--- /dev/null
+++ b/src/components/map/controls/README.md
@@ -0,0 +1,167 @@
+# 车辆移动控制系统组件重构20250711
+
+## 概述
+
+原有的 `VehicleMovementControl.vue` 文件过于庞大（1647行），不利于维护和查阅。本次重构将其拆分为多个专注的组件，提高代码的可维护性和可读性。
+
+## 组件结构
+
+### 主组件
+- **VehicleMovementControlRefactored.vue** - 重构后的主组件，整合所有子组件
+
+### 子组件
+
+#### 1. VehicleAnimationSystem.vue
+**功能**: 车辆平滑动画系统
+- 平滑动画逻辑
+- 运动预测算法
+- 缓动函数
+- 动画循环管理
+
+**主要方法**:
+- `startAnimationLoop()` - 启动动画循环
+- `stopAnimationLoop()` - 停止动画循环
+- `resetAnimations()` - 重置动画数据
+- `initVehicleAnimation()` - 初始化车辆动画
+- `updateVehicleAnimationTarget()` - 更新动画目标
+
+#### 2. VehicleLabelSystem.vue
+**功能**: 车辆标签系统
+- 标签创建和更新
+- 标签样式管理
+- 标签位置计算
+
+**主要方法**:
+- `updateVehicleLabel()` - 更新车辆标签
+- `removeVehicleLabel()` - 移除车辆标签
+- `updateAllLabels()` - 更新所有标签位置
+- `setLabelVisibility()` - 设置标签可见性
+
+#### 3. VehicleDetailPopup.vue
+**功能**: 车辆详情弹窗
+- 车辆详情显示
+- 弹窗位置管理
+- 详情数据展示
+
+**Props**:
+- `visible` - 是否显示弹窗
+- `detail` - 车辆详情数据
+- `popupStyle` - 弹窗样式
+
+#### 4. WeatherStationPopup.vue
+**功能**: 气象监测弹窗
+- 气象数据显示
+- 气象数据更新
+- 气象弹窗样式
+
+**Props**:
+- `visible` - 是否显示弹窗
+
+#### 5. AlertNotificationSystem.vue
+**功能**: 告警提示系统
+- 告警消息显示
+- 告警类型管理
+- 告警动画效果
+
+**Props**:
+- `alertMessage` - 告警消息
+- `alertType` - 告警类型
+
+#### 6. VehicleStyleManager.vue
+**功能**: 车辆样式管理
+- 车辆图标选择
+- 样式创建
+- 状态样式管理
+
+**主要方法**:
+- `getVehicleStyle()` - 获取车辆样式
+- `getVehicleIcon()` - 获取车辆图标
+- `createVehicleStyle()` - 创建车辆样式
+- `updateVehicleStyle()` - 更新车辆样式
+
+## 重构优势
+
+### 1. 代码组织
+- **单一职责**: 每个组件只负责一个特定功能
+- **模块化**: 功能独立，便于单独测试和维护
+- **可复用**: 子组件可以在其他地方复用
+
+### 2. 维护性
+- **易于定位**: 问题可以快速定位到具体组件
+- **易于修改**: 修改某个功能不会影响其他功能
+- **易于扩展**: 新增功能可以创建新的子组件
+
+### 3. 性能优化
+- **按需加载**: 可以按需加载子组件
+- **独立更新**: 子组件可以独立更新，减少不必要的重渲染
+
+### 4. 团队协作
+- **并行开发**: 不同开发者可以同时开发不同组件
+- **代码审查**: 小文件更容易进行代码审查
+- **知识传递**: 新团队成员更容易理解代码结构
+
+## 使用方式
+
+### 替换原有组件
+```vue
+<!-- 在父组件中使用重构后的组件 -->
+<VehicleMovementControlRefactored :map="map" />
+```
+
+### 单独使用子组件
+```vue
+<!-- 单独使用动画系统 -->
+<VehicleAnimationSystem 
+  :map="map"
+  :vehicle-source="vehicleSource"
+  :vehicles="vehicles"
+  :get-vehicle-style="getVehicleStyle"
+/>
+
+<!-- 单独使用标签系统 -->
+<VehicleLabelSystem 
+  :map="map"
+  :vehicles="vehicles"
+/>
+```
+
+## 迁移指南
+
+### 1. 备份原文件
+```bash
+cp VehicleMovementControl.vue VehicleMovementControl.vue.backup
+```
+
+### 2. 替换组件引用
+在父组件中，将：
+```vue
+<VehicleMovementControl :map="map" />
+```
+替换为：
+```vue
+<VehicleMovementControlRefactored :map="map" />
+```
+
+### 3. 测试功能
+确保所有原有功能正常工作：
+- 车辆位置更新
+- 车辆动画
+- 标签显示
+- 详情弹窗
+- 气象弹窗
+- 告警提示
+
+## 注意事项
+
+1. **依赖关系**: 主组件依赖所有子组件，确保所有子组件都已创建
+2. **Props传递**: 子组件通过props接收数据，确保数据流正确
+3. **事件通信**: 子组件通过emit向父组件发送事件
+4. **样式隔离**: 每个组件都有自己的样式，避免样式冲突
+
+## 后续优化建议
+
+1. **状态管理**: 考虑使用Pinia进行全局状态管理
+2. **类型安全**: 添加TypeScript类型定义
+3. **单元测试**: 为每个子组件编写单元测试
+4. **文档完善**: 为每个组件添加详细的API文档
+5. **性能监控**: 添加性能监控和优化 
\ No newline at end of file
diff --git a/src/components/map/controls/VehicleAnimationSystem.vue b/src/components/map/controls/VehicleAnimationSystem.vue
new file mode 100644
index 0000000..59a97ed
--- /dev/null
+++ b/src/components/map/controls/VehicleAnimationSystem.vue
@@ -0,0 +1,688 @@
+<template>
+  <!-- 动画系统不需要模板内容 -->
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { Style, Icon } from 'ol/style';
+
+// 定义props
+const props = defineProps({
+  map: Object,
+  vehicleSource: Object,
+  vehicles: Object,
+  getVehicleStyle: Function
+});
+
+// 动画相关变量
+const animationFrameId = ref(null);
+const lastAnimationTime = ref(0);
+const vehicleAnimations = ref({}); // 存储平滑动画数据
+const vehicleMotionHistory = ref({}); // 存储车辆移动历史
+const PREDICTION_THRESHOLD = 50; // 从100ms降低到50ms，更早开始预测
+const MAX_PREDICTION_TIME = 15000; // 从10000ms增加到15000ms，延长预测时间
+
+// 物理模拟参数
+const ACCELERATION = 0.15; // 加速度系数
+const DECELERATION = 0.25; // 减速度系数
+const MAX_TURN_RATE = 100; // 最大转向速率(度/秒)
+const MIN_TURN_RATE = 20; // 最小转向速率(度/秒)
+const INERTIA_FACTOR = 0.97; // 从0.95增加到0.97，增强惯性效果
+const PREDICTION_STRENGTH = 6; // 从8降低到6，减少预测激进性
+const SPEED_SMOOTHING = 0.94; // 从0.92增加到0.94，增强速度平滑效果
+const POSITION_SMOOTHING = 0.12; // 从0.15降低到0.12，增强位置平滑效果
+const MIN_MOVE_THRESHOLD = 0.00005; // 从0.0001降低到0.00005，确保更持续的移动
+const CONTINUOUS_MOVEMENT = true; // 启用连续移动模式
+const MIN_SPEED = 2.0; // 从1.5增加到2.0，提高最低保持速度
+const PREDICTION_DECAY_RATE = 0.998; // 从0.995进一步增加到0.998，减缓预测衰减
+const PATH_PREDICTION_ENABLED = true; // 启用路径预测
+const PATH_PREDICTION_POINTS = 16; // 从12增加到16，使用更多历史点
+const CONTINUOUS_MOVEMENT_THRESHOLD = 500; // 从1000ms降低到500ms，更快触发连续移动
+
+// 缓动函数 - 平滑的加减速
+function easeInOutQuad(t) {
+  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+}
+
+// 缓动函数 - 更自然的启动
+function easeOutCubic(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+// 缓动函数 - 更自然的减速
+function easeOutQuint(t) {
+  return 1 - Math.pow(1 - t, 5);
+}
+
+// 启动动画循环
+function startAnimationLoop() {
+  // 确保只有一个动画循环在运行
+  if (animationFrameId.value) {
+    cancelAnimationFrame(animationFrameId.value);
+  }
+  
+  lastAnimationTime.value = 0; // 重置时间，确保第一帧计算正确
+  
+  const animate = (timestamp) => {
+    if (!lastAnimationTime.value) lastAnimationTime.value = timestamp;
+    const deltaTime = timestamp - lastAnimationTime.value;
+    lastAnimationTime.value = timestamp;
+    
+    // 限制deltaTime，提高最小帧率到60fps
+    const clampedDeltaTime = Math.min(deltaTime, 16.67); // 约60fps的最小帧率
+    
+    updateVehicleAnimations(clampedDeltaTime);
+    
+    animationFrameId.value = requestAnimationFrame(animate);
+  };
+  
+  animationFrameId.value = requestAnimationFrame(animate);
+}
+
+// 更新车辆动画
+function updateVehicleAnimations(deltaTime) {
+  if (!props.vehicleSource || !props.map) return;
+  
+  const currentTime = performance.now();
+  
+  Object.keys(props.vehicles).forEach(id => {
+    const vehicle = props.vehicles[id];
+    if (!vehicle) return;
+    
+    const animData = vehicleAnimations.value[id];
+    if (!animData) return;
+    
+    // 确保车辆总是在移动，即使没有新的位置更新
+    ensureContinuousMovement(animData, vehicle, currentTime, deltaTime);
+    
+    const timeSinceLastUpdate = currentTime - animData.lastUpdated;
+    
+    // 1. 计算目标位置（基于预测）
+    let targetPosition = [...animData.targetPosition];
+    let targetHeading = animData.targetHeading;
+    
+    // 平滑速度过渡 - 当前速度逐渐接近目标速度
+    if (animData.currentSpeed === undefined) {
+      animData.currentSpeed = animData.speed;
+    } else {
+      // 使用更平滑的速度过渡
+      const speedSmoothingFactor = vehicle.speedViolation ? 0.96 : SPEED_SMOOTHING;
+      animData.currentSpeed = animData.currentSpeed * speedSmoothingFactor + 
+                             animData.speed * (1 - speedSmoothingFactor);
+    }
+    
+    let currentSpeed = animData.currentSpeed;
+    
+    // 根据时间应用不同程度的预测
+    if (timeSinceLastUpdate > PREDICTION_THRESHOLD && animData.predictionVector) {
+      // 计算预测因子，随时间增长但有上限
+      const predictTime = Math.min(timeSinceLastUpdate, MAX_PREDICTION_TIME);
+      const predictFactor = (predictTime - PREDICTION_THRESHOLD) / 1000 * 0.8;
+      
+      // 应用预测向量，考虑当前速度
+      const speedFactor = Math.min(1.2, currentSpeed / 25); // 速度越高预测越远
+      
+      // 计算预测位置
+      const predictedPosition = [
+        animData.targetPosition[0] + animData.predictionVector[0] * predictFactor * speedFactor,
+        animData.targetPosition[1] + animData.predictionVector[1] * predictFactor * speedFactor
+      ];
+      
+      // 平滑过渡到预测位置
+      targetPosition = predictedPosition;
+      
+      // 预测时逐渐降低速度，但不要完全停止
+      if (predictTime > 2000) {
+        // 长时间无更新，缓慢降低速度，但保持最低速度
+        const slowdownFactor = Math.max(0.5, 1 - (predictTime - 2000) / 10000);
+        currentSpeed = Math.max(currentSpeed * slowdownFactor, MIN_SPEED); // 确保最低速度不为0
+      }
+    }
+    
+    // 2. 计算当前位置到目标位置的向量
+    const dx = targetPosition[0] - animData.position[0];
+    const dy = targetPosition[1] - animData.position[1];
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    
+    // 3. 如果距离足够远或启用了连续移动，应用平滑移动
+    if (distance > MIN_MOVE_THRESHOLD || CONTINUOUS_MOVEMENT) {
+      // 计算理想移动距离（基于速度和时间）
+      const idealDistance = (currentSpeed * 1000 / 3600) * (deltaTime / 1000);
+      
+      // 根据距离动态调整移动比例
+      let moveRatio;
+      
+      // 超速车辆使用更平滑的移动
+      const positionSmoothingFactor = vehicle.speedViolation ? POSITION_SMOOTHING * 0.8 : POSITION_SMOOTHING;
+      
+      if (distance < idealDistance * 1.5) {
+        // 接近目标时减速（使用更强的缓动）
+        moveRatio = Math.min(positionSmoothingFactor * 1.5, idealDistance / distance);
+        moveRatio = easeOutQuint(moveRatio);
+      } else {
+        // 正常行驶时使用标准缓动
+        moveRatio = Math.min(positionSmoothingFactor, idealDistance / distance);
+        moveRatio = easeOutCubic(moveRatio);
+      }
+      
+      // 修复逻辑：确保最小移动和惯性移动是互斥的
+      // 如果距离很小且有预测向量，使用预测向量进行微小移动
+      if (distance < MIN_MOVE_THRESHOLD && animData.predictionVector) {
+        // 使用预测向量作为移动方向，但使用很小的移动量
+        const minMoveAmount = (currentSpeed * 1000 / 3600) * (deltaTime / 1000) * 0.1;
+        
+        // 归一化预测向量
+        const predLen = Math.sqrt(
+          animData.predictionVector[0] * animData.predictionVector[0] + 
+          animData.predictionVector[1] * animData.predictionVector[1]
+        );
+        
+        if (predLen > 0) {
+          const normPredX = animData.predictionVector[0] / predLen;
+          const normPredY = animData.predictionVector[1] / predLen;
+          
+          // 应用最小移动量
+          animData.position[0] += normPredX * minMoveAmount;
+          animData.position[1] += normPredY * minMoveAmount;
+          
+          // 保存本次移动向量用于下一帧惯性计算
+          animData.lastDx = normPredX * minMoveAmount;
+          animData.lastDy = normPredY * minMoveAmount;
+        }
+      } 
+      // 距离足够大时，应用惯性移动
+      else {
+        if (animData.lastDx !== undefined && animData.lastDy !== undefined) {
+          // 超速车辆使用更强的惯性
+          const inertiaFactor = vehicle.speedViolation ? INERTIA_FACTOR * 1.1 : INERTIA_FACTOR;
+          
+          const inertiaX = animData.lastDx * inertiaFactor;
+          const inertiaY = animData.lastDy * inertiaFactor;
+          
+          // 混合新方向和惯性方向
+          const newDx = dx * moveRatio;
+          const newDy = dy * moveRatio;
+          
+          // 根据速度和距离调整惯性影响
+          const inertiaWeight = Math.min(0.85, currentSpeed / 70) * 
+                              Math.min(1.0, distance / 8); // 调整惯性权重计算
+          
+          // 计算新位置（混合惯性和目标方向）
+          const nextX = animData.position[0] + newDx * (1 - inertiaWeight) + inertiaX * inertiaWeight;
+          const nextY = animData.position[1] + newDy * (1 - inertiaWeight) + inertiaY * inertiaWeight;
+          
+          // 应用位置更新
+          animData.position[0] = nextX;
+          animData.position[1] = nextY;
+          
+          // 保存本次移动向量用于下一帧惯性计算
+          animData.lastDx = nextX - animData.position[0];
+          animData.lastDy = nextY - animData.position[1];
+        } else {
+          // 首次移动，没有惯性
+          animData.position[0] += dx * moveRatio;
+          animData.position[1] += dy * moveRatio;
+          
+          // 初始化移动向量
+          animData.lastDx = dx * moveRatio;
+          animData.lastDy = dy * moveRatio;
+        }
+      }
+      
+      // 更新地图上的要素位置
+      const feature = props.vehicleSource.getFeatureById(id);
+      if (feature) {
+        feature.getGeometry().setCoordinates(animData.position);
+        
+        // 更新车辆对象中的位置信息，确保标签能够正确跟随
+        if (props.vehicles[id]) {
+          props.vehicles[id].position = animData.position;
+        }
+      }
+      
+      // 计算实际移动方向（用于更自然的转向）
+      if (Math.abs(animData.lastDx) > 0.001 || Math.abs(animData.lastDy) > 0.001) {
+        const movementHeading = (Math.atan2(animData.lastDy, animData.lastDx) * 180 / Math.PI + 90) % 360;
+        
+        // 平滑过渡到新的移动方向
+        if (animData.movementHeading === undefined) {
+          animData.movementHeading = movementHeading;
+        } else {
+          // 计算角度差，确保走最短路径
+          const headingDiff = ((movementHeading - animData.movementHeading + 540) % 360) - 180;
+          animData.movementHeading = (animData.movementHeading + headingDiff * 0.2 + 360) % 360;
+        }
+      }
+    }
+    
+    // 4. 平滑转向逻辑 - 考虑移动方向和目标方向
+    // 首先确定最佳目标方向（结合目标朝向和实际移动方向）
+    let bestTargetHeading = targetHeading;
+    
+    // 如果有移动方向且速度足够高，部分考虑移动方向
+    if (animData.movementHeading !== undefined && currentSpeed > 5) {
+      // 速度越高，移动方向的权重越大
+      const movementWeight = Math.min(0.6, currentSpeed / 70);
+      
+      // 计算角度差，确保选择最短路径
+      const headingDiff = ((animData.movementHeading - targetHeading + 540) % 360) - 180;
+      
+      // 如果移动方向和目标方向相差不大，部分采用移动方向
+      if (Math.abs(headingDiff) < 100) {
+        bestTargetHeading = targetHeading + headingDiff * movementWeight;
+      }
+    }
+    
+    // 应用平滑转向
+    const headingDiff = bestTargetHeading - animData.heading;
+    if (Math.abs(headingDiff) > 0.1) {
+      // 归一化角度差值（确保走最短路径）
+      const normalizedDiff = ((headingDiff + 180) % 360) - 180;
+      
+      // 基于速度动态调整转向速率
+      // 低速时转向快，高速时转向慢
+      const turnRate = MAX_TURN_RATE - (MAX_TURN_RATE - MIN_TURN_RATE) * Math.min(1, currentSpeed / 60);
+      
+      // 超速车辆转向更平滑
+      const actualTurnRate = vehicle.speedViolation ? turnRate * 0.8 : turnRate;
+      
+      // 计算本帧转向量
+      const turnAmount = Math.sign(normalizedDiff) * 
+                        Math.min(Math.abs(normalizedDiff), actualTurnRate * deltaTime / 1000);
+      
+      // 应用转向
+      animData.heading += turnAmount;
+      animData.heading = (animData.heading + 360) % 360;
+      
+      // 更新车辆样式（朝向）
+      const feature = props.vehicleSource.getFeatureById(id);
+      if (feature && props.getVehicleStyle) {
+        // 减少样式更新频率，避免闪烁
+        if (!animData.lastStyleUpdateTime || currentTime - animData.lastStyleUpdateTime > 500) {
+          feature.setStyle(props.getVehicleStyle(id, currentSpeed, animData.heading));
+          animData.lastStyleUpdateTime = currentTime;
+        }
+      }
+    }
+    
+    // 保存当前速度用于下一帧
+    animData.currentSpeed = currentSpeed;
+    
+    // 更新历史轨迹
+    updateVehiclePathHistory(id, animData, currentTime);
+  });
+}
+
+// 更新车辆历史轨迹
+function updateVehiclePathHistory(id, animData, currentTime) {
+  // 初始化历史轨迹数组（如果不存在）
+  if (!animData.pathHistory) {
+    animData.pathHistory = [];
+  }
+  
+  // 每150ms记录一次位置，提高记录频率
+  if (!animData.lastPathRecordTime || currentTime - animData.lastPathRecordTime > 150) {
+    // 添加当前位置到历史轨迹
+    animData.pathHistory.push({
+      time: currentTime,
+      position: [...animData.position],
+      heading: animData.heading,
+      speed: animData.currentSpeed
+    });
+    
+    // 增加历史轨迹长度，提供更多数据点用于预测
+    if (animData.pathHistory.length > PATH_PREDICTION_POINTS + 4) {
+      animData.pathHistory.shift();
+    }
+    
+    animData.lastPathRecordTime = currentTime;
+  }
+}
+
+// 确保车辆持续移动，即使没有新的位置更新
+function ensureContinuousMovement(animData, vehicle, currentTime, deltaTime) {
+  // 检查上次更新时间，使用更低的阈值
+  const timeSinceLastUpdate = currentTime - animData.lastUpdated;
+  
+  // 如果超过阈值没有位置更新，且车辆当前速度大于0
+  if (timeSinceLastUpdate > CONTINUOUS_MOVEMENT_THRESHOLD && animData.currentSpeed > 0) {
+    // 如果启用了路径预测，使用历史轨迹预测未来路径
+    if (PATH_PREDICTION_ENABLED && animData.pathHistory && animData.pathHistory.length >= 3) {
+      const predictedPath = predictFuturePath(animData);
+      if (predictedPath) {
+        // 平滑过渡到预测向量，而不是直接替换
+        if (!animData.predictionVector) {
+          animData.predictionVector = predictedPath.vector;
+        } else {
+          // 平滑混合当前预测向量和新预测向量，使用更平滑的过渡
+          animData.predictionVector = [
+            animData.predictionVector[0] * 0.8 + predictedPath.vector[0] * 0.2, // 从0.7/0.3调整为0.8/0.2
+            animData.predictionVector[1] * 0.8 + predictedPath.vector[1] * 0.2
+          ];
+        }
+        
+        // 平滑过渡到预测位置，使用更平滑的过渡
+        animData.targetPosition = [
+          animData.targetPosition[0] * 0.8 + predictedPath.position[0] * 0.2, // 从0.7/0.3调整为0.8/0.2
+          animData.targetPosition[1] * 0.8 + predictedPath.position[1] * 0.2
+        ];
+      }
+    } 
+    // 如果没有预测向量或预测向量太小，创建一个基于当前朝向的预测向量
+    else if (!animData.predictionVector || 
+        (Math.abs(animData.predictionVector[0]) < 0.001 && Math.abs(animData.predictionVector[1]) < 0.001)) {
+      
+      // 根据车辆朝向创建预测向量
+      const headingRad = (animData.heading - 90) * Math.PI / 180;
+      const predX = Math.cos(headingRad) * animData.currentSpeed * 0.18; // 从0.15增加到0.18
+      const predY = Math.sin(headingRad) * animData.currentSpeed * 0.18;
+      
+      animData.predictionVector = [predX, predY];
+      
+      // 更新目标位置为当前位置加上预测向量
+      animData.targetPosition = [
+        animData.position[0] + predX * 15, // 从12增加到15
+        animData.position[1] + predY * 15
+      ];
+    } else {
+      // 预测向量存在但需要缓慢衰减，避免突然停止
+      // 使用更高的衰减率
+      animData.predictionVector = [
+        animData.predictionVector[0] * PREDICTION_DECAY_RATE,
+        animData.predictionVector[1] * PREDICTION_DECAY_RATE
+      ];
+      
+      // 更新目标位置
+      animData.targetPosition = [
+        animData.position[0] + animData.predictionVector[0] * 15, // 从12增加到15
+        animData.position[1] + animData.predictionVector[1] * 15
+      ];
+    }
+    
+    // 缓慢降低速度，但保持更高的最低速度
+    if (!animData.lastSpeedReduction || currentTime - animData.lastSpeedReduction > 1000) {
+      animData.speed = Math.max(animData.speed * 0.98, MIN_SPEED); // 从0.97增加到0.98，进一步减缓速度降低率
+      animData.lastSpeedReduction = currentTime;
+    }
+  }
+}
+
+// 基于历史轨迹预测未来路径
+function predictFuturePath(animData) {
+  if (!animData.pathHistory || animData.pathHistory.length < 3) {
+    return null;
+  }
+  
+  // 获取最近的几个历史点
+  const history = animData.pathHistory;
+  const points = history.length;
+  
+  // 计算平均移动向量
+  let totalDx = 0;
+  let totalDy = 0;
+  let totalWeight = 0;
+  
+  // 从最近的点开始，给予更高权重
+  for (let i = points - 2; i >= 0; i--) {
+    const curr = history[i + 1];
+    const prev = history[i];
+    
+    // 计算两点之间的向量
+    const dx = curr.position[0] - prev.position[0];
+    const dy = curr.position[1] - prev.position[1];
+    
+    // 计算时间差
+    const dt = curr.time - prev.time;
+    
+    // 改进权重计算，使用指数衰减而不是线性衰减
+    // 这会使最近的点有更大的影响力
+    const weight = Math.pow(0.8, (points - i - 1)) / Math.max(1, dt / 1000);
+    
+    totalDx += dx * weight;
+    totalDy += dy * weight;
+    totalWeight += weight;
+  }
+  
+  // 如果没有有效的移动向量，返回null
+  if (totalWeight <= 0) {
+    return null;
+  }
+  
+  // 计算加权平均向量
+  const avgDx = totalDx / totalWeight;
+  const avgDy = totalDy / totalWeight;
+  
+  // 计算向量长度
+  const vectorLength = Math.sqrt(avgDx * avgDx + avgDy * avgDy);
+  
+  // 如果向量太小，返回null
+  if (vectorLength < 0.001) {
+    return null;
+  }
+  
+  // 归一化向量并应用当前速度
+  const normalizedDx = avgDx / vectorLength;
+  const normalizedDy = avgDy / vectorLength;
+  
+  // 根据当前速度缩放向量，增加平滑因子
+  const speedFactor = animData.currentSpeed * 0.12; // 增加到0.12
+  const predictionVector = [
+    normalizedDx * speedFactor,
+    normalizedDy * speedFactor
+  ];
+  
+  // 计算预测位置，增加预测距离
+  const predictedPosition = [
+    animData.position[0] + normalizedDx * speedFactor * 12, // 增加到12
+    animData.position[1] + normalizedDy * speedFactor * 12
+  ];
+  
+  return {
+    vector: predictionVector,
+    position: predictedPosition
+  };
+}
+
+// 初始化车辆动画数据
+function initVehicleAnimation(id, coordinates, heading, speed) {
+  vehicleAnimations.value[id] = {
+    position: [...coordinates],
+    targetPosition: [...coordinates],
+    heading: heading,
+    targetHeading: heading,
+    speed: speed,
+    currentSpeed: speed,
+    lastUpdated: Date.now(),
+    predictionVector: null,
+    lastDx: 0,
+    lastDy: 0,
+    movementHeading: heading,
+    // 添加速度历史记录用于平滑过渡
+    speedHistory: [speed, speed, speed],
+    pathHistory: [], // 初始化路径历史
+    lastPathRecordTime: Date.now() // 初始化路径记录时间
+  };
+  
+  vehicleMotionHistory.value[id] = [];
+}
+
+// 更新车辆动画目标
+function updateVehicleAnimationTarget(id, coordinates, heading, speed) {
+  const animData = vehicleAnimations.value[id] || {};
+  const now = Date.now();
+  
+  // 记录历史轨迹点
+  vehicleMotionHistory.value[id] = vehicleMotionHistory.value[id] || [];
+  vehicleMotionHistory.value[id].push({
+    time: now,
+    position: coordinates,
+    heading: heading,
+    speed: speed
+  });
+  
+  // 增加历史点数量
+  if (vehicleMotionHistory.value[id].length > 10) { // 从8增加到10
+    vehicleMotionHistory.value[id].shift();
+  }
+  
+  // 计算预测向量 - 使用更复杂的算法
+  let predictionVector = [0, 0];
+  
+  if (vehicleMotionHistory.value[id].length >= 2) {
+    // 基本预测 - 使用最近两点
+    const history = vehicleMotionHistory.value[id];
+    const latest = history[history.length - 1];
+    const previous = history[history.length - 2];
+    
+    const dt = Math.max(1, latest.time - previous.time);
+    const dx = (latest.position[0] - previous.position[0]);
+    const dy = (latest.position[1] - previous.position[1]);
+    
+    // 基础预测向量 - 考虑时间间隔
+    const baseSpeed = Math.sqrt(dx*dx + dy*dy) * (1000 / dt); // 单位时间内的移动距离
+    const normalizedDx = baseSpeed > 0 ? dx / baseSpeed : 0;
+    const normalizedDy = baseSpeed > 0 ? dy / baseSpeed : 0;
+    
+    // 减小预测强度
+    predictionVector = [
+      normalizedDx * (PREDICTION_STRENGTH * 0.9) * baseSpeed, 
+      normalizedDy * (PREDICTION_STRENGTH * 0.9) * baseSpeed
+    ];
+    
+    // 如果有更多历史点，使用加权平均提高预测准确性
+    if (vehicleMotionHistory.value[id].length >= 3) {
+      // 使用多个历史点计算平均移动趋势
+      let totalWeight = 0;
+      let weightedDx = 0;
+      let weightedDy = 0;
+      
+      // 从最近到最远遍历历史点，使用更多的历史点
+      for (let i = history.length - 2; i >= 0 && i >= history.length - 7; i--) { // 从5增加到7
+        const curr = history[i+1];
+        const prev = history[i];
+        
+        const pointDt = Math.max(1, curr.time - prev.time);
+        const pointDx = curr.position[0] - prev.position[0];
+        const pointDy = curr.position[1] - prev.position[1];
+        
+        // 使用指数衰减权重
+        const weight = Math.pow(0.85, (history.length - i - 1));
+        totalWeight += weight;
+        
+        weightedDx += pointDx * weight;
+        weightedDy += pointDy * weight;
+      }
+      
+      if (totalWeight > 0) {
+        // 归一化加权向量
+        weightedDx /= totalWeight;
+        weightedDy /= totalWeight;
+        
+        // 混合最新向量和加权历史向量，增加历史向量的权重
+        predictionVector = [
+          predictionVector[0] * 0.6 + weightedDx * PREDICTION_STRENGTH * 0.4, // 从0.7/0.3调整为0.6/0.4
+          predictionVector[1] * 0.6 + weightedDy * PREDICTION_STRENGTH * 0.4
+        ];
+      }
+    }
+    
+    // 根据速度调整预测强度，使用更平滑的曲线
+    const speedFactor = Math.min(1.8, Math.pow(speed / 15, 0.8)); // 使用幂函数使曲线更平滑
+    predictionVector = [
+      predictionVector[0] * speedFactor,
+      predictionVector[1] * speedFactor
+    ];
+    
+    // 如果车辆几乎静止，减弱预测但保持最低预测强度
+    if (speed < 2) {
+      predictionVector = [
+        predictionVector[0] * 0.4, // 从0.3增加到0.4
+        predictionVector[1] * 0.4
+      ];
+    }
+  }
+  
+  // 保存速度历史用于平滑过渡，增加历史点
+  if (!animData.speedHistory) {
+    animData.speedHistory = [speed, speed, speed, speed]; // 增加一个点
+  } else {
+    animData.speedHistory.push(speed);
+    if (animData.speedHistory.length > 4) { // 从3增加到4
+      animData.speedHistory.shift();
+    }
+  }
+  
+  // 计算平滑速度（避免速度突变）
+  const smoothedSpeed = animData.speedHistory.reduce((sum, s) => sum + s, 0) / 
+                       animData.speedHistory.length;
+  
+  // 更新动画数据 - 保留当前位置，只更新目标位置
+  vehicleAnimations.value[id] = {
+    ...animData,
+    targetPosition: coordinates,
+    targetHeading: heading,
+    position: animData.position || coordinates,
+    speed: smoothedSpeed, // 使用平滑后的速度
+    lastUpdated: now,
+    predictionVector,
+    speedHistory: animData.speedHistory
+  };
+}
+
+// 停止动画循环
+function stopAnimationLoop() {
+  if (animationFrameId.value) {
+    cancelAnimationFrame(animationFrameId.value);
+    animationFrameId.value = null;
+  }
+}
+
+// 重置动画数据
+function resetAnimations() {
+  vehicleAnimations.value = {};
+  vehicleMotionHistory.value = {};
+  
+  Object.keys(props.vehicles).forEach(id => {
+    const vehicle = props.vehicles[id];
+    if (vehicle) {
+      vehicleAnimations.value[id] = {
+        position: [...vehicle.position],
+        targetPosition: [...vehicle.position],
+        heading: vehicle.heading,
+        targetHeading: vehicle.heading,
+        speed: vehicle.speed,
+        currentSpeed: vehicle.speed,
+        lastUpdated: Date.now(),
+        predictionVector: null,
+        lastDx: 0,
+        lastDy: 0,
+        movementHeading: vehicle.heading,
+        speedHistory: [vehicle.speed, vehicle.speed, vehicle.speed],
+        pathHistory: [], // 重置路径历史
+        lastPathRecordTime: Date.now() // 重置路径记录时间
+      };
+    }
+  });
+}
+
+// 组件挂载时启动动画
+onMounted(() => {
+  startAnimationLoop();
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  stopAnimationLoop();
+});
+
+// 暴露方法
+defineExpose({
+  startAnimationLoop,
+  stopAnimationLoop,
+  resetAnimations,
+  initVehicleAnimation,
+  updateVehicleAnimationTarget,
+  vehicleAnimations,
+  vehicleMotionHistory
+});
+</script> 
\ No newline at end of file
diff --git a/src/components/map/controls/VehicleDetailPopup.vue b/src/components/map/controls/VehicleDetailPopup.vue
new file mode 100644
index 0000000..7db2a5a
--- /dev/null
+++ b/src/components/map/controls/VehicleDetailPopup.vue
@@ -0,0 +1,206 @@
+<!-- 点击车辆详情弹窗 -->
+<template>
+  <div class="vehicle-detail-container" v-if="visible" :style="popupStyle">
+    <div class="vehicle-detail-box">
+      <div class="vehicle-detail-header">
+        <span>详情</span>
+        <img class="vehicle-detail-close" src="../../../assets/images/close_icon.png" alt="" @click="close" />
+      </div>
+      <div class="vehicle-detail-content">
+        <div class="vehicle-detail-title">
+          <span>{{ detail.id }} ({{ detail.type }})</span>
+          <div class="vehicle-detail-status-container">
+            <div class="vehicle-detail-status" :class="{'status-running': detail.status === '任务中', 'status-idle': detail.status === '待命'}">{{ detail.status }}</div>
+            <div class="vehicle-detail-online">在线</div>
+          </div>
+        </div>
+        <div class="vehicle-detail-info-container">
+          <div class="vehicle-detail-info-row">
+            <div class="vehicle-detail-info-item">
+              <span class="vehicle-info-label">任务开始时间:</span>
+              <span class="vehicle-info-value">{{ detail.startTime }}</span>
+            </div>
+            <div class="vehicle-detail-info-item">
+              <span class="vehicle-info-label">当前位置:</span>
+              <span class="vehicle-info-value">{{ detail.currentLocation }}</span>
+            </div>
+          </div>
+          <div class="vehicle-detail-info-row">
+            <div class="vehicle-detail-info-item">
+              <span class="vehicle-info-label">任务起点:</span>
+              <span class="vehicle-info-value">{{ detail.startLocation }}</span>
+            </div>
+            <div class="vehicle-detail-info-item">
+              <span class="vehicle-info-label">任务终点:</span>
+              <span class="vehicle-info-value">{{ detail.endLocation }}</span>
+            </div>
+          </div>
+          <div class="vehicle-detail-info-row">
+            <div class="vehicle-detail-info-item">
+              <span class="vehicle-info-label">行驶总里程:</span>
+              <span class="vehicle-info-value">{{ detail.totalDistance }}</span>
+            </div>
+            <div class="vehicle-detail-info-item">
+              <span class="vehicle-info-label">电量剩余:</span>
+              <span class="vehicle-info-value">{{ detail.battery }}</span>
+            </div>
+          </div>
+          <div class="vehicle-detail-info-row">
+            <div class="vehicle-detail-info-item">
+              <span class="vehicle-info-label">负责人:</span>
+              <span class="vehicle-info-value">{{ detail.manager }}</span>
+            </div>
+            <div class="vehicle-detail-info-item">
+              <span class="vehicle-info-label">联系电话:</span>
+              <span class="vehicle-info-value">{{ detail.phone }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  detail: {
+    type: Object,
+    default: () => ({
+      id: 'QN001',
+      type: '驱鸟车',
+      status: '任务中',
+      startTime: '11-19 11:30',
+      currentLocation: 'A区T3点',
+      startLocation: 'T1航站楼',
+      endLocation: 'T3航站楼',
+      totalDistance: '1.3km',
+      battery: '60%',
+      manager: '张三',
+      phone: '18661910988'
+    })
+  },
+  popupStyle: {
+    type: Object,
+    default: () => ({
+      left: '0px',
+      top: '0px'
+    })
+  }
+});
+
+const emit = defineEmits(['close']);
+
+function close() {
+  emit('close');
+}
+</script>
+
+<style scoped>
+/* 车辆详情弹窗样式 */
+.vehicle-detail-container {
+  position: fixed;
+  z-index: 2000;
+  width: 380px;
+}
+
+.vehicle-detail-box {
+  background-color: #424851;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.vehicle-detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom:1px solid #777777;
+  background-color: #424851;
+  color: #fff;
+  padding: 8px 12px;
+  font-size: 16px;
+}
+
+.vehicle-detail-close {
+  cursor: pointer;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.vehicle-detail-content {
+  padding: 12px;
+}
+
+.vehicle-detail-title {
+  color: #fff;
+  font-size: 16px;
+  font-weight: bolder;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.vehicle-detail-status-container {
+  display: flex;
+  align-items: center;
+}
+
+.vehicle-detail-status {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.vehicle-detail-online {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+  background-color: #409EFF;
+  color: #fff;
+  margin-left: 10px;
+}
+
+.status-running {
+  background-color: #409EFF;
+  color: #fff;
+}
+
+.status-idle {
+  background-color: #409EFF;
+  color: #fff;
+}
+
+.vehicle-detail-info-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.vehicle-detail-info-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.vehicle-detail-info-item {
+  flex: 1;
+}
+
+.vehicle-info-label {
+  color: #EEEEEE;
+  font-size: 14px;
+  margin-right: 4px;
+}
+
+.vehicle-info-value {
+  color: #EEEEEE;
+  font-size: 14px;
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/map/controls/VehicleLabelSystem.vue b/src/components/map/controls/VehicleLabelSystem.vue
new file mode 100644
index 0000000..e3dcbca
--- /dev/null
+++ b/src/components/map/controls/VehicleLabelSystem.vue
@@ -0,0 +1,299 @@
+<template>
+  <!-- 标签系统不需要模板内容 -->
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Overlay from 'ol/Overlay';
+
+// 定义props
+const props = defineProps({
+  map: Object,
+  vehicles: Object
+});
+
+// 导入背景图片
+import labelBg from '../../../assets/images/label_bg.png';
+import airportBg from '../../../assets/images/airport_bg.png';
+import airportOutBg from '../../../assets/images/airport_out.png';
+import alarmBg from '../../../assets/images/alarm_bg.png';
+import warningBg from '../../../assets/images/warning_bg.png';
+
+// 更新车辆标签
+function updateVehicleLabel(id, position, speed, violationInfo = null) {
+  if (!props.map || !props.vehicles[id]) return;
+
+  // 先移除可能存在的旧标签，确保不会重复显示
+  removeVehicleLabel(id);
+  
+  const vehicle = props.vehicles[id];
+  const isAircraftIn = vehicle.isAircraftIn;
+  const isAircraftOut = vehicle.isAircraftOut;
+  const isUnmannedVehicle = vehicle.isUnmannedVehicle;
+  const isSpecialVehicle = vehicle.isSpecialVehicle;
+  const isShuttleVehicle = vehicle.isShuttleVehicle;
+  const violationType = vehicle.violationType;
+  const hasInfoStatus = vehicle.info;
+  const hasWarningStatus = vehicle.warning;
+  const hasAlarmStatus = vehicle.alarm;
+  const hasCriticalStatus = vehicle.critical;
+  const hasSpeedViolation = vehicle.speedViolation;
+  
+  let typeKey = vehicle.type;
+  if (isAircraftIn) typeKey = 'AIRCRAFT_IN';
+  else if (isAircraftOut) typeKey = 'AIRCRAFT_OUT';
+  else if (isUnmannedVehicle) typeKey = 'UNMANNED_VEHICLE';
+  else if (isSpecialVehicle) typeKey = 'SPECIAL_VEHICLE';
+  else if (isShuttleVehicle) typeKey = 'SHUTTLE_VEHICLE';
+  
+  let backgroundImage;
+  
+  // 首先检查告警状态
+  if (hasSpeedViolation) {
+    // 超速车辆使用warning_bg.png背景
+    backgroundImage = warningBg;
+  } else if (violationType || hasInfoStatus || hasWarningStatus || hasCriticalStatus || hasAlarmStatus) {
+    backgroundImage = warningBg; // 使用告警背景
+  } else if (isAircraftIn) {
+    // 滑入航空器(CA开头)使用airport_out.png文本背景
+    backgroundImage = airportOutBg;
+  } else if (isAircraftOut) {
+    // 滑出航空器(MU开头)使用airport_bg.png文本背景
+    backgroundImage = airportBg;
+  } else if (isUnmannedVehicle) {
+    // 无人车使用label_bg.png文本背景
+    backgroundImage = labelBg;
+  } else if (isSpecialVehicle) {
+    // 特勤车使用label_bg.png文本背景
+    backgroundImage = labelBg;
+  } else if (isShuttleVehicle) {
+    // 摆渡车使用label_bg.png文本背景
+    backgroundImage = labelBg;
+  } else {
+    // 默认背景
+    backgroundImage = labelBg;
+  }
+  
+  const labelDiv = document.createElement('div');
+  labelDiv.className = `vehicle-label ${isAircraftIn ? 'vehicle-aircraft-in' : ''} ${isAircraftOut ? 'vehicle-aircraft-out' : ''} ${isUnmannedVehicle ? 'vehicle-unmanned' : ''} ${isSpecialVehicle ? 'vehicle-special' : ''} ${isShuttleVehicle ? 'vehicle-shuttle' : ''}`;
+  
+  // 添加告警状态类
+  if (violationType) labelDiv.className += ' vehicle-violation';
+  if (hasInfoStatus) labelDiv.className += ' vehicle-info';
+  if (hasWarningStatus) labelDiv.className += ' vehicle-warning';
+  if (hasAlarmStatus) labelDiv.className += ' vehicle-alarm';
+  if (hasCriticalStatus) labelDiv.className += ' vehicle-critical';
+  if (hasSpeedViolation) labelDiv.className += ' vehicle-speed-violation';
+  
+  let labelText = '';
+
+  // 超速车辆特殊处理标签内容 - 只显示超速相关信息，避免闪烁和重复显示
+  if (violationInfo && violationInfo.isSpeedViolation && violationInfo.actualValue !== undefined) {
+    // 通过violationInfo传入的超速信息 - 这是主要的超速状态显示方式
+    labelText = `${id} ${violationInfo.actualValue.toFixed(1)} km/h`;
+    if (violationInfo.description) {
+      labelText += `<br>${violationInfo.description}`;
+    }
+    if (violationInfo.limitValue !== undefined) {
+      labelText += `<br>限速: ${violationInfo.limitValue}km/h`;
+    }
+    if (violationInfo.ruleName) {
+      labelText += `<br>根据${violationInfo.ruleName}请减速慢行！`;
+    }
+  } else if (hasSpeedViolation && vehicle.limitValue !== undefined && vehicle.actualValue !== undefined) {
+    // 备用的超速状态显示方式
+    labelText = `${id} ${vehicle.actualValue.toFixed(1)} km/h`;
+    if (vehicle.description) {
+      labelText += `<br>${vehicle.description}`;
+    }
+    labelText += `<br>限速: ${vehicle.limitValue}km/h`;
+    if (vehicle.ruleName) {
+      labelText += `<br>根据${vehicle.ruleName}请减速慢行！`;
+    }
+  } else {
+    // 正常车辆显示 - 避免显示0.00km/h的闪烁
+    if (!hasSpeedViolation && speed > 0.1) {
+      labelText = `${id} ${speed.toFixed(1)} km/h`;
+    } else if (!hasSpeedViolation) {
+      // 如果速度为0或很小，只显示车辆ID，不显示速度避免闪烁
+      labelText = `${id}`;
+    }
+
+    if (violationType && vehicle.description) {
+      labelText += `<br>${vehicle.description}`;
+    }
+
+    if (violationType && vehicle.limitValue !== undefined && vehicle.actualValue !== undefined) {
+      labelText += `<br>限速: ${vehicle.limitValue}km/h 实际: ${vehicle.actualValue}km/h`;
+    }
+
+    // 处理传入的违规信息（非超速情况）
+    if (violationInfo && !violationInfo.isSpeedViolation) {
+      if (violationInfo.description) {
+        labelText += `<br>${violationInfo.description}`;
+      }
+      if (violationInfo.limitValue !== undefined && violationInfo.actualValue !== undefined) {
+        labelText += `<br>限速: ${violationInfo.limitValue}km/h 实际: ${violationInfo.actualValue}km/h`;
+      }
+      if (violationInfo.ruleName) {
+        labelText += `<br>根据${violationInfo.ruleName}请减速慢行！`;
+      }
+    }
+  }
+  
+  labelDiv.innerHTML = labelText;
+  labelDiv.style.backgroundImage = `url(${backgroundImage})`;
+  labelDiv.style.backgroundSize = '100% 100%';
+  labelDiv.style.padding = '5px 10px';
+  labelDiv.style.color = '#fff';
+  
+  const overlay = new Overlay({
+    element: labelDiv,
+    position: position,
+    positioning: 'bottom-center',
+    offset: [0, -30],
+    stopEvent: false,
+    insertFirst: true, // 确保在DOM中优先插入
+    autoPan: false, // 禁用自动平移
+  });
+  
+  // 更新引用
+  props.vehicles[id].overlay = overlay;
+  props.vehicles[id].labelDiv = labelDiv;
+  
+  // 添加到地图
+  props.map.addOverlay(overlay);
+}
+
+// 移除车辆标签
+function removeVehicleLabel(id) {
+  if (!props.map || !props.vehicles[id]) return;
+  
+  if (props.vehicles[id].overlay) {
+    props.map.removeOverlay(props.vehicles[id].overlay);
+    props.vehicles[id].overlay = null;
+    props.vehicles[id].labelDiv = null;
+  }
+}
+
+// 更新所有标签位置
+function updateAllLabels() {
+  Object.keys(props.vehicles).forEach(id => {
+    const vehicle = props.vehicles[id];
+    if (vehicle.feature) {
+      const coordinates = vehicle.feature.getGeometry().getCoordinates();
+      // 如果车辆处于超速状态，不在这里更新标签，避免与超速状态标签冲突
+      if (!vehicle.speedViolation) {
+        updateVehicleLabel(id, coordinates, vehicle.speed);
+      }
+    }
+  });
+}
+
+// 设置标签可见性
+function setLabelVisibility(id, visible) {
+  if (!props.map || !props.vehicles[id]) return;
+
+  if (visible) {
+    // 如果车辆处于超速状态，不在这里更新标签，避免与超速状态标签冲突
+    if (props.vehicles[id].position && !props.vehicles[id].speedViolation) {
+      updateVehicleLabel(id, props.vehicles[id].position, props.vehicles[id].speed);
+    }
+  } else {
+    removeVehicleLabel(id);
+  }
+}
+
+// 暴露方法
+defineExpose({
+  updateVehicleLabel,
+  removeVehicleLabel,
+  updateAllLabels,
+  setLabelVisibility
+});
+</script>
+
+<style scoped>
+/* 车辆标签样式 */
+:deep(.vehicle-label) {
+  position: absolute;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+  transform: translateX(-50%);
+  text-align: center;
+  background-repeat: no-repeat;
+  background-position: center;
+  min-width: 80px;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 30;
+  transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
+  will-change: transform, left, top;
+  bottom: 0;
+}
+
+/* 滑入航空器标签样式 */
+:deep(.vehicle-aircraft-in) {
+  color: #fff;
+}
+
+/* 滑出航空器标签样式 */
+:deep(.vehicle-aircraft-out) {
+  color: #333;
+}
+
+/* 无人车标签样式 */
+:deep(.vehicle-unmanned) {
+  color: #fff;
+}
+
+/* 特勤车标签样式 */
+:deep(.vehicle-special) {
+  color: #fff;
+}
+
+/* 摆渡车标签样式 */
+:deep(.vehicle-shuttle) {
+  color: #fff;
+}
+
+/* 告警标签样式 */
+:deep(.vehicle-alarm) {
+  color: #fff;
+  font-weight: bold;
+}
+
+/* 预警标签样式 */
+:deep(.vehicle-warning) {
+  color: #fff;
+}
+
+/* 严重违规标签样式 */
+:deep(.vehicle-critical) {
+  color: #fff;
+}
+
+/* 超速违规标签样式 */
+:deep(.vehicle-speed-violation) {
+  color: #fff;
+  font-weight: bold;
+  line-height: 1.4;
+  white-space: normal;
+  width: 180px;
+  text-align: center;
+}
+
+/* 信息级别(超速等)标签样式 */
+:deep(.vehicle-info) {
+  color: #fff;
+  line-height: 1.4;
+  white-space: normal;
+  width: 160px;
+  text-align: center;
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/map/controls/VehicleMovementControl copy.vue b/src/components/map/controls/VehicleMovementControl copy.vue
deleted file mode 100644
index c4ea9b9..0000000
--- a/src/components/map/controls/VehicleMovementControl copy.vue	
+++ /dev/null
@@ -1,677 +0,0 @@
-<template>
-  <div class="vehicle-movement-control">
-    <!-- 连接状态指示器 -->
-    <div class="ws-status" :class="{ connected: wsConnected }">
-      <span v-if="wsConnected">已连接</span>
-      <span v-else>未连接</span>
-    </div>
-    
-  
-  </div>
-    <!-- 告警/预警提示框 -->
-    <!-- <div class="alert-container" v-if="alertMessage"> -->
-    <div class="alert-container">
-      <div class="alert-box alert-flash" :class="{'alert-warning': alertType === 'warning', 'alert-danger': alertType === 'alarm'}">
-        <div class="alert-row">
-          <img v-if="alertType === 'alarm'" class="alert-icon" :src="alarmIcon" alt="alarm" />
-          <img v-else-if="alertType === 'warning'" class="alert-icon" :src="warnIcon" alt="warning" />
-          <span class="alert-title">
-            {{ alertType === 'alarm' ? '冲突告警' : '冲突预警' }}
-          </span>
-        </div>
-        <div class="alert-content alert-desc">
-          {{ alertMessage }}
-        </div>
-      </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
-import { Vector as VectorSource } from 'ol/source';
-import { Vector as VectorLayer } from 'ol/layer';
-import { Style, Icon } from 'ol/style';
-import Feature from 'ol/Feature';
-import Point from 'ol/geom/Point';
-import Overlay from 'ol/Overlay';
-import { transform } from 'ol/proj';
-// 导入WebSocketService
-import WebSocketService, { createWebSocket } from '../../../utils/websocket.js';
-
-// 为SockJS提供polyfill
-if (typeof window !== 'undefined' && !window.global) {
-  window.global = window;
-}
-
-// 导入车辆图标
-import carIcon from '../../../assets/images/noPeopleCar.png';
-import aircraftIcon from '../../../assets/images/Aircraft.png';
-import aircraft1Icon from '../../../assets/images/Aircraft1.png';
-import labelBg from '../../../assets/images/label_bg.png';
-import airportBg from '../../../assets/images/airport_bg.png';
-import airportOutBg from '../../../assets/images/airport_out.png';
-import alarmBg from '../../../assets/images/alarm_bg.png';
-import warningBg from '../../../assets/images/warning_bg.png';
-import alarmIcon from '../../../assets/images/alarm_icon.png';
-import warnIcon from '../../../assets/images/warn_icon.png';
-// 定义props接收地图实例
-const props = defineProps({
-  map: Object
-});
-
-// WebSocket连接状态
-const wsConnected = ref(false);
-let wsService = null;
-
-// 车辆数据存储
-const vehicles = ref({});
-let vehicleLayer = null;
-let vehicleSource = null;
-
-// 告警/预警状态
-const alertMessage = ref('与航空器Y117距离小于600m！请及时避让');
-const alertType = ref('warning'); // 'warning' 或 'alarm'
-let alertTimer = null;
-
-// 显示告警/预警消息
-function showAlert(message, type, duration = 5000) {
-  // 清除可能存在的定时器
-  if (alertTimer) {
-    clearTimeout(alertTimer);
-  }
-  
-  // 设置消息和类型
-  alertMessage.value = message;
-  alertType.value = type; // 'warning' 或 'alarm'
-  
-  // 设置自动消失
-  alertTimer = setTimeout(() => {
-    alertMessage.value = '';
-    alertType.value = '';
-  }, duration);
-}
-
-// 创建车辆图层
-function createVehicleLayer() {
-  if (!props.map) return;
-  
-  // 创建矢量数据源
-  vehicleSource = new VectorSource();
-  
-  // 创建矢量图层
-  vehicleLayer = new VectorLayer({
-    source: vehicleSource,
-    zIndex: 20, // 确保在其他图层之上
-  });
-  
-  // 添加图层到地图
-  props.map.addLayer(vehicleLayer);
-  console.log('车辆移动图层已创建');
-  
-  // 设置地图监听器
-  setupMapListeners();
-}
-
-// 更新车辆位置
-function updateVehiclePosition(vehicleData) {
-  if (!vehicleSource || !props.map) return;
-  
-  const { object_id, object_type, position, heading, speed } = vehicleData;
-  console.log(`接收到位置数据: ${object_id}`, position);
-  
-  let coordinates;
-
-    
-    coordinates = transform(
-      [position.longitude, position.latitude], 
-      'EPSG:4326', 
-      props.map.getView().getProjection()
-    );
- 
-  
-  // 检查该车辆是否已存在
-  let feature = vehicleSource.getFeatureById(object_id);
-  
-  // 根据车辆ID前缀和类型进行分类
-  // 1. 判断航空器类型
-  const isAircraftIn = object_type.toLowerCase().includes('aircraft') && !object_id.toLowerCase().includes('ac001');
-  const isAircraftOut = object_id.toLowerCase().includes('ac001');
-  const isAircraft = isAircraftIn || isAircraftOut;
-  
-  // 2. 判断无人车类型
-  const isUnmannedVehicle = object_type === 'UNMANNED_VEHICLE' || object_id.toLowerCase().startsWith('qn');
-  
-  // 3. 判断特勤车类型
-  const isSpecialVehicle = object_id.toLowerCase().startsWith('tq');
-  
-  // 4. 判断摆渡车类型
-  const isShuttleVehicle = object_id.toLowerCase().startsWith('bd');
-  
-  // 选择图标 - 根据类型选择不同图标
-  let iconSrc;
-  if (isAircraftIn) {
-    iconSrc = aircraftIcon; // 滑入航空器
-  } else if (isAircraftOut) {
-    iconSrc = aircraft1Icon; // 滑出航空器
-  } else {
-    iconSrc = carIcon; // 普通车辆
-  }
-  
-  // 创建样式
-  const style = new Style({
-    image: new Icon({
-      src: iconSrc,
-      scale: 1.5,
-      anchor: [0.5, 0.5],
-      rotation: ((heading - 72) * Math.PI) / 180,
-    })
-  });
-  
-  if (!feature) {
-    // 创建新的Feature
-    feature = new Feature({
-      geometry: new Point(coordinates),
-      name: `${object_type} ${object_id}`,
-      type: object_type,
-      speed: speed,
-      isAircraftIn: isAircraftIn,
-      isAircraftOut: isAircraftOut,
-      isAircraft: isAircraft,
-      isUnmannedVehicle: isUnmannedVehicle,
-      isSpecialVehicle: isSpecialVehicle,
-      isShuttleVehicle: isShuttleVehicle
-    });
-    
-    feature.setId(object_id);
-    feature.setStyle(style);
-    vehicleSource.addFeature(feature);
-    
-    // 存储车辆信息
-    vehicles.value[object_id] = {
-      id: object_id,
-      type: object_type,
-      position: coordinates,
-      heading: heading,
-      speed: speed,
-      feature: feature,
-      isAircraftIn: isAircraftIn,
-      isAircraftOut: isAircraftOut,
-      isAircraft: isAircraft,
-      isUnmannedVehicle: isUnmannedVehicle,
-      isSpecialVehicle: isSpecialVehicle,
-      isShuttleVehicle: isShuttleVehicle
-    };
-    
-    // 创建标签 - 使用updateVehicleLabel来确保一致性
-    updateVehicleLabel(object_id, coordinates, speed);
-  } else {
-    // 更新现有Feature
-    feature.getGeometry().setCoordinates(coordinates);
-    feature.setStyle(style);
-    
-    // 更新存储的车辆信息
-    vehicles.value[object_id] = {
-      ...vehicles.value[object_id],
-      position: coordinates,
-      heading: heading,
-      speed: speed,
-      isAircraftIn: isAircraftIn,
-      isAircraftOut: isAircraftOut,
-      isAircraft: isAircraft,
-      isUnmannedVehicle: isUnmannedVehicle,
-      isSpecialVehicle: isSpecialVehicle,
-      isShuttleVehicle: isShuttleVehicle
-    };
-    
-    // 更新标签位置和内容
-    updateVehicleLabel(object_id, coordinates, speed);
-  }
-}
-
-// 更新车辆标签
-function updateVehicleLabel(id, position, speed) {
-  if (!props.map || !vehicles.value[id]) return;
-  
-  console.log(`更新标签位置: ${id}, 位置: [${position[0]}, ${position[1]}]`);
-  
-  // 如果存在旧的overlay，先移除它
-  if (vehicles.value[id].overlay) {
-    props.map.removeOverlay(vehicles.value[id].overlay);
-  }
-  
-  // 获取车辆类型信息
-  const vehicle = vehicles.value[id];
-  const isAircraftIn = vehicle.isAircraftIn;
-  const isAircraftOut = vehicle.isAircraftOut;
-  const isUnmannedVehicle = vehicle.isUnmannedVehicle;
-  const isSpecialVehicle = vehicle.isSpecialVehicle;
-  const isShuttleVehicle = vehicle.isShuttleVehicle;
-  const alarm = vehicle.alarm;
-  const warning = vehicle.warning;
-  
-
-  // 选择背景图片 - 根据车辆类型选择不同背景
-  let backgroundImage;
-  if (isAircraftOut) {
-    backgroundImage = airportOutBg; // 滑出航空器背景 - 黄色
-  } else if (isAircraftIn) {
-    backgroundImage = airportBg; // 滑入航空器背景 - 蓝色
-  }else if(alarm){
-    backgroundImage = alarmBg; // 告警背景
-  } else if(warning){
-    backgroundImage = warningBg; // 预警背景  
-  }else {
-    backgroundImage = labelBg; // 普通车辆背景
-  }
-  
-  // 重新创建标签元素
-  const labelDiv = document.createElement('div');
-  labelDiv.className = `vehicle-label ${isAircraftIn ? 'vehicle-aircraft-in' : ''} ${isAircraftOut ? 'vehicle-aircraft-out' : ''} ${isUnmannedVehicle ? 'vehicle-unmanned' : ''} ${isSpecialVehicle ? 'vehicle-special' : ''} ${isShuttleVehicle ? 'vehicle-shuttle' : ''}`;
-  
-  // 根据车辆类型设置不同的标签内容
-  let labelText = '';
-  labelText = `${id} ${speed.toFixed(2)} km/h`;
-  labelDiv.innerHTML = labelText;
-  labelDiv.style.backgroundImage = `url(${backgroundImage})`;
-  labelDiv.style.backgroundSize = '100% 100%';
-  labelDiv.style.color = '#fff';
-  labelDiv.style.padding = '5px 10px';
-  
-  // 创建新的Overlay
-  const overlay = new Overlay({
-    element: labelDiv,
-    position: position,
-    positioning: 'bottom-center', // 标签底部中心对准位置点
-    offset: [0, -30], // 向上偏移，确保在图标上方
-    stopEvent: false,
-    insertFirst: true, // 确保在DOM中优先插入
-    autoPan: false, // 禁用自动平移
-  });
-  
-  // 更新引用
-  vehicles.value[id].overlay = overlay;
-  vehicles.value[id].labelDiv = labelDiv;
-  
-  // 添加到地图
-  props.map.addOverlay(overlay);
-}
-
-// 监听地图变化，确保标签位置正确更新
-function setupMapListeners() {
-  if (!props.map) return;
-  
-  // 监听地图移动结束事件
-  props.map.on('moveend', () => {
-    // 更新所有标签位置
-    Object.keys(vehicles.value).forEach(id => {
-      const vehicle = vehicles.value[id];
-      if (vehicle.feature) {
-        const coordinates = vehicle.feature.getGeometry().getCoordinates();
-        updateVehicleLabel(id, coordinates, vehicle.speed);
-      }
-    });
-  });
-}
-
-// 组件挂载时初始化
-onMounted(() => {
-  // 创建图层并连接WebSocket
-  if (props.map) {
-    createVehicleLayer();
-  }
-  
-  // 连接WebSocket
-  connectWebSocket();
-  
-  // 设置定时发送心跳
-  const pingInterval = setInterval(() => {
-    if (wsService && wsConnected.value) {
-      sendPing();
-    }
-  }, 30000); // 每30秒发送一次心跳
-  
-  // 组件卸载时清理资源
-  onUnmounted(() => {
-    clearInterval(pingInterval);
-    cleanup();
-  });
-});
-
-// 连接WebSocket
-function connectWebSocket() {
-  try {
-    // 使用WebSocketService创建连接
-    const wsUrl = 'ws://10.0.0.124:8080/collision';
-    console.log(`正在连接WebSocket: ${wsUrl}`);
-    
-    wsService = createWebSocket(wsUrl, {
-      reconnectInterval: 3000,
-      maxReconnectAttempts: 5
-    });
-    
-    // 注册事件监听
-    wsService.on('open', (event) => {
-      console.log('WebSocket连接成功!');
-      wsConnected.value = true;
-      
-      // 连接成功后自动订阅消息
-      setTimeout(() => {
-        sendSubscribe();
-      }, 1000); // 延迟1秒发送订阅，确保连接稳定
-    });
-    
-    wsService.on('message', (data) => {
-      handleWsMessage(data);
-    });
-    
-    wsService.on('error', (event) => {
-      console.error('WebSocket错误:', event);
-      wsConnected.value = false;
-    });
-    
-    wsService.on('close', (event) => {
-      console.log(`WebSocket连接关闭: ${event.code} - ${event.reason}`);
-      wsConnected.value = false;
-    });
-    
-    wsService.on('reconnect_failed', () => {
-      console.error('WebSocket重连失败，已达到最大重试次数');
-      wsConnected.value = false;
-    });
-    
-  } catch (error) {
-    console.error('创建WebSocket连接失败:', error);
-  }
-}
-
-// 处理WebSocket消息
-function handleWsMessage(message) {
-  try {
-    const data = JSON.parse(message);
-    
-    // 根据消息类型处理
-    switch (data.type) {
-      case 'connection':
-        console.log(`连接确认: ${data.message}`);
-        break;
-      case 'position_update':
-        // 确保payload存在
-        if (data.payload && data.payload.object_id) {
-          updateVehiclePosition(data.payload);
-        } else {
-          console.error('位置更新消息格式错误:', data);
-        }
-        break;
-      case 'pong':
-        console.log('收到心跳响应');
-        break;
-      case 'collision_warning':
-        console.log('收到碰撞预警:', data.payload);
-        // 显示预警信息
-        if (data.payload) {
-          // 获取车辆ID和预警信息
-          const vehicleId = data.payload.object_id || '未知车辆';
-          const distance = data.payload.distance || 0;
-          const message = `预警：${vehicleId} 与其他车辆距离${distance.toFixed(1)}米，请注意避让！`;
-          showAlert(message, 'warning', 8000);
-          
-          // 如果需要在地图上标记该车辆的告警状态
-          if (vehicles.value[vehicleId]) {
-            vehicles.value[vehicleId].warning = true;
-            // 如果车辆已有位置信息，更新标签显示
-            if (vehicles.value[vehicleId].position) {
-              updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed);
-            }
-          }
-        }
-        break;
-      case 'rule_violation':
-        console.log('收到规则违规:', data.payload);
-        // 显示告警信息
-        if (data.payload) {
-          // 获取车辆ID和告警信息
-          const vehicleId = data.payload.object_id || '未知车辆';
-          const violationType = data.payload.violation_type || '未知违规';
-          const message = `告警：${vehicleId} 发生${violationType}，请立即处理！`;
-          showAlert(message, 'alarm', 10000);
-          
-          // 如果需要在地图上标记该车辆的告警状态
-          if (vehicles.value[vehicleId]) {
-            vehicles.value[vehicleId].alarm = true;
-            // 如果车辆已有位置信息，更新标签显示
-            if (vehicles.value[vehicleId].position) {
-              updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed);
-            }
-          }
-        }
-        break;
-      case 'vehicle_command':
-        console.log('收到车辆控制指令:', data.payload);
-        break;
-      default:
-        // 其他类型的消息可以根据需要处理
-        console.log(`收到其他类型消息: ${data.type}`, data);
-        break;
-    }
-  } catch (e) {
-    console.error('处理WebSocket消息出错:', e, message);
-  }
-}
-
-// 发送心跳
-function sendPing() {
-  if (wsService) {
-    wsService.send('ping');
-    console.log('发送心跳: ping');
-  }
-}
-
-// 订阅消息
-function sendSubscribe() {
-  if (wsService) {
-    const message = JSON.stringify({
-      type: 'subscribe',
-      topics: ['position_update', 'collision_warning', 'rule_violation'],
-      timestamp: Date.now()
-    });
-    wsService.send(message);
-    console.log('发送订阅请求');
-  }
-}
-
-// 清理资源
-function cleanup() {
-  // 断开WebSocket连接
-  if (wsService) {
-    wsService.close();
-    wsService = null;
-  }
-  
-  // 移除图层
-  if (vehicleLayer && props.map) {
-    props.map.removeLayer(vehicleLayer);
-    vehicleLayer = null;
-  }
-  
-  // 移除标签
-  if (props.map) {
-    Object.values(vehicles.value).forEach(vehicle => {
-      if (vehicle.overlay) {
-        console.log(`移除标签: ${vehicle.id}`);
-        props.map.removeOverlay(vehicle.overlay);
-        vehicle.overlay = null;
-      }
-    });
-  }
-  
-  // 清空车辆数据
-  vehicles.value = {};
-}
-
-// 监听地图实例变化
-watch(() => props.map, (newMap) => {
-  if (newMap) {
-    createVehicleLayer();
-  }
-});
-
-// 向外暴露方法
-defineExpose({
-  updateVehiclePosition,
-  wsConnected,
-  sendPing,
-  sendSubscribe
-});
-</script>
-
-<style scoped>
-.vehicle-movement-control {
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
-  z-index: 1000;
-}
-
-.ws-status {
-  padding: 5px 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  background-color: rgba(255, 87, 34, 0.8);
-  color: white;
-  transition: background-color 0.3s ease;
-  text-align: center;
-}
-
-.ws-status.connected {
-  background-color: rgba(76, 175, 80, 0.8);
-}
-
-/* 告警/预警容器样式 */
-.alert-container {
-  position: fixed;
-  top: 20%;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 2000;
-  width: 100%;
-  height: 120px;
-  max-width: 550px;
-  text-align: center;
-  
-
-}
-
-.alert-box {
-
-  display: flex;
-  flex-direction: column;
-  justify-content:center;
-  align-items: center;
-  animation: alertSlideIn 1s ease;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.alert-row {
-  display: flex;
-  align-items: center;
-  /* margin-bottom: 8px; */
-}
-
-.alert-icon {
-  width: 56px;
-  height: 50px;
-  margin-right: 12px;
-}
-
-.alert-title {
-  font-size: 26px;
-  font-weight: bold;
-  color: #fff;
-  letter-spacing: 2px;
-}
-
-.alert-desc {
-  font-size: 18px;
-  color: #fff;
-  margin-left: 44px;
-  text-align: left;
-}
-
-/* 闪烁动画 */
-.alert-flash {
-  animation: alertFlash 1s steps(2, start) infinite, alertSlideIn 0.5s ease;
-}
-@keyframes alertFlash {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-
-/* 预警样式 - 黄色背景 */
-.alert-warning {
-  width: 100%;
-  height: 120px;
-  max-width: 550px;
-  background: url(../../../assets/images/warn_report.png) no-repeat;
-  background-size: 100% 100%;
-  color: #fff;
-}
-
-/* 告警样式 - 红色背景 */
-.alert-danger {
-  width: 100%;
-  height: 120px;
-  max-width: 550px;
-  background: url(../../../assets/images/alarm_report.png) no-repeat;
-  background-size: 100% 100%;
-  color: #fff;
-}
-
-/* 车辆标签样式 */
-:deep(.vehicle-label) {
-  position: absolute;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  white-space: nowrap;
-  pointer-events: none;
-  transform: translateX(-50%);
-  text-align: center;
-  background-repeat: no-repeat;
-  background-position: center;
-  min-width: 80px;
-  min-height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 30; /* 确保标签在图标上方 */
-  transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease; /* 平滑移动效果 */
-  will-change: transform, left, top; /* 提示浏览器优化这些属性的变化 */
-  bottom: 0; /* 确保标签底部对齐定位点 */
-}
-
-/* 滑入航空器标签样式 */
-:deep(.vehicle-aircraft-in) {
-  color: #fff;
-}
-
-/* 滑出航空器标签样式 */
-:deep(.vehicle-aircraft-out) {
-  color: #333;
-}
-
-/* 无人车标签样式 */
-:deep(.vehicle-unmanned) {
-  color: #fff;
-}
-
-/* 特勤车标签样式 */
-:deep(.vehicle-special) {
-  color: #fff;
-}
-
-/* 摆渡车标签样式 */
-:deep(.vehicle-shuttle) {
-  color: #fff;
-}
-</style> 
\ No newline at end of file
diff --git a/src/components/map/controls/VehicleMovementControl.vue b/src/components/map/controls/VehicleMovementControl.vue
index 70cb9b8..b770d9f 100644
--- a/src/components/map/controls/VehicleMovementControl.vue
+++ b/src/components/map/controls/VehicleMovementControl.vue
@@ -1,25 +1,128 @@
 <template>
-
-    <!-- 告警/预警提示框 -->
-    <!-- <div class="alert-container" v-if="alertMessage"> -->
-    <div class="alert-container">
-      <div class="alert-box alert-flash" :class="{'alert-warning': alertType === 'warning', 'alert-danger': alertType === 'alarm'}">
-        <div class="alert-row">
-          <img v-if="alertType === 'alarm'" class="alert-icon" :src="alarmIcon" alt="alarm" />
-          <img v-else-if="alertType === 'warning'" class="alert-icon" :src="warnIcon" alt="warning" />
-          <span class="alert-title">
-            {{ alertType === 'alarm' ? '冲突告警' : '冲突预警' }}
-          </span>
+  <!-- 气象监测站弹窗 -->
+  <div class="weather-station-container" v-if="weatherStationVisible">
+    <div class="weather-station-box">
+      <div class="weather-station-header">
+        <span>气象监测站</span>
+        <img  class="weather-station-close"  src="../../../assets/images/close_icon.png" alt="" @click="weatherStationVisible = false" />
+      </div>
+      <div class="weather-station-content">
+        <div class="weather-station-title">
+          <span>信号灯XH001 | 实时监测</span>
+          <!-- <span class="weather-station-status">✓</span> -->
+          <img class="weather-station-status" src="../../../assets/images/weather_icon.png" alt="气象监测站" />
         </div>
-        <div class="alert-content alert-desc">
-          {{ alertMessage }}
+        <div class="weather-station-info-container">
+          <div class="weather-station-info-row">
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">温度:</span>
+              <span class="weather-info-value">{{ weatherData.temperature }}°C</span>
+            </div>
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">湿度:</span>
+              <span class="weather-info-value">{{ weatherData.humidity }}%</span>
+            </div>
+          </div>
+          <div class="weather-station-info-row">
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">风速:</span>
+              <span class="weather-info-value">{{ weatherData.windSpeed }}m/s</span>
+            </div>
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">能见度:</span>
+              <span class="weather-info-value">{{ weatherData.visibility }}km</span>
+            </div>
+          </div>
+          <div class="weather-station-info-row">
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">风向:</span>
+              <span class="weather-info-value">{{ weatherData.windDirection }}</span>
+            </div>
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">湿滑程度:</span>
+              <span class="weather-info-value">{{ weatherData.wetness }}</span>
+            </div>
+          </div>
+          <div class="weather-station-info-row">
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">气压:</span>
+              <span class="weather-info-value">{{ weatherData.pressure }}hPa</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+  </div>
+  
+  <!-- 车辆详情弹窗 -->
+  <div class="vehicle-detail-popup" v-if="vehicleDetailVisible" :style="detailPopupStyle">
+    <div class="vehicle-detail-header">
+      <div class="vehicle-detail-title">车辆详情</div>
+      <div class="vehicle-detail-close" @click="vehicleDetailVisible = false">×</div>
+    </div>
+    <div class="vehicle-detail-content">
+      <div class="vehicle-detail-info-row">
+        <div class="vehicle-detail-info-item">
+          <span class="vehicle-info-label">车辆ID:</span>
+          <span class="vehicle-info-value">{{ vehicleDetail.id }}</span>
+        </div>
+        <div class="vehicle-detail-info-item">
+          <span class="vehicle-info-label">车辆类型:</span>
+          <span class="vehicle-info-value">{{ vehicleDetail.type }}</span>
+        </div>
+      </div>
+      <div class="vehicle-detail-info-row">
+        <div class="vehicle-detail-info-item">
+          <span class="vehicle-info-label">状态:</span>
+          <span class="vehicle-info-value">{{ vehicleDetail.status }}</span>
+        </div>
+        <div class="vehicle-detail-info-item">
+          <span class="vehicle-info-label">开始时间:</span>
+          <span class="vehicle-info-value">{{ vehicleDetail.startTime }}</span>
+        </div>
+      </div>
+      <div class="vehicle-detail-info-row">
+        <div class="vehicle-detail-info-item">
+          <span class="vehicle-info-label">当前位置:</span>
+          <span class="vehicle-info-value">{{ vehicleDetail.currentLocation }}</span>
+        </div>
+        <div class="vehicle-detail-info-item">
+          <span class="vehicle-info-label">总距离:</span>
+          <span class="vehicle-info-value">{{ vehicleDetail.totalDistance }}</span>
+        </div>
+      </div>
+      <div class="vehicle-detail-info-row">
+        <div class="vehicle-detail-info-item">
+          <span class="vehicle-info-label">起始位置:</span>
+          <span class="vehicle-info-value">{{ vehicleDetail.startLocation }}</span>
+        </div>
+        <div class="vehicle-detail-info-item">
+          <span class="vehicle-info-label">目标位置:</span>
+          <span class="vehicle-info-value">{{ vehicleDetail.endLocation }}</span>
+        </div>
+      </div>
+      <div class="vehicle-detail-info-row">
+        <div class="vehicle-detail-info-item">
+          <span class="vehicle-info-label">电量:</span>
+          <span class="vehicle-info-value">{{ vehicleDetail.battery }}</span>
+        </div>
+        <div class="vehicle-detail-info-item">
+          <span class="vehicle-info-label">负责人:</span>
+          <span class="vehicle-info-value">{{ vehicleDetail.manager }}</span>
+        </div>
+      </div>
+      <div class="vehicle-detail-info-row">
+        <div class="vehicle-detail-info-item">
+          <span class="vehicle-info-label">联系电话:</span>
+          <span class="vehicle-info-value">{{ vehicleDetail.phone }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, onActivated, onDeactivated } from 'vue';
 import { Vector as VectorSource } from 'ol/source';
 import { Vector as VectorLayer } from 'ol/layer';
 import { Style, Icon } from 'ol/style';
@@ -28,7 +131,7 @@ import Point from 'ol/geom/Point';
 import Overlay from 'ol/Overlay';
 import { transform } from 'ol/proj';
 // 导入WebSocketService
-import WebSocketService, { createWebSocket } from '../../../utils/websocket.js';
+import WebSocketService, { createWebSocket, resetWebSocketInstance } from '../../../utils/websocket.js';
 
 // 为SockJS提供polyfill
 if (typeof window !== 'undefined' && !window.global) {
@@ -44,48 +147,66 @@ import airportBg from '../../../assets/images/airport_bg.png';
 import airportOutBg from '../../../assets/images/airport_out.png';
 import alarmBg from '../../../assets/images/alarm_bg.png';
 import warningBg from '../../../assets/images/warning_bg.png';
-import alarmIcon from '../../../assets/images/alarm_icon.png';
-import warnIcon from '../../../assets/images/warn_icon.png';
+import warningCarIcon from '../../../assets/images/warning_car.png'; // 超速警告车辆图标
+
 // 定义props接收地图实例
 const props = defineProps({
   map: Object
 });
 
+// 气象监测站数据
+const weatherStationVisible = ref(true); // 默认显示
+
+// 气象数据
+const weatherData = ref({
+  temperature: '22.5',
+  humidity: '68',
+  windSpeed: '3.2',
+  visibility: '8.5',
+  pressure: '1013.2',
+  windDirection: '北风',
+  wetness: '干燥',
+  updateTime: Date.now()
+});
+
+// 车辆详情数据
+const vehicleDetailVisible = ref(false); // 修改为默认隐藏
+const vehicleDetail = ref({
+  id: 'QN001',
+  type: '驱鸟车',
+  status: '任务中',
+  startTime: '11-19 11:30',
+  currentLocation: 'A区T3点',
+  startLocation: 'T1航站楼',
+  endLocation: 'T3航站楼',
+  totalDistance: '1.3km',
+  battery: '60%',
+  manager: '张三',
+  phone: '18661910988'
+});
+
+// 弹窗位置样式
+const detailPopupStyle = ref({
+  left: '0px',
+  top: '0px'
+});
+
 // WebSocket连接状态
 const wsConnected = ref(false);
 let wsService = null;
+let reconnectTimer = null;
 
 // 车辆数据存储
 const vehicles = ref({});
 let vehicleLayer = null;
 let vehicleSource = null;
 
+// 车辆超速状态超时计时器存储
+const speedViolationTimers = {};
+
 // 动态收集所有车辆/航空器类别
 const vehicleCategories = ref({});
 
-// 告警/预警状态
-const alertMessage = ref('与航空器Y117距离小于600m！请及时避让');
-const alertType = ref('warning'); // 'warning' 或 'alarm'
-let alertTimer = null;
-
-// 显示告警/预警消息
-function showAlert(message, type, duration = 5000) {
-  // 清除可能存在的定时器
-  if (alertTimer) {
-    clearTimeout(alertTimer);
-  }
-  
-  // 设置消息和类型
-  alertMessage.value = message;
-  alertType.value = type; // 'warning' 或 'alarm'
-  
-  // 设置自动消失
-  alertTimer = setTimeout(() => {
-    alertMessage.value = '';
-    alertType.value = '';
-  }, duration);
-}
-
 // 创建车辆图层
 function createVehicleLayer() {
   if (!props.map) return;
@@ -105,6 +226,58 @@ function createVehicleLayer() {
   
   // 设置地图监听器
   setupMapListeners();
+  
+  // 添加点击事件监听
+  props.map.on('click', handleMapClick);
+}
+
+// 处理地图点击事件
+function handleMapClick(event) {
+  const feature = props.map.forEachFeatureAtPixel(event.pixel, function(feature) {
+    return feature;
+  });
+  
+  if (feature) {
+    const objectId = feature.getId();
+    if (objectId && vehicles.value[objectId]) {
+      // 获取车辆数据
+      const vehicle = vehicles.value[objectId];
+      
+      // 更新车辆详情
+      vehicleDetail.value = {
+        id: objectId,
+        type: vehicle.type,
+        status: '任务中', // 可以根据实际数据设置
+        startTime: '11-19 11:30', // 示例数据，实际应从vehicle中获取
+        currentLocation: '当前位置', // 可以转换坐标为地理位置描述
+        startLocation: 'T1航站楼',
+        endLocation: 'T3航站楼',
+        totalDistance: '1.3km',
+        battery: '60%',
+        manager: '张三',
+        phone: '18661910988'
+      };
+      
+      // 获取点击位置在屏幕上的坐标
+      const pixel = event.pixel;
+      const viewportPosition = props.map.getViewport().getBoundingClientRect();
+      
+      // 设置弹窗位置，右下角
+      detailPopupStyle.value = {
+        left: (viewportPosition.left + pixel[0] + 10) + 'px',
+        top: (viewportPosition.top + pixel[1] + 10) + 'px'
+      };
+      
+      // 显示详情弹窗
+      vehicleDetailVisible.value = true;
+    } else {
+      // 如果点击的不是车辆图标，隐藏弹窗
+      vehicleDetailVisible.value = false;
+    }
+  } else {
+    // 如果点击的不是任何特性，隐藏弹窗
+    vehicleDetailVisible.value = false;
+  }
 }
 
 // 更新车辆位置
@@ -142,12 +315,27 @@ function updateVehiclePosition(vehicleData) {
   // 4. 判断摆渡车类型
   const isShuttleVehicle = object_id.toLowerCase().startsWith('bd');
   
-  // 选择图标 - 根据类型选择不同图标
+  // 选择图标 - 根据类型和告警状态选择不同图标
   let iconSrc;
+  
+  // 检查车辆是否已存在并且有状态标记
+  const existingVehicle = vehicles.value[object_id];
+  const hasInfoStatus = existingVehicle && existingVehicle.info;
+  const hasWarningStatus = existingVehicle && existingVehicle.warning;
+  const hasAlarmStatus = existingVehicle && existingVehicle.alarm;
+  const hasCriticalStatus = existingVehicle && existingVehicle.critical;
+  
+  // 根据车辆类型和状态选择图标
   if (isAircraftIn) {
     iconSrc = aircraftIcon; // 滑入航空器
   } else if (isAircraftOut) {
     iconSrc = aircraft1Icon; // 滑出航空器
+  } else if (hasInfoStatus || hasWarningStatus || hasCriticalStatus) {
+    // 超速、预警和严重违规状态使用警告车辆图标
+    iconSrc = warningCarIcon; 
+  } else if (hasAlarmStatus) {
+    // 告警状态
+    iconSrc = carIcon; // 或者使用其他告警图标
   } else {
     iconSrc = carIcon; // 普通车辆
   }
@@ -264,7 +452,7 @@ function updateVehiclePosition(vehicleData) {
 }
 
 // 更新车辆标签
-function updateVehicleLabel(id, position, speed) {
+function updateVehicleLabel(id, position, speed, violationInfo) {
   if (!props.map || !vehicles.value[id]) return;
   
   console.log(`更新标签位置: ${id}, 位置: [${position[0]}, ${position[1]}]`);
@@ -283,6 +471,8 @@ function updateVehicleLabel(id, position, speed) {
   const isShuttleVehicle = vehicle.isShuttleVehicle;
   const alarm = vehicle.alarm;
   const warning = vehicle.warning;
+  const critical = vehicle.critical;
+  const info = vehicle.info;
   
   // 确定车辆类别的key
   let typeKey = vehicle.type;
@@ -292,17 +482,17 @@ function updateVehicleLabel(id, position, speed) {
   else if (isSpecialVehicle) typeKey = 'SPECIAL_VEHICLE';
   else if (isShuttleVehicle) typeKey = 'SHUTTLE_VEHICLE';
   
-  // 选择背景图片 - 根据车辆类型选择不同背景
+  // 选择背景图片 - 根据车辆类型和告警状态选择不同背景
   let backgroundImage;
-  if (isAircraftOut) {
+  if (alarm) {
+    backgroundImage = alarmBg; // 告警背景 - 红色
+  } else if (warning || info || critical) {
+    backgroundImage = warningBg; // 预警/超速/越界背景 - 黄色
+  } else if (isAircraftOut) {
     backgroundImage = airportOutBg; // 滑出航空器背景 - 黄色
   } else if (isAircraftIn) {
     backgroundImage = airportBg; // 滑入航空器背景 - 蓝色
-  }else if(alarm){
-    backgroundImage = alarmBg; // 告警背景
-  } else if(warning){
-    backgroundImage = warningBg; // 预警背景  
-  }else {
+  } else {
     backgroundImage = labelBg; // 普通车辆背景
   }
   
@@ -310,9 +500,31 @@ function updateVehicleLabel(id, position, speed) {
   const labelDiv = document.createElement('div');
   labelDiv.className = `vehicle-label ${isAircraftIn ? 'vehicle-aircraft-in' : ''} ${isAircraftOut ? 'vehicle-aircraft-out' : ''} ${isUnmannedVehicle ? 'vehicle-unmanned' : ''} ${isSpecialVehicle ? 'vehicle-special' : ''} ${isShuttleVehicle ? 'vehicle-shuttle' : ''}`;
   
-  // 根据车辆类型设置不同的标签内容
-  let labelText = '';
-  labelText = `${id} ${speed.toFixed(2)} km/h`;
+  // 添加告警状态类
+  if (alarm) labelDiv.className += ' vehicle-alarm';
+  else if (warning) labelDiv.className += ' vehicle-warning';
+  else if (critical) labelDiv.className += ' vehicle-critical';
+  else if (info) labelDiv.className += ' vehicle-info';
+  
+  // 根据车辆类型和状态设置不同的标签内容
+  let labelText = `${id} ${speed.toFixed(2)} km/h`;
+  
+  // 如果是超速状态(info)，使用特殊格式
+  if (info && violationInfo) {
+    // 第一行：车辆ID和当前速度
+    labelText = `${id} ${speed.toFixed(2)} km/h`;
+    
+    // 第二行：超速描述
+    if (violationInfo.description) {
+      labelText += `<br>${violationInfo.description}`;
+    }
+    
+    // 第三行：限速和实际车速详情
+    if (violationInfo.limitValue !== undefined && violationInfo.actualValue !== undefined) {
+      labelText += `<br>当前车辆限制车速${violationInfo.limitValue.toFixed(1)} 实际车速${violationInfo.actualValue.toFixed(1)}`;
+    }
+  }
+  
   labelDiv.innerHTML = labelText;
   labelDiv.style.backgroundImage = `url(${backgroundImage})`;
   labelDiv.style.backgroundSize = '100% 100%';
@@ -355,6 +567,19 @@ function setupMapListeners() {
   });
 }
 
+// 模拟更新气象数据
+function updateWeatherData() {
+  // 这里可以通过API获取实时气象数据 用模拟数据
+  weatherData.value = {
+    temperature: '22.5',
+    humidity: '68',
+    windSpeed: '3.2',
+    visibility: '8.5',
+    pressure: '1013.2',
+    updateTime: Date.now()
+  };
+}
+
 // 组件挂载时初始化
 onMounted(() => {
   // 创建图层并连接WebSocket
@@ -372,18 +597,61 @@ onMounted(() => {
     }
   }, 30000); // 每30秒发送一次心跳
   
+  // 设置定时更新气象数据
+  const weatherUpdateInterval = setInterval(() => {
+    updateWeatherData();
+  }, 60000); // 每分钟更新一次气象数据
+  
   // 组件卸载时清理资源
   onUnmounted(() => {
     clearInterval(pingInterval);
+    clearInterval(weatherUpdateInterval);
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
     cleanup();
   });
 });
 
+// 组件被激活时（切换回该路由时）
+onActivated(() => {
+  console.log('VehicleMovementControl组件被激活');
+  // 如果WebSocket未连接，重新连接
+  if (!wsConnected.value && !wsService) {
+    console.log('组件激活，WebSocket未连接，正在重新连接...');
+    // 延迟一点时间再连接，确保DOM已完全渲染
+    reconnectTimer = setTimeout(() => {
+      connectWebSocket();
+    }, 500);
+  } else {
+    console.log('组件激活，WebSocket已连接');
+  }
+});
+
+// 组件被停用时（切换到其他路由时）
+onDeactivated(() => {
+  console.log('VehicleMovementControl组件被停用');
+  // 可以选择在这里关闭WebSocket，也可以保持连接
+  // 如果希望在组件隐藏时断开连接，可以取消下面的注释
+  /*
+  if (wsService) {
+    console.log('组件停用，关闭WebSocket连接');
+    wsService.close();
+    wsService = null;
+    wsConnected.value = false;
+  }
+  */
+});
+
 // 连接WebSocket
 function connectWebSocket() {
+  // 重置WebSocket实例以强制创建新实例
+  resetWebSocketInstance();
+  
   try {
     // 使用WebSocketService创建连接
-    const wsUrl = 'ws://10.0.0.124:8080/collision';
+    const wsUrl = import.meta.env.VITE_APP_WEBSOCKET_URL;
     console.log(`正在连接WebSocket: ${wsUrl}`);
     
     wsService = createWebSocket(wsUrl, {
@@ -439,6 +707,10 @@ function handleWsMessage(message) {
       case 'position_update':
         // 确保payload存在
         if (data.payload && data.payload.object_id) {
+          // 检查是否需要清除车辆的告警状态
+          clearVehicleAlertStatus(data.payload);
+          
+          // 更新车辆位置
           updateVehiclePosition(data.payload);
         } else {
           console.error('位置更新消息格式错误:', data);
@@ -447,43 +719,275 @@ function handleWsMessage(message) {
       case 'pong':
         console.log('收到心跳响应');
         break;
-      case 'collision_warning':
-        console.log('收到碰撞预警:', data.payload);
-        // 显示预警信息
-        if (data.payload) {
-          // 获取车辆ID和预警信息
-          const vehicleId = data.payload.object_id || '未知车辆';
-          const distance = data.payload.distance || 0;
-          const message = `预警：${vehicleId} 与其他车辆距离${distance.toFixed(1)}米，请注意避让！`;
-          showAlert(message, 'warning', 8000);
-          
-          // 如果需要在地图上标记该车辆的告警状态
-          if (vehicles.value[vehicleId]) {
-            vehicles.value[vehicleId].warning = true;
-            // 如果车辆已有位置信息，更新标签显示
-            if (vehicles.value[vehicleId].position) {
-              updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed);
-            }
-          }
-        }
-        break;
       case 'rule_violation':
         console.log('收到规则违规:', data.payload);
-        // 显示告警信息
         if (data.payload) {
           // 获取车辆ID和告警信息
-          const vehicleId = data.payload.object_id || '未知车辆';
-          const violationType = data.payload.violation_type || '未知违规';
-          const message = `告警：${vehicleId} 发生${violationType}，请立即处理！`;
-          showAlert(message, 'alarm', 10000);
+          const vehicleId = data.payload.object_id || data.payload.vehicleId || data.payload.vehicleLicense || '未知车辆';
+          const violationType = data.payload.violationType || '未知违规';
+          const alertLevel = data.payload.alertLevel || 'INFO';
+          const description = data.payload.description || '';
+          const limitValue = data.payload.limitValue;
+          const actualValue = data.payload.actualValue;
           
-          // 如果需要在地图上标记该车辆的告警状态
-          if (vehicles.value[vehicleId]) {
-            vehicles.value[vehicleId].alarm = true;
-            // 如果车辆已有位置信息，更新标签显示
-            if (vehicles.value[vehicleId].position) {
-              updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed);
+          // 检查是否为超速违规
+          const isSpeedViolation = violationType === 'SPEED_VIOLATION';
+          // 检查是否为超速结束
+          const isSpeedViolationEnd = violationType === 'SPEED_VIOLATION_END';
+          
+          // 如果是超速违规，特殊处理
+          if (isSpeedViolation) {
+            console.log(`检测到超速违规: ${vehicleId}, 实际速度: ${actualValue}, 限速: ${limitValue}`);
+            
+            // 在地图上标记该车辆的超速状态
+            if (vehicles.value[vehicleId]) {
+              vehicles.value[vehicleId].info = true;
+              vehicles.value[vehicleId].alarm = false;
+              vehicles.value[vehicleId].warning = false;
+              vehicles.value[vehicleId].critical = false;
+              
+              // 更新车辆图标为超速警告图标
+              if (vehicles.value[vehicleId].feature) {
+                vehicles.value[vehicleId].feature.setStyle(new Style({
+                  image: new Icon({
+                    src: warningCarIcon,
+                    scale: 1.5,
+                    anchor: [0.5, 0.5],
+                    rotation: ((vehicles.value[vehicleId].heading - 72) * Math.PI) / 180,
+                  })
+                }));
+              }
+              
+              // 更新标签显示为超速状态
+              if (vehicles.value[vehicleId].position) {
+                updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
+                  description: description || `超速违规`,
+                  limitValue: limitValue,
+                  actualValue: actualValue
+                });
+              }
+              
+              // 设置或重置超速状态自动清除计时器
+              if (speedViolationTimers[vehicleId]) {
+                clearTimeout(speedViolationTimers[vehicleId]);
+              }
+              
+              // 设置新的超时计时器，如果在一定时间内（如5秒）没有再次接收到超速消息，则自动清除超速状态
+              speedViolationTimers[vehicleId] = setTimeout(() => {
+                // 确保车辆仍然存在
+                if (vehicles.value[vehicleId]) {
+                  console.log(`超速状态超时: ${vehicleId}, 自动清除超速状态`);
+                  
+                  // 清除超速状态
+                  vehicles.value[vehicleId].info = false;
+                  
+                  // 更新车辆图标为默认图标
+                  if (vehicles.value[vehicleId].feature) {
+                    // 根据车辆类型选择适当的图标
+                    let iconSrc = carIcon; // 默认普通车图标
+                    
+                    // 检查是否是特殊类型车辆
+                    if (vehicles.value[vehicleId].isAircraftIn) {
+                      iconSrc = aircraftIcon;
+                    } else if (vehicles.value[vehicleId].isAircraftOut) {
+                      iconSrc = aircraft1Icon;
+                    }
+                    
+                    // 应用普通样式
+                    vehicles.value[vehicleId].feature.setStyle(new Style({
+                      image: new Icon({
+                        src: iconSrc,
+                        scale: 1.5,
+                        anchor: [0.5, 0.5],
+                        rotation: ((vehicles.value[vehicleId].heading - 72) * Math.PI) / 180,
+                      })
+                    }));
+                  }
+                  
+                  // 更新标签显示为正常状态
+                  if (vehicles.value[vehicleId].position) {
+                    updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed);
+                  }
+                  
+                  // 清除计时器引用
+                  delete speedViolationTimers[vehicleId];
+                }
+              }, 5000); // 5秒超时，可以根据需要调整
             }
+            return; // 已处理超速情况，不再进入下面的alertLevel处理
+          }
+
+          // 如果是超速结束，清除超速状态
+          if (isSpeedViolationEnd) {
+            console.log(`检测到超速结束: ${vehicleId}`);
+            
+            // 在地图上清除该车辆的超速状态
+            if (vehicles.value[vehicleId]) {
+              // 清除所有告警状态
+              vehicles.value[vehicleId].info = false;
+              vehicles.value[vehicleId].alarm = false;
+              vehicles.value[vehicleId].warning = false;
+              vehicles.value[vehicleId].critical = false;
+              
+              // 更新车辆图标为默认图标
+              if (vehicles.value[vehicleId].feature) {
+                // 根据车辆类型选择适当的图标
+                let iconSrc = carIcon; // 默认普通车图标
+                
+                // 检查是否是特殊类型车辆
+                if (vehicles.value[vehicleId].isAircraftIn) {
+                  iconSrc = aircraftIcon;
+                } else if (vehicles.value[vehicleId].isAircraftOut) {
+                  iconSrc = aircraft1Icon;
+                }
+                
+                // 应用普通样式
+                vehicles.value[vehicleId].feature.setStyle(new Style({
+                  image: new Icon({
+                    src: iconSrc,
+                    scale: 1.5,
+                    anchor: [0.5, 0.5],
+                    rotation: ((vehicles.value[vehicleId].heading - 72) * Math.PI) / 180,
+                  })
+                }));
+              }
+              
+              // 更新标签显示为正常状态
+              if (vehicles.value[vehicleId].position) {
+                updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed);
+              }
+            }
+            return; // 已处理超速结束情况，不再进入下面的alertLevel处理
+          }
+          
+          // 根据alertLevel处理其他类型的告警
+          switch (alertLevel.toUpperCase()) {
+            case 'Info': // 预警
+              // 在地图上标记该车辆的预警状态
+              if (vehicles.value[vehicleId]) {
+                vehicles.value[vehicleId].warning = true;
+                vehicles.value[vehicleId].alarm = false;
+                vehicles.value[vehicleId].critical = false;
+                vehicles.value[vehicleId].info = false;
+                
+                // 更新车辆图标为警告图标
+                if (vehicles.value[vehicleId].feature) {
+                  vehicles.value[vehicleId].feature.setStyle(new Style({
+                    image: new Icon({
+                      src: warningCarIcon,
+                      scale: 1.5,
+                      anchor: [0.5, 0.5],
+                      rotation: ((vehicles.value[vehicleId].heading - 72) * Math.PI) / 180,
+                    })
+                  }));
+                }
+                
+                // 更新标签显示
+                if (vehicles.value[vehicleId].position) {
+                  updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
+                    description: description,
+                    limitValue: limitValue,
+                    actualValue: actualValue
+                  });
+                }
+              }
+              break;
+              
+            case 'ALERT': // 告警
+              // 在地图上标记该车辆的告警状态
+              if (vehicles.value[vehicleId]) {
+                vehicles.value[vehicleId].alarm = true;
+                vehicles.value[vehicleId].warning = false;
+                vehicles.value[vehicleId].critical = false;
+                vehicles.value[vehicleId].info = false;
+                
+                // 更新车辆图标为告警图标（与其他警告保持一致使用warningCarIcon）
+                if (vehicles.value[vehicleId].feature) {
+                  vehicles.value[vehicleId].feature.setStyle(new Style({
+                    image: new Icon({
+                      src: warningCarIcon,
+                      scale: 1.5,
+                      anchor: [0.5, 0.5],
+                      rotation: ((vehicles.value[vehicleId].heading - 72) * Math.PI) / 180,
+                    })
+                  }));
+                }
+                
+                // 更新标签显示
+                if (vehicles.value[vehicleId].position) {
+                  updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
+                    description: description,
+                    limitValue: limitValue,
+                    actualValue: actualValue
+                  });
+                }
+              }
+              break;
+              
+            case 'CRITICAL': // 越界
+              // 在地图上标记该车辆的严重告警状态
+              if (vehicles.value[vehicleId]) {
+                vehicles.value[vehicleId].critical = true;
+                vehicles.value[vehicleId].alarm = false;
+                vehicles.value[vehicleId].warning = false;
+                vehicles.value[vehicleId].info = false;
+                
+                // 更新车辆图标为警告图标
+                if (vehicles.value[vehicleId].feature) {
+                  vehicles.value[vehicleId].feature.setStyle(new Style({
+                    image: new Icon({
+                      src: warningCarIcon,
+                      scale: 1.5,
+                      anchor: [0.5, 0.5],
+                      rotation: ((vehicles.value[vehicleId].heading - 72) * Math.PI) / 180,
+                    })
+                  }));
+                }
+                
+                // 更新标签显示
+                if (vehicles.value[vehicleId].position) {
+                  updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
+                    description: description,
+                    limitValue: limitValue,
+                    actualValue: actualValue
+                  });
+                }
+              }
+              break;
+              
+            case 'WARNING': // 超速
+              // 在地图上标记该车辆的超速状态
+              if (vehicles.value[vehicleId]) {
+                vehicles.value[vehicleId].info = true;
+                vehicles.value[vehicleId].alarm = false;
+                vehicles.value[vehicleId].warning = false;
+                vehicles.value[vehicleId].critical = false;
+                
+                // 更新车辆图标为警告图标
+                if (vehicles.value[vehicleId].feature) {
+                  vehicles.value[vehicleId].feature.setStyle(new Style({
+                    image: new Icon({
+                      src: warningCarIcon,
+                      scale: 1.5,
+                      anchor: [0.5, 0.5],
+                      rotation: ((vehicles.value[vehicleId].heading - 72) * Math.PI) / 180,
+                    })
+                  }));
+                }
+                
+                // 更新标签显示为超速状态
+                if (vehicles.value[vehicleId].position) {
+                  updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
+                    description: description,
+                    limitValue: limitValue,
+                    actualValue: actualValue
+                  });
+                }
+              }
+              break;
+              
+            default:
+              console.log(`未处理的告警级别: ${alertLevel}`);
           }
         }
         break;
@@ -500,6 +1004,72 @@ function handleWsMessage(message) {
   }
 }
 
+// 清除车辆告警状态（如果需要）
+function clearVehicleAlertStatus(vehicleData) {
+  const { object_id, speed } = vehicleData;
+  
+  // 检查该车辆是否已存在且有告警状态
+  const existingVehicle = vehicles.value[object_id];
+  if (!existingVehicle) return;
+  
+  // 检查是否有任何告警状态
+  const hasAlertStatus = existingVehicle.info || existingVehicle.warning || 
+                       existingVehicle.alarm || existingVehicle.critical;
+  
+  // 如果有告警状态，需要检查是否应该清除
+  if (hasAlertStatus) {
+    // 只处理超速状态(info)的自动恢复
+    // 1. 判断是否为超速状态
+    const isSpeedViolation = existingVehicle.info;
+    
+    // 2. 判断当前速度是否已降低到安全值
+    // 这里使用一个默认阈值判断，实际应用中最好使用服务端返回的限速值
+    // 假设超速阈值为50km/h
+    const SPEED_THRESHOLD = 50; // 超速阈值，单位km/h
+    const isBelowThreshold = speed < SPEED_THRESHOLD;
+    
+    // 3. 如果是超速状态且当前速度已降低到阈值以下，清除超速状态
+    if (isSpeedViolation && isBelowThreshold) {
+      console.log(`检测到车辆${object_id}速度降低到${speed.toFixed(1)}km/h，低于阈值${SPEED_THRESHOLD}km/h，自动清除超速状态`);
+      
+      // 清除超速状态
+      existingVehicle.info = false;
+      
+      // 更新车辆图标为默认图标
+      if (existingVehicle.feature) {
+        // 根据车辆类型选择适当的图标
+        let iconSrc = carIcon; // 默认普通车图标
+        
+        // 检查是否是特殊类型车辆
+        if (existingVehicle.isAircraftIn) {
+          iconSrc = aircraftIcon;
+        } else if (existingVehicle.isAircraftOut) {
+          iconSrc = aircraft1Icon;
+        }
+        
+        // 应用普通样式
+        existingVehicle.feature.setStyle(new Style({
+          image: new Icon({
+            src: iconSrc,
+            scale: 1.5,
+            anchor: [0.5, 0.5],
+            rotation: ((existingVehicle.heading - 72) * Math.PI) / 180,
+          })
+        }));
+      }
+      
+      // 更新标签显示为正常状态
+      if (existingVehicle.position) {
+        updateVehicleLabel(object_id, existingVehicle.position, speed);
+      }
+      
+      console.log(`已清除${object_id}的超速状态，恢复为普通状态`);
+    } else {
+      console.log(`车辆${object_id}有告警状态，但不符合自动清除条件，保持该状态`);
+    }
+  }
+}
+
 // 发送心跳
 function sendPing() {
   if (wsService) {
@@ -529,6 +1099,17 @@ function cleanup() {
     wsService = null;
   }
   
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+  
+  // 清理所有超速状态计时器
+  Object.keys(speedViolationTimers).forEach(vehicleId => {
+    clearTimeout(speedViolationTimers[vehicleId]);
+    delete speedViolationTimers[vehicleId];
+  });
+  
   // 移除图层
   if (vehicleLayer && props.map) {
     props.map.removeLayer(vehicleLayer);
@@ -564,6 +1145,52 @@ defineExpose({
   sendPing,
   sendSubscribe,
   vehicleCategories,
+  weatherStationVisible,
+  weatherData,
+  vehicleDetailVisible,
+  vehicleDetail,
+  toggleWeatherStationVisibility() {
+    weatherStationVisible.value = !weatherStationVisible.value;
+  },
+  toggleVehicleDetailVisibility() {
+    vehicleDetailVisible.value = !vehicleDetailVisible.value;
+  },
+  updateVehicleDetail(data) {
+    if (data) {
+      vehicleDetail.value = {...vehicleDetail.value, ...data};
+      vehicleDetailVisible.value = true;
+    }
+  },
+  showVehicleDetail(vehicleId, pixelPosition) {
+    if (vehicles.value[vehicleId]) {
+      // 更新车辆详情
+      vehicleDetail.value = {
+        id: vehicleId,
+        type: vehicles.value[vehicleId].type,
+        status: '任务中',
+        startTime: '11-19 11:30',
+        currentLocation: '当前位置',
+        startLocation: 'T1航站楼',
+        endLocation: 'T3航站楼',
+        totalDistance: '1.3km',
+        battery: '60%',
+        manager: '张三',
+        phone: '18661910988'
+      };
+      
+      // 设置弹窗位置
+      if (pixelPosition) {
+        const viewportPosition = props.map.getViewport().getBoundingClientRect();
+        detailPopupStyle.value = {
+          left: (viewportPosition.left + pixelPosition[0] + 10) + 'px',
+          top: (viewportPosition.top + pixelPosition[1] + 10) + 'px'
+        };
+      }
+      
+      // 显示详情弹窗
+      vehicleDetailVisible.value = true;
+    }
+  },
   setCategoryVisibility(type, { visible, showLabel }) {
     if (vehicleCategories.value[type]) {
       // 更新分类设置
@@ -613,91 +1240,152 @@ defineExpose({
         }
       });
     }
+  },
+  reconnectWebSocket() {
+    console.log('手动重连WebSocket');
+    connectWebSocket();
   }
 });
 </script>
 
 <style scoped>
-
-/* 告警/预警容器样式 */
-.alert-container {
+/* 气象监测站样式 */
+.weather-station-container {
   position: fixed;
-  top: 20%;
-  left: 50%;
-  transform: translateX(-50%);
+  top: 100px;
+  right: 20px;
   z-index: 2000;
-  width: 100%;
-  height: 120px;
-  max-width: 550px;
-  text-align: center;
-  
-
+  width: 300px;
 }
 
-.alert-box {
+.weather-station-box {
+  background-color: #424851;
+  border-radius: 8px;
+  overflow: hidden;
+}
 
+.weather-station-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom:1px solid #777777;
+  background-color: #424851;
+  color: #fff;
+  padding: 8px 12px;
+  font-size: 16px;
+}
+
+.weather-station-close {
+  cursor: pointer;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.weather-station-content {
+  padding: 12px;
+  color: #fff;
+}
+
+.weather-station-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.weather-station-status {
+  color: #4CAF50;
+  font-weight: bold;
+}
+
+.weather-station-info-container {
   display: flex;
   flex-direction: column;
-  justify-content:center;
-  align-items: center;
-  animation: alertSlideIn 1s ease;
-  position: relative;
-  box-sizing: border-box;
+  gap: 10px;
 }
 
-.alert-row {
+.weather-station-info-row {
   display: flex;
+  justify-content: space-between;
+}
+
+.weather-station-info-item {
+  flex: 1;
+}
+
+.weather-info-label {
+    color: #EEEEEE;
+  font-size: 14px;
+  margin-right: 4px;
+}
+
+.weather-info-value {
+   color: #EEEEEE;
+  font-size: 14px;
+  
+}
+
+/* 车辆详情弹窗样式 */
+.vehicle-detail-popup {
+  position: fixed;
+  z-index: 2000;
+  width: 380px;
+  background-color: #424851;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  border: 1px solid #777777;
+}
+
+.vehicle-detail-header {
+  display: flex;
+  justify-content: space-between;
   align-items: center;
-  /* margin-bottom: 8px; */
+  border-bottom:1px solid #777777;
+  background-color: #424851;
+  color: #fff;
+  padding: 8px 12px;
+  font-size: 16px;
 }
 
-.alert-icon {
-  width: 56px;
-  height: 50px;
-  margin-right: 12px;
+.vehicle-detail-title {
+  color: #fff;
+  font-size: 16px;
+  font-weight: bolder;
 }
 
-.alert-title {
-  font-size: 26px;
+.vehicle-detail-close {
+  cursor: pointer;
+  font-size: 20px;
   font-weight: bold;
   color: #fff;
-  letter-spacing: 2px;
 }
 
-.alert-desc {
-  font-size: 18px;
-  color: #fff;
-  margin-left: 44px;
-  text-align: left;
-}
-
-/* 闪烁动画 */
-.alert-flash {
-  animation: alertFlash 1s steps(2, start) infinite, alertSlideIn 0.5s ease;
-}
-@keyframes alertFlash {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-
-/* 预警样式 - 黄色背景 */
-.alert-warning {
-  width: 100%;
-  height: 120px;
-  max-width: 550px;
-  background: url(../../../assets/images/warn_report.png) no-repeat;
-  background-size: 100% 100%;
+.vehicle-detail-content {
+  padding: 12px;
   color: #fff;
 }
 
-/* 告警样式 - 红色背景 */
-.alert-danger {
-  width: 100%;
-  height: 120px;
-  max-width: 550px;
-  background: url(../../../assets/images/alarm_report.png) no-repeat;
-  background-size: 100% 100%;
-  color: #fff;
+.vehicle-detail-info-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.vehicle-detail-info-item {
+  flex: 1;
+}
+
+.vehicle-info-label {
+  color: #EEEEEE;
+  font-size: 14px;
+  margin-right: 4px;
+}
+
+.vehicle-info-value {
+ color: #EEEEEE;
+  font-size: 14px;
+ 
 }
 
 /* 车辆标签样式 */
@@ -747,4 +1435,29 @@ defineExpose({
 :deep(.vehicle-shuttle) {
   color: #fff;
 }
-</style> 
\ No newline at end of file
+
+/* 告警标签样式 */
+:deep(.vehicle-alarm) {
+  color: #fff;
+  font-weight: bold;
+}
+
+/* 预警标签样式 */
+:deep(.vehicle-warning) {
+  color: #fff;
+}
+
+/* 严重违规标签样式 */
+:deep(.vehicle-critical) {
+  color: #fff;
+}
+
+/* 信息级别(超速等)标签样式 */
+:deep(.vehicle-info) {
+  color: #fff;
+  line-height: 1.4;
+  white-space: normal;
+  width: 160px; /* 适当增加宽度以容纳更多文本 */
+  text-align: center;
+}
+</style> 
diff --git a/src/components/map/controls/VehicleMovementControlRefactored.vue b/src/components/map/controls/VehicleMovementControlRefactored.vue
new file mode 100644
index 0000000..4366f40
--- /dev/null
+++ b/src/components/map/controls/VehicleMovementControlRefactored.vue
@@ -0,0 +1,1097 @@
+<template>
+  <!-- 气象监测站弹窗 -->
+  <WeatherStationPopup 
+    :visible="weatherStationVisible" 
+    @close="weatherStationVisible = false" 
+  />
+  
+  <!-- 车辆详情弹窗 -->
+  <VehicleDetailPopup 
+    :visible="vehicleDetailVisible" 
+    :detail="vehicleDetail"
+    :popup-style="detailPopupStyle"
+    @close="vehicleDetailVisible = false" 
+  />
+
+  <!-- 告警/预警提示框 -->
+  <!-- <AlertNotificationSystem 
+    :alert-message="alertMessage"
+    :alert-type="alertType"
+    @show="handleAlertShow"
+  />
+   -->
+  <!-- 车辆动画系统 -->
+  <VehicleAnimationSystem 
+    ref="animationSystem"
+    :map="map"
+    :vehicle-source="vehicleSource"
+    :vehicles="vehicles"
+    :get-vehicle-style="styleManager?.value?.getVehicleStyle || defaultGetVehicleStyle"
+  />
+  
+  <!-- 车辆标签系统 -->
+  <VehicleLabelSystem 
+    ref="labelSystem"
+    :map="map"
+    :vehicles="vehicles"
+  />
+  
+  <!-- 车辆样式管理器 -->
+  <VehicleStyleManager 
+    ref="styleManager"
+    :vehicles="vehicles"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, onActivated, onDeactivated } from 'vue';
+import { Vector as VectorSource } from 'ol/source';
+import { Vector as VectorLayer } from 'ol/layer';
+import { Style, Icon } from 'ol/style';
+import Feature from 'ol/Feature';
+import Point from 'ol/geom/Point';
+import { transform } from 'ol/proj';
+import WebSocketService, { createWebSocket, resetWebSocketInstance } from '../../../utils/websocket.js';
+
+// 导入子组件
+import VehicleAnimationSystem from './VehicleAnimationSystem.vue';
+import VehicleLabelSystem from './VehicleLabelSystem.vue';
+import VehicleDetailPopup from './VehicleDetailPopup.vue';
+import WeatherStationPopup from './WeatherStationPopup.vue';
+// import AlertNotificationSystem from './AlertNotificationSystem.vue';
+import VehicleStyleManager from './VehicleStyleManager.vue';
+
+// 导入默认图标
+import carIcon from '../../../assets/images/noPeopleCar.png';
+import aircraftInIcon from '../../../assets/images/Aircraft1.png'; // 滑入航空器使用黄色图标
+import aircraftOutIcon from '../../../assets/images/Aircraft.png'; // 滑出航空器使用蓝色图标
+
+// 为SockJS提供polyfill
+if (typeof window !== 'undefined' && !window.global) {
+  window.global = window;
+}
+
+// 定义props接收地图实例
+const props = defineProps({
+  map: Object
+});
+
+// 子组件引用
+const animationSystem = ref(null);
+const labelSystem = ref(null);
+const styleManager = ref(null);
+
+// 气象监测站数据
+const weatherStationVisible = ref(true);
+
+// 车辆详情数据
+const vehicleDetailVisible = ref(false);
+const vehicleDetail = ref({
+  id: 'QN001',
+  type: '驱鸟车',
+  status: '任务中',
+  startTime: '11-19 11:30',
+  currentLocation: 'A区T3点',
+  startLocation: 'T1航站楼',
+  endLocation: 'T3航站楼',
+  totalDistance: '1.3km',
+  battery: '60%',
+  manager: '张三',
+  phone: '18661910988'
+});
+
+// 弹窗位置样式
+const detailPopupStyle = ref({
+  left: '0px',
+  top: '0px'
+});
+
+// WebSocket连接状态
+const wsConnected = ref(false);
+let wsService = null;
+let reconnectTimer = null;
+
+// 车辆数据存储
+const vehicles = ref({});
+let vehicleLayer = null;
+let vehicleSource = null;
+
+// 车辆超速状态超时计时器存储
+const speedViolationTimers = {};
+
+// 动态收集所有车辆/航空器类别
+const vehicleCategories = ref({
+  'AIRCRAFT_IN': { visible: true, showLabel: true, name: '滑入航空器' },
+  'AIRCRAFT_OUT': { visible: true, showLabel: true, name: '滑出航空器' },
+  'AIRCRAFT': { visible: true, showLabel: true, name: '其他航空器' },
+  'UNMANNED_VEHICLE': { visible: true, showLabel: true, name: '无人车' },
+  'AIRPORT_VEHICLE': { visible: true, showLabel: true, name: '特勤车' },
+  'SHUTTLE_VEHICLE': { visible: true, showLabel: true, name: '摆渡车' }
+});
+
+// 告警/预警状态
+const alertMessage = ref('');
+const alertType = ref('');
+let alertTimer = null;
+
+// 违规状态计时器
+const violationStatusTimers = ref({});
+
+// 处理告警显示
+function handleAlertShow({ message, type, duration = 5000 }) {
+  if (alertTimer) {
+    clearTimeout(alertTimer);
+  }
+  
+  alertMessage.value = message;
+  alertType.value = type;
+  
+  alertTimer = setTimeout(() => {
+    alertMessage.value = '';
+    alertType.value = '';
+  }, duration);
+}
+
+// 显示告警/预警消息
+function showAlert(message, type, duration = 5000) {
+  handleAlertShow({ message, type, duration });
+}
+
+// 创建车辆图层
+function createVehicleLayer() {
+  if (!props.map) return;
+  
+  vehicleSource = new VectorSource();
+  
+  vehicleLayer = new VectorLayer({
+    source: vehicleSource,
+    zIndex: 20,
+  });
+  
+  props.map.addLayer(vehicleLayer);
+  
+  setupMapListeners();
+  
+  props.map.on('click', handleMapClick);
+}
+
+// 处理地图点击事件
+function handleMapClick(event) {
+  const feature = props.map.forEachFeatureAtPixel(event.pixel, function(feature) {
+    return feature;
+  });
+  
+  if (feature) {
+    const objectId = feature.getId();
+    if (objectId && vehicles.value[objectId]) {
+      const vehicle = vehicles.value[objectId];
+      
+      vehicleDetail.value = {
+        id: objectId,
+        type: vehicle.type,
+        status: '任务中',
+        startTime: '11-19 11:30',
+        currentLocation: '当前位置',
+        startLocation: 'T1航站楼',
+        endLocation: 'T3航站楼',
+        totalDistance: '1.3km',
+        battery: '60%',
+        manager: '张三',
+        phone: '18661910988'
+      };
+      
+      const pixel = event.pixel;
+      const viewportPosition = props.map.getViewport().getBoundingClientRect();
+      
+      detailPopupStyle.value = {
+        left: (viewportPosition.left + pixel[0] + 10) + 'px',
+        top: (viewportPosition.top + pixel[1] + 10) + 'px'
+      };
+      
+      vehicleDetailVisible.value = true;
+    } else {
+      vehicleDetailVisible.value = false;
+    }
+  } else {
+    vehicleDetailVisible.value = false;
+  }
+}
+
+// 监听地图变化，确保标签位置正确更新
+function setupMapListeners() {
+  if (!props.map) return;
+  
+  // 监听地图移动结束事件
+  props.map.on('moveend', () => {
+    if (labelSystem.value) {
+      labelSystem.value.updateAllLabels();
+    }
+  });
+}
+
+// 更新车辆位置
+function updateVehiclePosition(vehicleData) {
+  if (!vehicleSource || !props.map) return;
+  
+  const { object_id, object_type, position, heading, speed } = vehicleData;
+  
+  let coordinates;
+
+  coordinates = transform(
+    [position.longitude, position.latitude], 
+    'EPSG:4326', 
+    props.map.getView().getProjection()
+  );
+ 
+  let feature = vehicleSource.getFeatureById(object_id);
+  
+  // 根据object_type正确分类车辆
+  let vehicleType = object_type.toUpperCase();
+  
+  // 判断航空器类型
+  // CA开头的航班是滑入航空器，使用黄色Aircraft1.png图标和airport_out.png文本背景
+  // MU开头的航班是滑出航空器，使用蓝色Aircraft.png图标和airport_bg.png文本背景
+  const isAircraftOut = vehicleType === 'AIRCRAFT' && object_id.toLowerCase().includes('ca');
+  const isAircraftIn = vehicleType === 'AIRCRAFT' && object_id.toLowerCase().includes('mu');
+  const isAircraft = vehicleType === 'AIRCRAFT';
+  
+  // 判断地面车辆类型
+  const isUnmannedVehicle = vehicleType === 'UNMANNED_VEHICLE'; // 无人车，使用noPeopleCar.png图标和label_bg.png文本背景
+  const isSpecialVehicle = vehicleType === 'AIRPORT_VEHICLE'; // 特勤车
+  const isShuttleVehicle = vehicleType === 'SHUTTLE_VEHICLE'; // 摆渡车
+  
+  if (!feature) {
+    feature = new Feature({
+      geometry: new Point(coordinates),
+      name: `${object_type} ${object_id}`,
+      type: object_type,
+      speed: speed,
+      isAircraftIn: isAircraftIn,
+      isAircraftOut: isAircraftOut,
+      isAircraft: isAircraft,
+      isUnmannedVehicle: isUnmannedVehicle,
+      isSpecialVehicle: isSpecialVehicle,
+      isShuttleVehicle: isShuttleVehicle
+    });
+    
+    feature.setId(object_id);
+    // 使用默认样式，确保styleManager.value存在时才使用它的方法
+    if (styleManager.value) {
+      feature.setStyle(styleManager.value.getVehicleStyle(object_id, speed, heading));
+    } else {
+      // 提供一个默认样式，根据车辆类型选择图标
+      feature.setStyle(defaultGetVehicleStyle(object_id, speed, heading));
+    }
+    vehicleSource.addFeature(feature);
+    
+    vehicles.value[object_id] = {
+      id: object_id,
+      type: object_type,
+      position: coordinates,
+      heading: heading,
+      speed: speed,
+      feature: feature,
+      isAircraftIn: isAircraftIn,
+      isAircraftOut: isAircraftOut,
+      isAircraft: isAircraft,
+      isUnmannedVehicle: isUnmannedVehicle,
+      isSpecialVehicle: isSpecialVehicle,
+      isShuttleVehicle: isShuttleVehicle
+    };
+    
+    // 初始化动画数据
+    if (animationSystem.value) {
+      animationSystem.value.initVehicleAnimation(object_id, coordinates, heading, speed);
+    }
+    
+    // 创建标签
+    if (labelSystem.value) {
+      labelSystem.value.updateVehicleLabel(object_id, coordinates, speed);
+    }
+  } else {
+    // 更新动画目标
+    if (animationSystem.value) {
+      animationSystem.value.updateVehicleAnimationTarget(object_id, coordinates, heading, speed);
+    }
+    
+    vehicles.value[object_id] = {
+      ...vehicles.value[object_id],
+      position: coordinates,
+      heading: heading,
+      speed: speed
+    };
+    
+    // 更新标签位置，确保标签始终跟随图标
+    // 但是如果车辆处于超速状态，不在这里更新标签，避免与超速状态标签冲突
+    if (labelSystem.value && !vehicles.value[object_id].speedViolation) {
+      labelSystem.value.updateVehicleLabel(object_id, coordinates, speed);
+    }
+  }
+}
+
+// 连接WebSocket
+function connectWebSocket() {
+  // 重置WebSocket实例以强制创建新实例
+  resetWebSocketInstance();
+  
+  try {
+    // 使用WebSocketService创建连接
+    const wsUrl = import.meta.env.VITE_APP_WEBSOCKET_URL;
+    console.log(`正在连接WebSocket: ${wsUrl}`);
+    
+    wsService = createWebSocket(wsUrl, {
+      reconnectInterval: 3000,
+      maxReconnectAttempts: 5
+    });
+    
+    // 注册事件监听
+    wsService.on('open', (event) => {
+      console.log('WebSocket连接成功!');
+      wsConnected.value = true;
+      
+      // 连接成功后自动订阅消息
+      setTimeout(() => {
+        sendSubscribe();
+      }, 1000); // 延迟1秒发送订阅，确保连接稳定
+    });
+    
+    wsService.on('message', (data) => {
+      handleWsMessage(data);
+    });
+    
+    wsService.on('error', (event) => {
+      console.error('WebSocket错误:', event);
+      wsConnected.value = false;
+    });
+    
+    wsService.on('close', (event) => {
+      console.log(`WebSocket连接关闭: ${event.code} - ${event.reason}`);
+      wsConnected.value = false;
+    });
+    
+    wsService.on('reconnect_failed', () => {
+      console.error('WebSocket重连失败，已达到最大重试次数');
+      wsConnected.value = false;
+    });
+    
+  } catch (error) {
+    console.error('创建WebSocket连接失败:', error);
+  }
+}
+
+// 处理WebSocket消息
+function handleWsMessage(message) {
+  try {
+    const data = JSON.parse(message);
+    
+    // 根据消息类型处理
+    switch (data.type) {
+      case 'connection':
+        console.log(`连接确认: ${data.message}`);
+        break;
+      case 'position_update':
+        // 确保payload存在
+        if (data.payload && data.payload.object_id) {
+          // 检查是否需要清除车辆的告警状态
+          clearVehicleAlertStatus(data.payload);
+          
+          // 更新车辆位置
+          updateVehiclePosition(data.payload);
+        } else {
+          console.error('位置更新消息格式错误:', data);
+        }
+        break;
+      case 'pong':
+        console.log('收到心跳响应');
+        break;
+      case 'collision_warning':
+        console.log('收到碰撞预警:', data.payload);
+        // 显示预警信息
+        if (data.payload) {
+          // 获取车辆ID和预警信息
+          const vehicleId = data.payload.object_id || '未知车辆';
+          const distance = data.payload.distance || 0;
+          const message = `预警：${vehicleId} 与其他车辆距离${distance.toFixed(1)}米，请注意避让！`;
+          showAlert(message, 'warning', 8000);
+          
+          // 如果需要在地图上标记该车辆的告警状态
+          if (vehicles.value[vehicleId]) {
+            vehicles.value[vehicleId].warning = true;
+            // 如果车辆已有位置信息，更新标签显示
+            if (vehicles.value[vehicleId].position) {
+              labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed);
+            }
+          }
+        }
+        break;
+      case 'rule_violation':
+        console.log('收到规则违规:', data.payload);
+        if (data.payload) {
+          // 获取车辆ID和告警信息
+          const vehicleId = data.payload.object_id || data.payload.vehicleId || data.payload.vehicleLicense || '未知车辆';
+          const violationType = data.payload.violationType || '未知违规';
+          const alertLevel = data.payload.alertLevel || 'INFO';
+          const description = data.payload.description || '';
+          const limitValue = data.payload.limitValue;
+          const actualValue = data.payload.actualValue;
+          const ruleName = data.payload.ruleName || '交通规则';
+          
+          // 检查是否为超速违规
+          const isSpeedViolation = violationType === 'SPEED_VIOLATION';
+          // 检查是否为超速结束
+          const isSpeedViolationEnd = violationType === 'SPEED_VIOLATION_END';
+          
+          // 如果是超速违规，特殊处理
+          if (isSpeedViolation && alertLevel === 'WARNING') {
+            console.log(`检测到超速违规: ${vehicleId}, 实际速度: ${actualValue}, 限速: ${limitValue}`);
+
+            // 在地图上标记该车辆的超速状态
+            if (vehicles.value[vehicleId]) {
+              // 避免重复设置超速状态导致闪烁
+              const alreadyInSpeedViolation = vehicles.value[vehicleId].speedViolation;
+
+              // 强制设置超速状态，确保图标正确显示
+              vehicles.value[vehicleId].info = false;
+              vehicles.value[vehicleId].alarm = false;
+              vehicles.value[vehicleId].warning = false; // 清除warning状态，使用speedViolation状态
+              vehicles.value[vehicleId].critical = false;
+              vehicles.value[vehicleId].speedViolation = true; // 标记为超速状态
+              vehicles.value[vehicleId].limitValue = limitValue;
+              vehicles.value[vehicleId].actualValue = actualValue;
+              vehicles.value[vehicleId].description = description;
+              vehicles.value[vehicleId].ruleName = ruleName;
+              vehicles.value[vehicleId].lastSpeedViolationTime = Date.now(); // 记录最后一次超速时间
+
+              // 设置状态锁定，确保一段时间内不会改变状态
+              if (!vehicles.value[vehicleId].statusLock) {
+                vehicles.value[vehicleId].statusLock = {
+                  active: false,
+                  type: null,
+                  until: 0
+                };
+              }
+
+              // 锁定超速状态20秒，确保图标不会来回切换
+              vehicles.value[vehicleId].statusLock = {
+                active: true,
+                type: 'speedViolation',
+                until: Date.now() + 20000 // 20秒锁定
+              };
+
+              // 清除任何可能存在的缓存图标，确保使用警告图标
+              vehicles.value[vehicleId].cachedIconSrc = null;
+
+              // 更新车辆图标为超速警告图标（只在首次设置或状态改变时更新）
+              if (!alreadyInSpeedViolation) {
+                if (vehicles.value[vehicleId].feature) {
+                  vehicles.value[vehicleId].feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicles.value[vehicleId].speed, vehicles.value[vehicleId].heading));
+                  vehicles.value[vehicleId].lastIconUpdateTime = Date.now();
+                }
+              }
+
+              // 更新标签显示为超速状态（只显示超速相关信息）
+              if (vehicles.value[vehicleId].position && labelSystem.value) {
+                // 先移除可能存在的旧标签，避免重复显示
+                labelSystem.value.removeVehicleLabel(vehicleId);
+
+                // 然后创建新的超速状态标签
+                labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, actualValue || vehicles.value[vehicleId].speed, {
+                  description: description || `超速违规`,
+                  limitValue: limitValue,
+                  actualValue: actualValue,
+                  ruleName: ruleName,
+                  isSpeedViolation: true // 标记为超速状态，避免显示默认信息
+                });
+              }
+
+              // 设置或重置超速状态自动清除计时器
+              if (speedViolationTimers[vehicleId]) {
+                clearTimeout(speedViolationTimers[vehicleId]);
+              }
+
+              // 设置新的超时计时器，如果在一定时间内（如20秒）没有再次接收到超速消息，则自动清除超速状态
+              speedViolationTimers[vehicleId] = setTimeout(() => {
+                // 确保车辆仍然存在
+                if (vehicles.value[vehicleId]) {
+                  console.log(`超速状态超时: ${vehicleId}, 自动清除超速状态`);
+
+                  // 检查是否可以清除状态锁定
+                  if (!vehicles.value[vehicleId].statusLock ||
+                      !vehicles.value[vehicleId].statusLock.active ||
+                      Date.now() > vehicles.value[vehicleId].statusLock.until) {
+
+                    // 清除超速状态
+                    clearSpeedViolationStatus(vehicleId);
+
+                    // 清除计时器引用
+                    delete speedViolationTimers[vehicleId];
+                  } else {
+                    // 状态仍然锁定，延迟清除
+                    console.log(`车辆${vehicleId}状态仍然锁定，延迟清除超速状态`);
+
+                    // 重新设置计时器，等待锁定结束
+                    speedViolationTimers[vehicleId] = setTimeout(() => {
+                      clearSpeedViolationStatus(vehicleId);
+                      delete speedViolationTimers[vehicleId];
+                    }, vehicles.value[vehicleId].statusLock.until - Date.now());
+                  }
+                }
+              }, 20000); // 20秒超时，确保状态稳定
+            }
+            return; // 已处理超速情况，不再进入下面的alertLevel处理
+          }
+
+          // 如果是超速结束，清除超速状态
+          if (isSpeedViolationEnd) {
+            console.log(`检测到超速结束: ${vehicleId}`);
+            
+            // 在地图上清除该车辆的超速状态
+            if (vehicles.value[vehicleId]) {
+              // 检查是否可以清除状态锁定
+              if (!vehicles.value[vehicleId].statusLock || 
+                  !vehicles.value[vehicleId].statusLock.active || 
+                  Date.now() > vehicles.value[vehicleId].statusLock.until) {
+                
+                // 清除超速状态，使用专门的函数
+                clearSpeedViolationStatus(vehicleId);
+              } else {
+                // 状态仍然锁定，延迟清除
+                console.log(`车辆${vehicleId}状态仍然锁定，延迟清除超速状态`);
+                
+                // 设置计时器，等待锁定结束
+                if (speedViolationTimers[vehicleId]) {
+                  clearTimeout(speedViolationTimers[vehicleId]);
+                }
+                
+                speedViolationTimers[vehicleId] = setTimeout(() => {
+                  clearSpeedViolationStatus(vehicleId);
+                  delete speedViolationTimers[vehicleId];
+                }, vehicles.value[vehicleId].statusLock.until - Date.now());
+              }
+            }
+            return; // 已处理超速结束情况，不再进入下面的alertLevel处理
+          }
+          
+          // 根据alertLevel处理其他类型的告警
+          switch (alertLevel.toUpperCase()) {
+            case 'Info': // 预警
+              // 显示大的预警提示框
+              showAlert(`预警：${vehicleId} ${description}`, 'warning', 10000);
+              
+              // 在地图上标记该车辆的预警状态
+              if (vehicles.value[vehicleId]) {
+                vehicles.value[vehicleId].warning = true;
+                vehicles.value[vehicleId].alarm = false;
+                vehicles.value[vehicleId].critical = false;
+                vehicles.value[vehicleId].info = false;
+                
+                // 更新车辆图标为警告图标
+                if (vehicles.value[vehicleId].feature) {
+                  vehicles.value[vehicleId].feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicles.value[vehicleId].speed, vehicles.value[vehicleId].heading));
+                }
+                
+                // 更新标签显示
+                if (vehicles.value[vehicleId].position) {
+                  labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
+                    description: description,
+                    limitValue: limitValue,
+                    actualValue: actualValue
+                  });
+                }
+              }
+              break;
+              
+            case 'ALERT': // 告警
+              // 显示大的告警提示框
+              showAlert(`⚠️ 告警：${vehicleId} ${description}`, 'alarm', 10000);
+              
+              // 在地图上标记该车辆的告警状态
+              if (vehicles.value[vehicleId]) {
+                vehicles.value[vehicleId].alarm = true;
+                vehicles.value[vehicleId].warning = false;
+                vehicles.value[vehicleId].critical = false;
+                vehicles.value[vehicleId].info = false;
+                
+                // 更新车辆图标为告警图标
+                if (vehicles.value[vehicleId].feature) {
+                  vehicles.value[vehicleId].feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicles.value[vehicleId].speed, vehicles.value[vehicleId].heading));
+                }
+                
+                // 更新标签显示
+                if (vehicles.value[vehicleId].position) {
+                  labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
+                    description: description,
+                    limitValue: limitValue,
+                    actualValue: actualValue
+                  });
+                }
+              }
+              break;
+              
+            case 'CRITICAL': // 越界
+              // 不显示大的提示框，仅改变车辆图标颜色和标签背景
+              if (vehicles.value[vehicleId]) {
+                vehicles.value[vehicleId].critical = true;
+                vehicles.value[vehicleId].alarm = false;
+                vehicles.value[vehicleId].warning = false;
+                vehicles.value[vehicleId].info = false;
+                
+                // 更新车辆图标为警告图标
+                if (vehicles.value[vehicleId].feature) {
+                  vehicles.value[vehicleId].feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicles.value[vehicleId].speed, vehicles.value[vehicleId].heading));
+                }
+                
+                // 更新标签显示
+                if (vehicles.value[vehicleId].position) {
+                  labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
+                    description: description,
+                    limitValue: limitValue,
+                    actualValue: actualValue
+                  });
+                }
+              }
+              break;
+              
+            case 'WARNING': // 超速 - 这个case已经在上面的SPEED_VIOLATION中处理了，这里不再重复处理
+              console.log(`收到WARNING级别的超速消息，但已在SPEED_VIOLATION中处理: ${vehicleId}`);
+              break;
+              
+            default:
+              console.log(`未处理的告警级别: ${alertLevel}`);
+          }
+        }
+        break;
+      case 'vehicle_command':
+        console.log('收到车辆控制指令:', data.payload);
+        break;
+      default:
+        // 其他类型的消息可以根据需要处理
+        console.log(`收到其他类型消息: ${data.type}`, data);
+        break;
+    }
+  } catch (e) {
+    console.error('处理WebSocket消息出错:', e, message);
+  }
+}
+
+// 清除车辆超速状态的专门函数
+function clearSpeedViolationStatus(vehicleId) {
+  const vehicle = vehicles.value[vehicleId];
+  if (!vehicle) return;
+
+  console.log(`开始清除车辆${vehicleId}的超速状态`);
+
+  // 检查是否可以清除状态锁定
+  if (vehicle.statusLock && vehicle.statusLock.active && Date.now() < vehicle.statusLock.until) {
+    console.log(`车辆${vehicleId}状态锁定中，暂不清除超速状态`);
+    return;
+  }
+
+  // 清除所有告警状态
+  vehicle.info = false;
+  vehicle.alarm = false;
+  vehicle.warning = false;
+  vehicle.critical = false;
+  vehicle.speedViolation = false;
+  vehicle.limitValue = undefined;
+  vehicle.actualValue = undefined;
+  vehicle.description = undefined;
+  vehicle.ruleName = undefined;
+
+  // 清除状态锁定
+  if (vehicle.statusLock) {
+    vehicle.statusLock.active = false;
+    vehicle.statusLock.type = null;
+    vehicle.statusLock.until = 0;
+  }
+
+  // 清除缓存的图标，确保使用默认图标
+  vehicle.cachedIconSrc = null;
+  vehicle.lastIconUpdateTime = Date.now();
+
+  // 更新车辆图标为默认图标
+  if (vehicle.feature && styleManager.value) {
+    vehicle.feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicle.speed, vehicle.heading));
+  }
+
+  // 更新标签显示为正常状态（只显示车辆ID，不显示0.00km/h）
+  if (vehicle.position && labelSystem.value) {
+    labelSystem.value.updateVehicleLabel(vehicleId, vehicle.position, vehicle.speed > 0.1 ? vehicle.speed : 0);
+  }
+
+  console.log(`已成功清除车辆${vehicleId}的超速状态`);
+}
+
+// 清除车辆告警状态（如果需要）
+function clearVehicleAlertStatus(vehicleData) {
+  const { object_id, speed } = vehicleData;
+  
+  // 检查该车辆是否已存在且有告警状态
+  const existingVehicle = vehicles.value[object_id];
+  if (!existingVehicle) return;
+  
+  // 检查是否有状态锁定
+  if (existingVehicle.statusLock && 
+      existingVehicle.statusLock.active && 
+      Date.now() < existingVehicle.statusLock.until) {
+    // 状态锁定中，不清除状态
+    return;
+  }
+  
+  // 检查是否有超速状态 - 更严格的清除条件，避免图标来回切换
+  if (existingVehicle.speedViolation && existingVehicle.limitValue) {
+    // 如果当前速度低于限速值，清除超速状态
+    if (speed < existingVehicle.limitValue) {
+      // 添加更大的缓冲区，避免在临界值附近频繁切换状态
+      // 只有当速度低于限速值的70%时才清除超速状态，确保状态稳定
+      const speedBuffer = existingVehicle.limitValue * 0.7;
+
+      if (speed < speedBuffer) {
+        console.log(`检测到车辆${object_id}速度降低到${speed.toFixed(1)}km/h，低于限速${existingVehicle.limitValue}km/h的70%，考虑清除超速状态`);
+
+        // 检查是否应该清除超速状态
+        // 如果最后一次超速时间在15秒内，不清除状态以避免闪烁
+        const now = Date.now();
+        if (!existingVehicle.lastSpeedViolationTime || now - existingVehicle.lastSpeedViolationTime > 15000) {
+          // 检查状态锁定
+          if (!existingVehicle.statusLock ||
+              !existingVehicle.statusLock.active ||
+              now > existingVehicle.statusLock.until) {
+            // 清除超速状态
+            clearSpeedViolationStatus(object_id);
+            console.log(`已清除${object_id}的超速状态，恢复为普通状态`);
+          } else {
+            console.log(`车辆${object_id}状态锁定中，暂不清除超速状态`);
+          }
+        } else {
+          console.log(`车辆${object_id}刚刚处于超速状态，暂不清除状态以避免闪烁`);
+        }
+      }
+    }
+  }
+  
+  // 检查是否有任何其他告警状态
+  const hasAlertStatus = existingVehicle.info || existingVehicle.warning || 
+                       existingVehicle.alarm || existingVehicle.critical;
+  
+  // 如果有告警状态，需要检查是否应该清除
+  if (hasAlertStatus) {
+    // 只处理超速状态(info)的自动恢复
+    // 1. 判断是否为超速状态
+    const isSpeedViolation = existingVehicle.info;
+    
+    // 2. 判断当前速度是否已降低到安全值
+    // 这里使用一个默认阈值判断，实际应用中最好使用服务端返回的限速值
+    // 假设超速阈值为50km/h
+    const SPEED_THRESHOLD = 5; // 超速阈值，单位km/h
+    const isBelowThreshold = speed < SPEED_THRESHOLD;
+    
+    // 3. 如果是超速状态且当前速度已降低到阈值以下，清除超速状态
+    if (isSpeedViolation && isBelowThreshold) {
+      console.log(`检测到车辆${object_id}速度降低到${speed.toFixed(1)}km/h，低于阈值${SPEED_THRESHOLD}km/h，自动清除超速状态`);
+      
+      // 清除超速状态
+      existingVehicle.info = false;
+      
+      // 更新车辆图标为默认图标
+      if (existingVehicle.feature) {
+        existingVehicle.feature.setStyle(styleManager.value.getVehicleStyle(object_id, speed, existingVehicle.heading));
+      }
+      
+      // 更新标签显示为正常状态
+      if (existingVehicle.position) {
+        labelSystem.value.updateVehicleLabel(object_id, existingVehicle.position, speed);
+      }
+      
+      console.log(`已清除${object_id}的超速状态，恢复为普通状态`);
+    } else {
+      console.log(`车辆${object_id}有告警状态，但不符合自动清除条件，保持该状态`);
+    }
+  }
+}
+
+// 发送心跳
+function sendPing() {
+  if (wsService) {
+    wsService.send('ping');
+    console.log('发送心跳: ping');
+  }
+}
+
+// 订阅消息
+function sendSubscribe() {
+  if (wsService) {
+    const message = JSON.stringify({
+      type: 'subscribe',
+      topics: ['position_update', 'collision_warning', 'rule_violation'],
+      timestamp: Date.now()
+    });
+    wsService.send(message);
+    console.log('发送订阅请求');
+  }
+}
+
+// 清理资源
+function cleanup() {
+  // 断开WebSocket连接
+  if (wsService) {
+    wsService.close();
+    wsService = null;
+  }
+  
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+  
+  // 清理所有超速状态计时器
+  Object.keys(speedViolationTimers).forEach(vehicleId => {
+    clearTimeout(speedViolationTimers[vehicleId]);
+    delete speedViolationTimers[vehicleId];
+  });
+  
+  // 移除图层
+  if (vehicleLayer && props.map) {
+    props.map.removeLayer(vehicleLayer);
+    vehicleLayer = null;
+  }
+  
+  // 移除标签
+  if (props.map && labelSystem.value) {
+    Object.values(vehicles.value).forEach(vehicle => {
+      if (vehicle.overlay) {
+        console.log(`移除标签: ${vehicle.id}`);
+        labelSystem.value.removeVehicleLabel(vehicle.id);
+      }
+    });
+  }
+  
+  // 清空车辆数据
+  vehicles.value = {};
+}
+
+// 组件挂载时初始化
+onMounted(() => {
+  // 创建图层并连接WebSocket
+  if (props.map) {
+    createVehicleLayer();
+  }
+  
+  // 连接WebSocket
+  connectWebSocket();
+  
+  // 设置定时发送心跳
+  const pingInterval = setInterval(() => {
+    if (wsService && wsConnected.value) {
+      sendPing();
+    }
+  }, 30000); // 每30秒发送一次心跳
+  
+  // 组件卸载时清理资源
+  onUnmounted(() => {
+    clearInterval(pingInterval);
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+    cleanup();
+  });
+});
+
+// 组件被激活时（切换回该路由时）
+onActivated(() => {
+  console.log('VehicleMovementControl组件被激活');
+  // 如果WebSocket未连接，重新连接
+  if (!wsConnected.value && !wsService) {
+    console.log('组件激活，WebSocket未连接，正在重新连接...');
+    // 延迟一点时间再连接，确保DOM已完全渲染
+    reconnectTimer = setTimeout(() => {
+      connectWebSocket();
+    }, 500);
+  } else {
+    console.log('组件激活，WebSocket已连接');
+  }
+});
+
+// 组件被停用时（切换到其他路由时）
+onDeactivated(() => {
+  console.log('VehicleMovementControl组件被停用');
+  // 可以选择在这里关闭WebSocket，也可以保持连接
+  // 如果希望在组件隐藏时断开连接，可以取消下面的注释
+  /*
+  if (wsService) {
+    console.log('组件停用，关闭WebSocket连接');
+    wsService.close();
+    wsService = null;
+    wsConnected.value = false;
+  }
+  */
+});
+
+// 监听地图实例变化
+watch(() => props.map, (newMap) => {
+  if (newMap) {
+    createVehicleLayer();
+  }
+});
+
+// 向外暴露方法
+defineExpose({
+  updateVehiclePosition,
+  wsConnected,
+  sendPing,
+  sendSubscribe,
+  vehicleCategories,
+  weatherStationVisible,
+  vehicleDetailVisible,
+  vehicleDetail,
+  toggleWeatherStationVisibility() {
+    weatherStationVisible.value = !weatherStationVisible.value;
+  },
+  toggleVehicleDetailVisibility() {
+    vehicleDetailVisible.value = !vehicleDetailVisible.value;
+  },
+  updateVehicleDetail(data) {
+    if (data) {
+      vehicleDetail.value = {...vehicleDetail.value, ...data};
+      vehicleDetailVisible.value = true;
+    }
+  },
+  showVehicleDetail(vehicleId, pixelPosition) {
+    if (vehicles.value[vehicleId]) {
+      // 更新车辆详情
+      vehicleDetail.value = {
+        id: vehicleId,
+        type: vehicles.value[vehicleId].type,
+        status: '任务中',
+        startTime: '11-19 11:30',
+        currentLocation: '当前位置',
+        startLocation: 'T1航站楼',
+        endLocation: 'T3航站楼',
+        totalDistance: '1.3km',
+        battery: '60%',
+        manager: '张三',
+        phone: '18661910988'
+      };
+      
+      // 设置弹窗位置
+      if (pixelPosition) {
+        const viewportPosition = props.map.getViewport().getBoundingClientRect();
+        detailPopupStyle.value = {
+          left: (viewportPosition.left + pixelPosition[0] + 10) + 'px',
+          top: (viewportPosition.top + pixelPosition[1] + 10) + 'px'
+        };
+      }
+      
+      // 显示详情弹窗
+      vehicleDetailVisible.value = true;
+    }
+  },
+  setCategoryVisibility(type, { visible, showLabel }) {
+    if (vehicleCategories.value[type]) {
+      // 更新分类设置
+      vehicleCategories.value[type].visible = visible;
+      vehicleCategories.value[type].showLabel = showLabel;
+      
+      // 立即应用更改 - 更新所有属于此类别的车辆
+      Object.values(vehicles.value).forEach(vehicle => {
+        let vehicleTypeKey = vehicle.type;
+        
+        // 根据车辆特征确定类别
+        if (vehicle.isAircraftIn) vehicleTypeKey = 'AIRCRAFT_IN';
+        else if (vehicle.isAircraftOut) vehicleTypeKey = 'AIRCRAFT_OUT';
+        else if (vehicle.isUnmannedVehicle) vehicleTypeKey = 'UNMANNED_VEHICLE';
+        else if (vehicle.isSpecialVehicle) vehicleTypeKey = 'AIRPORT_VEHICLE';
+        else if (vehicle.isShuttleVehicle) vehicleTypeKey = 'SHUTTLE_VEHICLE';
+        
+        // 如果车辆属于当前修改的类别
+        if (vehicleTypeKey === type) {
+          // 更新图标可见性 - 如果不可见，则完全移除图标样式
+          if (vehicle.feature) {
+            if (visible) {
+              // 显示图标 - 确保styleManager.value存在
+              if (styleManager.value) {
+                vehicle.feature.setStyle(styleManager.value.getVehicleStyle(vehicle.id, vehicle.speed, vehicle.heading));
+              } else {
+                // 提供一个默认样式，根据车辆类型选择图标
+                vehicle.feature.setStyle(defaultGetVehicleStyle(vehicle.id, vehicle.speed, vehicle.heading));
+              }
+            } else {
+              // 完全隐藏图标，使用空样式而非null
+              vehicle.feature.setStyle(new Style({}));
+            }
+          }
+          
+          // 单独控制文本标签可见性，与图标显示状态无关
+          if (labelSystem.value) {
+            labelSystem.value.setLabelVisibility(vehicle.id, showLabel);
+          }
+        }
+      });
+    }
+  },
+  reconnectWebSocket() {
+    console.log('手动重连WebSocket');
+    connectWebSocket();
+  },
+  
+  // 添加平滑动画相关方法
+  startVehicleSmoothing() {
+    if (animationSystem.value) {
+      animationSystem.value.startAnimationLoop();
+    }
+  },
+  
+  stopVehicleSmoothing() {
+    if (animationSystem.value) {
+      animationSystem.value.stopAnimationLoop();
+    }
+  },
+  
+  resetVehicleAnimations() {
+    if (animationSystem.value) {
+      animationSystem.value.resetAnimations();
+    }
+  }
+});
+
+// 添加一个默认的getVehicleStyle函数
+function defaultGetVehicleStyle(id, _speed, heading) {
+  // 检查车辆类型
+  const vehicle = vehicles.value[id];
+  if (!vehicle) return createDefaultStyle(carIcon, heading);
+  
+  // 根据车辆类型选择图标
+  if (vehicle.isAircraftIn) {
+    // 滑入航空器(CA开头)使用黄色Aircraft1.png图标
+    return createDefaultStyle(aircraftInIcon, heading);
+  } else if (vehicle.isAircraftOut) {
+    // 滑出航空器(MU开头)使用蓝色Aircraft.png图标
+    return createDefaultStyle(aircraftOutIcon, heading);
+  } else if (vehicle.isUnmannedVehicle) {
+    // 无人车使用noPeopleCar.png图标
+    return createDefaultStyle(carIcon, heading);
+  } else if (vehicle.isSpecialVehicle) {
+    // 特勤车
+    return createDefaultStyle(carIcon, heading);
+  } else if (vehicle.isShuttleVehicle) {
+    // 摆渡车
+    return createDefaultStyle(carIcon, heading);
+  } else {
+    // 默认车辆图标
+    return createDefaultStyle(carIcon, heading);
+  }
+}
+
+// 创建默认样式的辅助函数
+function createDefaultStyle(iconSrc, heading) {
+  return new Style({
+    image: new Icon({
+      src: iconSrc,
+      scale: 1.5,
+      anchor: [0.5, 0.5],
+      rotation: ((heading - 72) * Math.PI) / 180,
+    })
+  });
+}
+</script> 
\ No newline at end of file
diff --git a/src/components/map/controls/VehicleStyleManager.vue b/src/components/map/controls/VehicleStyleManager.vue
new file mode 100644
index 0000000..6c5e66e
--- /dev/null
+++ b/src/components/map/controls/VehicleStyleManager.vue
@@ -0,0 +1,220 @@
+<template>
+  <!-- 样式管理器不需要模板内容 -->
+</template>
+
+<script setup>
+import { Style, Icon } from 'ol/style';
+
+// 导入车辆图标
+import carIcon from '../../../assets/images/noPeopleCar.png';
+import aircraftInIcon from '../../../assets/images/Aircraft1.png'; // 滑入航空器使用黄色图标
+import aircraftOutIcon from '../../../assets/images/Aircraft.png'; // 滑出航空器使用蓝色图标
+import warningCarIcon from '../../../assets/images/warning_car.png';
+import unmannedVehicleIcon from '../../../assets/images/noPeopleCar.png'; // 无人车图标
+import specialVehicleIcon from '../../../assets/images/noPeopleCar.png'; // 特勤车图标
+import shuttleVehicleIcon from '../../../assets/images/noPeopleCar.png'; // 摆渡车图标
+
+// 定义props
+const props = defineProps({
+  vehicles: Object
+});
+
+// 状态锁定时间（毫秒）- 超速状态锁定时间更长，确保图标稳定
+const STATUS_LOCK_TIME = 20000; // 20秒锁定时间，避免图标来回切换
+
+// 获取车辆样式
+function getVehicleStyle(id, speed, heading) {
+  const vehicle = props.vehicles[id];
+  if (!vehicle) return new Style({});
+  
+  // 初始化状态锁定属性（如果不存在）
+  if (vehicle.statusLock === undefined) {
+    vehicle.statusLock = {
+      active: false,
+      type: null,
+      until: 0
+    };
+  }
+  
+  const now = Date.now();
+  const hasViolation = vehicle.violationType;
+  const hasInfoStatus = vehicle.info;
+  const hasWarningStatus = vehicle.warning;
+  const hasAlarmStatus = vehicle.alarm;
+  const hasCriticalStatus = vehicle.critical;
+  const hasSpeedViolation = vehicle.speedViolation;
+  
+  // 检查是否有状态锁定
+  if (vehicle.statusLock.active && now < vehicle.statusLock.until) {
+    // 状态锁定中，直接返回锁定的图标
+    return new Style({
+      image: new Icon({
+        src: vehicle.statusLock.type === 'speedViolation' ? warningCarIcon : vehicle.cachedIconSrc || carIcon,
+        scale: 1.5,
+        anchor: [0.5, 0.5],
+        rotation: ((heading - 72) * Math.PI) / 180,
+      })
+    });
+  } else if (vehicle.statusLock.active) {
+    // 状态锁定已过期，清除锁定
+    vehicle.statusLock.active = false;
+  }
+  
+  // 超速状态特殊处理 - 确保图标稳定，不来回切换
+  if (hasSpeedViolation) {
+    // 如果还没有锁定状态或锁定已过期，重新锁定
+    if (!vehicle.statusLock.active || now > vehicle.statusLock.until) {
+      vehicle.statusLock = {
+        active: true,
+        type: 'speedViolation',
+        until: now + STATUS_LOCK_TIME
+      };
+    }
+
+    // 直接返回警告图标，确保超速状态下图标保持一致
+    return new Style({
+      image: new Icon({
+        src: warningCarIcon,
+        scale: 1.5,
+        anchor: [0.5, 0.5],
+        rotation: ((heading - 72) * Math.PI) / 180,
+      })
+    });
+  }
+  
+  // 非超速状态下的缓存处理
+  if (vehicle.cachedIconSrc && !hasSpeedViolation) {
+    // 如果已有缓存图标且不是超速状态，检查是否需要更新
+    const lastIconTime = vehicle.lastIconUpdateTime || 0;
+    
+    // 如果最后一次更新时间在2秒内，继续使用缓存的图标
+    if (now - lastIconTime < 2000) {
+      return new Style({
+        image: new Icon({
+          src: vehicle.cachedIconSrc,
+          scale: 1.5,
+          anchor: [0.5, 0.5],
+          rotation: ((heading - 72) * Math.PI) / 180,
+        })
+      });
+    }
+  }
+  
+  let iconSrc;
+  
+  // 首先检查告警状态
+  if (hasSpeedViolation) {
+    // 超速车辆使用警告图标
+    iconSrc = warningCarIcon;
+  } else if (hasViolation || hasInfoStatus || hasWarningStatus || hasCriticalStatus || hasAlarmStatus) {
+    // 其他违规车辆使用警告图标
+    iconSrc = warningCarIcon;
+    
+    // 锁定告警状态一段时间（比超速状态短）
+    vehicle.statusLock = {
+      active: true,
+      type: 'alert',
+      until: now + STATUS_LOCK_TIME / 2
+    };
+  } else if (vehicle.isAircraftIn) {
+    // 滑入航空器(MU开头)使用黄色Aircraft1.png图标
+    iconSrc = aircraftInIcon;
+  } else if (vehicle.isAircraftOut) {
+    // 滑出航空器(CA开头)使用蓝色Aircraft.png图标
+    iconSrc = aircraftOutIcon;
+  } else if (vehicle.isUnmannedVehicle) {
+    // 无人车使用noPeopleCar.png图标
+    iconSrc = unmannedVehicleIcon;
+  } else if (vehicle.isSpecialVehicle) {
+    // 特勤车
+    iconSrc = specialVehicleIcon;
+  } else if (vehicle.isShuttleVehicle) {
+    // 摆渡车
+    iconSrc = shuttleVehicleIcon;
+  } else {
+    // 默认车辆图标
+    iconSrc = carIcon;
+  }
+  
+  // 只有在非超速状态下才缓存图标
+  if (!hasSpeedViolation) {
+    vehicle.cachedIconSrc = iconSrc;
+    vehicle.lastIconUpdateTime = now;
+  }
+  
+  // 创建样式
+  return new Style({
+    image: new Icon({
+      src: iconSrc,
+      scale: 1.5,
+      anchor: [0.5, 0.5],
+      rotation: ((heading - 72) * Math.PI) / 180,
+    })
+  });
+}
+
+// 根据车辆类型和状态选择图标
+function getVehicleIcon(vehicle) {
+  if (!vehicle) return carIcon;
+  
+  const hasInfoStatus = vehicle.info;
+  const hasWarningStatus = vehicle.warning;
+  const hasAlarmStatus = vehicle.alarm;
+  const hasCriticalStatus = vehicle.critical;
+  
+  // 首先检查告警状态
+  if (hasInfoStatus || hasWarningStatus || hasCriticalStatus || hasAlarmStatus) {
+    return warningCarIcon;
+  }
+  
+  // 然后根据车辆类型选择图标
+  if (vehicle.isAircraftIn) {
+    // 滑入航空器(CA开头)使用黄色Aircraft1.png图标
+    return aircraftInIcon;
+  } else if (vehicle.isAircraftOut) {
+    // 滑出航空器(MU开头)使用蓝色Aircraft.png图标
+    return aircraftOutIcon;
+  } else if (vehicle.isUnmannedVehicle) {
+    // 无人车使用noPeopleCar.png图标
+    return unmannedVehicleIcon;
+  } else if (vehicle.isSpecialVehicle) {
+    // 特勤车
+    return specialVehicleIcon;
+  } else if (vehicle.isShuttleVehicle) {
+    // 摆渡车
+    return shuttleVehicleIcon;
+  } else {
+    return carIcon;
+  }
+}
+
+// 创建车辆样式
+function createVehicleStyle(vehicle, heading) {
+  const iconSrc = getVehicleIcon(vehicle);
+  
+  return new Style({
+    image: new Icon({
+      src: iconSrc,
+      scale: 1.5,
+      anchor: [0.5, 0.5],
+      rotation: ((heading - 72) * Math.PI) / 180,
+    })
+  });
+}
+
+// 更新车辆样式
+function updateVehicleStyle(id, heading) {
+  const vehicle = props.vehicles[id];
+  if (!vehicle) return null;
+  
+  return createVehicleStyle(vehicle, heading);
+}
+
+// 暴露方法
+defineExpose({
+  getVehicleStyle,
+  getVehicleIcon,
+  createVehicleStyle,
+  updateVehicleStyle
+});
+</script> 
\ No newline at end of file
diff --git a/src/components/map/controls/WeatherStationPopup.vue b/src/components/map/controls/WeatherStationPopup.vue
new file mode 100644
index 0000000..d54488d
--- /dev/null
+++ b/src/components/map/controls/WeatherStationPopup.vue
@@ -0,0 +1,187 @@
+
+<!-- 气象监测站弹窗 -->
+<template>
+  <div class="weather-station-container" v-if="visible">
+    <div class="weather-station-box">
+      <div class="weather-station-header">
+        <span>气象监测站</span>
+        <img class="weather-station-close" src="../../../assets/images/close_icon.png" alt="" @click="close" />
+      </div>
+      <div class="weather-station-content">
+        <div class="weather-station-title">
+          <span>信号灯XH001 | 实时监测</span>
+          <img class="weather-station-status" src="../../../assets/images/weather_icon.png" alt="气象监测站" />
+        </div>
+        <div class="weather-station-info-container">
+          <div class="weather-station-info-row">
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">温度:</span>
+              <span class="weather-info-value">{{ weatherData.temperature }}°C</span>
+            </div>
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">湿度:</span>
+              <span class="weather-info-value">{{ weatherData.humidity }}%</span>
+            </div>
+          </div>
+          <div class="weather-station-info-row">
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">风速:</span>
+              <span class="weather-info-value">{{ weatherData.windSpeed }}m/s</span>
+            </div>
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">能见度:</span>
+              <span class="weather-info-value">{{ weatherData.visibility }}km</span>
+            </div>
+          </div>
+          <div class="weather-station-info-row">
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">风向:</span>
+              <span class="weather-info-value">{{ weatherData.windDirection }}</span>
+            </div>
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">湿滑程度:</span>
+              <span class="weather-info-value">{{ weatherData.wetness }}</span>
+            </div>
+          </div>
+          <div class="weather-station-info-row">
+            <div class="weather-station-info-item">
+              <span class="weather-info-label">气压:</span>
+              <span class="weather-info-value">{{ weatherData.pressure }}hPa</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, onMounted, onUnmounted } from 'vue';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(['close']);
+
+// 气象数据
+const weatherData = ref({
+  temperature: '22.5',
+  humidity: '68',
+  windSpeed: '3.2',
+  visibility: '8.5',
+  pressure: '1013.2',
+  windDirection: '北风',
+  wetness: '干燥',
+  updateTime: Date.now()
+});
+
+// 模拟更新气象数据
+function updateWeatherData() {
+  weatherData.value = {
+    temperature: '22.5',
+    humidity: '68',
+    windSpeed: '3.2',
+    visibility: '8.5',
+    pressure: '1013.2',
+    windDirection: '北风',
+    wetness: '干燥',
+    updateTime: Date.now()
+  };
+}
+
+function close() {
+  emit('close');
+}
+
+// 组件挂载时设置定时更新
+onMounted(() => {
+  const weatherUpdateInterval = setInterval(() => {
+    updateWeatherData();
+  }, 60000); // 每分钟更新一次气象数据
+  
+  onUnmounted(() => {
+    clearInterval(weatherUpdateInterval);
+  });
+});
+</script>
+
+<style scoped>
+/* 气象监测站样式 */
+.weather-station-container {
+  position: fixed;
+  top: 100px;
+  right: 20px;
+  z-index: 2000;
+  width: 300px;
+}
+
+.weather-station-box {
+  background-color: #424851;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.weather-station-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom:1px solid #777777;
+  background-color: #424851;
+  color: #fff;
+  padding: 8px 12px;
+  font-size: 16px;
+}
+
+.weather-station-close {
+  cursor: pointer;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.weather-station-content {
+  padding: 12px;
+  color: #fff;
+}
+
+.weather-station-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.weather-station-status {
+  color: #4CAF50;
+  font-weight: bold;
+}
+
+.weather-station-info-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.weather-station-info-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.weather-station-info-item {
+  flex: 1;
+}
+
+.weather-info-label {
+  color: #EEEEEE;
+  font-size: 14px;
+  margin-right: 4px;
+}
+
+.weather-info-value {
+  color: #EEEEEE;
+  font-size: 14px;
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/map/info/AlarmNotification.vue b/src/components/map/info/AlarmNotification.vue
index d3f1987..88ace6f 100644
--- a/src/components/map/info/AlarmNotification.vue
+++ b/src/components/map/info/AlarmNotification.vue
@@ -25,6 +25,13 @@
           >
             超界告警
           </div>
+          <div 
+            class="tab-item" 
+            :class="{ active: activeTab === 'speed' }" 
+            @click="activeTab = 'speed'"
+          >
+            超速告警
+          </div>
         </div>
         <div class="tab-actions">
         
@@ -41,6 +48,7 @@
         <div class="alarm-icon" :class="item.level">
           <img v-if="item.type === 'car'" src="@/assets/images/clarm_conflict.png" class="alarm-img" alt="车辆冲突" />
           <img v-else-if="item.type === 'report'" src="@/assets/images/clarm_over.png" class="alarm-img" alt="超界告警" />
+          <img v-else-if="item.type === 'speed'" src="@/assets/images/clarm_speed.png" class="alarm-img" alt="超速告警" />
           <i v-else class="alarm-dot"></i>
         </div>
         <div class="alarm-content">
@@ -100,6 +108,24 @@ const alarmList = ref([
     date: '2025-03-19 10:30',
     level: 'medium',
     type: 'report'
+  },
+  {
+    carId: 'QN002',
+    carType: '牵引车',
+    time: 'T10:15—10: 18超速行驶',
+    description: '，速度达到85km/h',
+    date: '2025-03-19 10:18',
+    level: 'high',
+    type: 'speed'
+  },
+  {
+    carId: 'QN003',
+    carType: '摆渡车',
+    time: 'T10:22—10: 25超速行驶',
+    description: '，速度达到78km/h',
+    date: '2025-03-19 10:25',
+    level: 'medium',
+    type: 'speed'
   }
 ]);
 
@@ -126,7 +152,7 @@ defineExpose({
   position: absolute;
   left:70px;
   top: 15%;
-  width: 360px;
+  width: 400px;
   background-color: rgba(41, 44, 56, 0.95);
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
@@ -181,16 +207,17 @@ defineExpose({
 }
 
 .tab-item {
-  padding: 0 16px;
+  padding: 0 12px;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: 13px;
   color: #A0A8B7;
   cursor: pointer;
   position: relative;
   transition: all 0.3s;
+  white-space: nowrap;
 }
 
 .tab-item.active {
diff --git a/src/components/map/info/CarDetail.vue b/src/components/map/info/CarDetail.vue
index eeb3ae9..720a473 100644
--- a/src/components/map/info/CarDetail.vue
+++ b/src/components/map/info/CarDetail.vue
@@ -109,7 +109,7 @@
             >
               <div class="track-timeline">
                 <div class="timeline-dot" :class="{ 'active': idx === 0 }"></div>
-                <div class="timeline-line" v-if="idx !== (car.trackList || defaultTrackList).length - 1"></div>
+                <div class="timeline-line"></div>
               </div>
               <div class="track-content">
                 <div class="track-time">{{ item.time }}</div>
@@ -404,15 +404,14 @@ function getBatteryTempClass(temp) {
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background-color: #8ec6ff;
-  margin-top: 4px;
+  background-color: #fff;
   z-index: 2;
 }
 
 .timeline-dot.active {
   width: 14px;
   height: 14px;
-  background-color: #1a6dff;
+  background-color: #6DB8FF;
   box-shadow: 0 0 8px 2px rgba(26, 109, 255, 0.6);
 }
 
@@ -422,8 +421,8 @@ function getBatteryTempClass(temp) {
   left: 50%;
   transform: translateX(-50%);
   width: 2px;
-  height: calc(100% + 7px);
-  background: linear-gradient(to bottom, #8ec6ff 50%, transparent 50%);
+  height: calc(100% - 10px);
+  background: linear-gradient(to bottom, #536C8F 50%, transparent 50%);
   background-size: 2px 8px;
   z-index: 1;
 }
diff --git a/src/components/map/info/eventlist.vue b/src/components/map/info/eventlist.vue
index eea4c04..ddb3db4 100644
--- a/src/components/map/info/eventlist.vue
+++ b/src/components/map/info/eventlist.vue
@@ -350,7 +350,7 @@ onMounted(() => {
 }
 
 .status-btn.task {
-  background-color: #00B1EB;
+  background-color: #5690E7;
 }
 
 .status-btn.idle {
@@ -409,7 +409,7 @@ onMounted(() => {
 }
 
 .online-status.online {
-  background-color: #00B1EB;
+  background-color: #5690E7;
 }
 
 .online-status.offline {
diff --git a/src/router/index.js b/src/router/index.js
index 2a5bb25..8beff24 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -230,20 +230,7 @@ export const dynamicRoutes = [
       }
     ]
   },
-  {
-    path: '/monitor/job-log',
-    component: Layout,
-    hidden: true,
-    permissions: ['monitor:job:list'],
-    children: [
-      {
-        path: 'index/:jobId(\\d+)',
-        component: () => import('@/views/monitor/job/log'),
-        name: 'JobLog',
-        meta: { title: '调度日志', activeMenu: '/monitor/job' }
-      }
-    ]
-  },
+ 
   {
     path: '/tool/gen-edit',
     component: Layout,
diff --git a/src/utils/test_websocket.html b/src/utils/test_websocket.html
index 363613d..db98f1f 100644
--- a/src/utils/test_websocket.html
+++ b/src/utils/test_websocket.html
@@ -115,7 +115,7 @@
             <div class="control-group">
                 <label>服务器地址：</label>
                 <select id="collisionServerSelect">
-                    <option value="ws://10.0.0.124:8080/collision">冲突检测WebSocket</option>
+                    <option value="ws://10.0.0.126:8080/collision">冲突检测WebSocket</option>
                 </select>
             </div>
             
diff --git a/src/utils/websocket.js b/src/utils/websocket.js
index fda8c9d..1423214 100644
--- a/src/utils/websocket.js
+++ b/src/utils/websocket.js
@@ -81,8 +81,20 @@ let wsInstance = null;
 export function createWebSocket(url, options) {
   if (!wsInstance) {
     wsInstance = new WebSocketService(url, options);
+  } else if (wsInstance.url !== url) {
+    // 如果URL改变，重新创建实例
+    wsInstance.close();
+    wsInstance = new WebSocketService(url, options);
   }
   return wsInstance;
 }
 
+// 重置WebSocket实例，用于强制重新创建实例
+export function resetWebSocketInstance() {
+  if (wsInstance) {
+    wsInstance.close();
+    wsInstance = null;
+  }
+}
+
 export default WebSocketService; 
\ No newline at end of file
diff --git a/src/views/car/monitor/detail.vue b/src/views/car/monitor/detail.vue
index ee70874..d712281 100644
--- a/src/views/car/monitor/detail.vue
+++ b/src/views/car/monitor/detail.vue
@@ -191,7 +191,7 @@ const cardList = [
 ];
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .vehicle-detail-content {
   width: 100%;
   height: 100%;
@@ -383,13 +383,13 @@ const cardList = [
   display: flex;
   align-items: center;
   gap: 4px;
-  img {
+  
+}
+.custom-tabs-label img {
     width: 16px;
     height: 16px;
     filter: brightness(0) invert(1); /* 默认将图标变为白色 */
   }
-}
-
 :deep(.el-tabs) {
   --el-tabs-header-background-color: #1e2233;
   --el-tabs-border-color: #303850;
diff --git a/src/views/car/park/index.vue b/src/views/car/park/index.vue
index 652a3ca..3f0a385 100644
--- a/src/views/car/park/index.vue
+++ b/src/views/car/park/index.vue
@@ -6,7 +6,7 @@
       <!-- 搜索区域 -->
       <div class="search-area">
         <el-input
-          v-model="queryParams.licensePlateNumber"
+          v-model="queryParams.licensePlate"
           placeholder="请输入车牌号查询"
           clearable
           prefix-icon="Search"
@@ -59,7 +59,7 @@
             <el-button link text type="danger" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
-        <el-table-column label="车牌号" prop="licensePlateNumber" align="left" />
+        <el-table-column label="车牌号" prop="licensePlate" align="left" />
         <el-table-column label="车辆类型" align="left">
           <template #default="scope">
             {{ getVehicleTypeName(scope.row.typeId) }}
@@ -104,8 +104,8 @@
       <el-form ref="vehicleFormRef" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :span="24">
-            <el-form-item label="车牌号" prop="licensePlateNumber">
-              <el-input v-model="form.licensePlateNumber" placeholder="请输入车牌号" />
+            <el-form-item label="车牌号" prop="licensePlate">
+              <el-input v-model="form.licensePlate" placeholder="请输入车牌号" />
             </el-form-item>
           </el-col>
           <el-col :span="24">
@@ -282,7 +282,7 @@ const statistics = computed(() => {
 const queryParams = ref({
   pageNum: 1,
   pageSize: 10,
-  licensePlateNumber: undefined,
+  licensePlate: undefined,
   typeId: undefined
 });
 
@@ -299,7 +299,7 @@ const importDialog = reactive({
 // 表单数据
 const form = ref({
   vehicleId: undefined,
-  licensePlateNumber: '',
+  licensePlate: '',
   typeId: '',
   brand: '',
   owningUnit: '',
@@ -310,7 +310,7 @@ const form = ref({
 
 // 表单验证规则
 const rules = {
-  licensePlateNumber: [
+  licensePlate: [
     { required: true, message: "车牌号不能为空", trigger: "blur" }
   ],
   typeId: [
@@ -399,7 +399,7 @@ function resetQuery() {
   queryParams.value = {
     pageNum: 1,
     pageSize: 10,
-    licensePlateNumber: undefined,
+    licensePlate: undefined,
     typeId: undefined
   };
   handleQuery();
@@ -521,7 +521,7 @@ function beforeImageUpload(file) {
 function reset() {
   form.value = {
     vehicleId: undefined,
-    licensePlateNumber: '',
+    licensePlate: '',
     typeId: '',
     brand: '',
     owningUnit: '',
diff --git a/src/views/platform/index.vue b/src/views/platform/index.vue
index d3bc23c..42e6a12 100644
--- a/src/views/platform/index.vue
+++ b/src/views/platform/index.vue
@@ -7,6 +7,49 @@
       @setCategoryVisibility="handleSetCategoryVisibility"
     />
     <CarAlarm />
+    
+    <!-- 告警统计卡片 -->
+    <div class="alarm-stats-card">
+      <div class="stats-header">
+        <span class="stats-title">告警统计</span>
+        <span class="stats-time">{{ currentTime }}</span>
+      </div>
+      <div class="stats-content">
+        <div class="stats-item" :class="{ 'has-new': hasNewWarning }">
+          <i class="stats-icon warning-icon">⚠</i>
+          <div class="stats-text">
+            <span class="stats-count">{{ warningCount }}</span>
+            <span class="stats-label">冲突预警</span>
+          </div>
+          <span v-if="hasNewWarning" class="new-badge"></span>
+        </div>
+        <div class="stats-item" :class="{ 'has-new': hasNewAlert }">
+          <i class="stats-icon alert-icon">🚨</i>
+          <div class="stats-text">
+            <span class="stats-count">{{ alertCount }}</span>
+            <span class="stats-label">冲突告警</span>
+          </div>
+          <span v-if="hasNewAlert" class="new-badge"></span>
+        </div>
+        <div class="stats-item" :class="{ 'has-new': hasNewBoundary }">
+          <i class="stats-icon boundary-icon">🚧</i>
+          <div class="stats-text">
+            <span class="stats-count">{{ boundaryCount }}</span>
+            <span class="stats-label">越界告警</span>
+          </div>
+          <span v-if="hasNewBoundary" class="new-badge"></span>
+        </div>
+        <div class="stats-item" :class="{ 'has-new': hasNewSpeed }">
+          <i class="stats-icon speed-icon">⚡</i>
+          <div class="stats-text">
+            <span class="stats-count">{{ speedCount }}</span>
+            <span class="stats-label">超速告警</span>
+          </div>
+          <span v-if="hasNewSpeed" class="new-badge"></span>
+        </div>
+      </div>
+    </div>
+    
     <!-- 报警通知面板 -->
     <AlarmNotification v-if="showAlarmPanel" @close="showAlarmPanel = false" />
     <!-- 报警通知按钮 -->
@@ -26,7 +69,7 @@
     <Eventlist v-if="showEventList" />
  
     <!-- 车辆移动控制组件 -->
-    <VehicleMovementControl :map="map" ref="vehicleMovementRef" v-if="map" />
+    <VehicleMovementControlRefactored :map="map" ref="vehicleMovementRef" v-if="map" />
     
 
 
@@ -46,12 +89,12 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed, onActivated } from 'vue';
 import OpenLayersMap from '../../components/map/OpenLayersMap.vue';
 import CarAlarm from '../../components/map/info/carClarm.vue';
 import Eventlist from '../../components/map/info/eventlist.vue';
 import AlarmNotification from '../../components/map/info/AlarmNotification.vue';
-import VehicleMovementControl from '../../components/map/controls/VehicleMovementControl.vue';
+import VehicleMovementControlRefactored from '../../components/map/controls/VehicleMovementControlRefactored.vue';
 import btn_left from '../../assets/images/btn_left.png';
 import btn_right from '../../assets/images/btn_right.png';
 
@@ -62,6 +105,63 @@ const mapRef = ref(null);
 const vehicleMovementRef = ref(null);
 const map = ref(null); // 存储地图实例
 
+// 告警统计数据
+const warningCount = ref(2);  // 冲突预警
+const alertCount = ref(1);    // 冲突告警
+const boundaryCount = ref(3); // 越界告警
+const speedCount = ref(5);    // 超速告警
+
+// 新告警标记
+const hasNewWarning = ref(false);
+const hasNewAlert = ref(false);
+const hasNewBoundary = ref(false);
+const hasNewSpeed = ref(false);
+
+// 当前时间
+const currentTime = ref('');
+
+// 更新时间
+function updateCurrentTime() {
+  const now = new Date();
+  currentTime.value = now.toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  });
+}
+
+// 模拟接收新告警
+function simulateNewAlarm() {
+  // 随机选择一种告警类型
+  const alarmType = Math.floor(Math.random() * 4);
+  
+  switch(alarmType) {
+    case 0:
+      warningCount.value++;
+      hasNewWarning.value = true;
+      setTimeout(() => { hasNewWarning.value = false; }, 10000);
+      break;
+    case 1:
+      alertCount.value++;
+      hasNewAlert.value = true;
+      setTimeout(() => { hasNewAlert.value = false; }, 10000);
+      break;
+    case 2:
+      boundaryCount.value++;
+      hasNewBoundary.value = true;
+      setTimeout(() => { hasNewBoundary.value = false; }, 10000);
+      break;
+    case 3:
+      speedCount.value++;
+      hasNewSpeed.value = true;
+      setTimeout(() => { hasNewSpeed.value = false; }, 10000);
+      break;
+  }
+  
+  // 更新总告警数量
+  alarmCount.value = warningCount.value + alertCount.value + boundaryCount.value + speedCount.value;
+}
+
 // 获取车辆分类数据，从VehicleMovementControl组件中获取
 const vehicleCategories = computed(() => {
   return vehicleMovementRef.value?.vehicleCategories || {};
@@ -124,9 +224,33 @@ function importRouteData() {
 
 
 
+// 组件激活时检查WebSocket状态
+onActivated(() => {
+  console.log('平台概览组件被激活');
+  // 延迟检查，确保子组件已激活
+  setTimeout(() => {
+    if (vehicleMovementRef.value) {
+      const wsConnected = vehicleMovementRef.value.wsConnected;
+      console.log('WebSocket连接状态:', wsConnected);
+      
+      // 如果WebSocket未连接，尝试重连
+      if (!wsConnected) {
+        console.log('WebSocket未连接，尝试重新连接');
+        vehicleMovementRef.value.reconnectWebSocket();
+      }
+    }
+  }, 1000);
+});
+
 onMounted(() => {
   document.querySelector('.app-main')?.classList.add('platform-no-padding');
   
+  // 初始化时间
+  updateCurrentTime();
+  
+  // 设置定时器更新时间
+  const timeInterval = setInterval(updateCurrentTime, 1000);
+  
   // 获取地图实例
   if (mapRef.value) {
     // 等待地图实例初始化完成
@@ -138,6 +262,16 @@ onMounted(() => {
       // testVehicleMovement();
     }, 1000);
   }
+  
+  // 组件卸载时清理定时器
+  onUnmounted(() => {
+    clearInterval(timeInterval);
+  });
+  
+  // 设置模拟告警定时器（仅开发环境）
+  if (isDevelopment) {
+    setInterval(simulateNewAlarm, 5000); // 每5秒模拟一次新告警
+  }
 });
 
 onUnmounted(() => {
@@ -164,6 +298,146 @@ watch(() => mapRef.value?.map, (newMap) => {
   z-index:1;
 }
 
+/* 告警统计卡片 */
+.alarm-stats-card {
+  position: absolute;
+  top: 25%;
+  left: 20px;
+  width: 240px;
+  background-color: rgba(41, 44, 56, 0.85);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  color: #fff;
+  z-index: 1000;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+}
+
+.stats-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 10px; /* 减小内边距 */
+  background-color: rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.stats-title {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.stats-time {
+  font-size: 12px;
+  color: #A0A8B7;
+  font-family: 'Courier New', monospace;
+}
+
+.stats-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1px;
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 1px;
+}
+
+.stats-item {
+  position: relative;
+  padding: 8px 10px; /* 减小内边距 */
+  display: flex;
+  flex-direction: row; /* 改为水平布局 */
+  align-items: center;
+  background-color: rgba(41, 44, 56, 0.95);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background-color: rgba(52, 122, 226, 0.1);
+  }
+  
+  &.has-new {
+    background-color: rgba(255, 77, 79, 0.15);
+    animation: pulse 1.5s infinite;
+    
+    .stats-count {
+      color: #FF4D4F;
+    }
+  }
+}
+
+.stats-icon {
+  font-size: 16px;
+  margin-right: 10px; /* 图标和文字之间的间距 */
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.warning-icon {
+  color: #FFA500;
+  background-color: rgba(255, 165, 0, 0.2);
+}
+
+.alert-icon {
+  color: #FF4D4F;
+  background-color: rgba(255, 77, 79, 0.2);
+}
+
+.boundary-icon {
+  color: #FF6B6B;
+  background-color: rgba(255, 107, 107, 0.2);
+}
+
+.speed-icon {
+  color: #FFD700;
+  background-color: rgba(255, 215, 0, 0.2);
+}
+
+.stats-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.stats-count {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.stats-label {
+  font-size: 12px;
+  color: #A0A8B7;
+  margin-top: 2px;
+}
+
+.new-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 6px;
+  height: 6px;
+  background-color: #FF4D4F;
+  border-radius: 50%;
+  box-shadow: 0 0 5px rgba(255, 77, 79, 0.5);
+}
+
+@keyframes pulse {
+  0% {
+    background-color: rgba(255, 77, 79, 0.15);
+  }
+  50% {
+    background-color: rgba(255, 77, 79, 0.3);
+  }
+  100% {
+    background-color: rgba(255, 77, 79, 0.15);
+  }
+}
+
 /* 报警通知按钮 */
 .alarm-btn {
   position: absolute;
diff --git a/vite.config.js b/vite.config.js
index f1e6b87..172755b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -32,7 +32,7 @@ export default defineConfig(({ mode, command }) => {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
           // target: 'http://10.0.0.17:8099',//昊天
-          target: 'http://10.0.0.124:8080',//田哥
+          target: 'http://10.0.0.126:8080',//田哥
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }