From 5e6314559893572d4ad22658430ca53e7aeed629 Mon Sep 17 00:00:00 2001 From: "978184212@qq.com" <978184212@qq.com> Date: Tue, 4 Aug 2026 19:04:26 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5=E5=92=8C?= =?UTF-8?q?=E5=8D=B1=E5=BA=9F=E8=BD=A6=E8=BE=86=E7=9A=84=E5=BC=B9=E7=AA=97?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=86=85=E5=AE=B9=EF=BC=8C=E5=8E=BB=E6=8E=89?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=92=8C=E8=AF=A6=E6=83=85=E5=8F=AA=E7=95=99?= =?UTF-8?q?=E4=B8=8B=E8=BD=A8=E8=BF=B9=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/image/vehicle.png | Bin 0 -> 8753 bytes src/components/zhnjCov.vue | 654 +++------------------------------- src/pages/Home/index.vue | 666 +++++++++++++++++++++++------------ 3 files changed, 502 insertions(+), 818 deletions(-) create mode 100644 src/assets/image/vehicle.png diff --git a/src/assets/image/vehicle.png b/src/assets/image/vehicle.png new file mode 100644 index 0000000000000000000000000000000000000000..1095fc32441f821d5fd7d8c7c851c292509e2039 GIT binary patch literal 8753 zcmXw9XH*ki*PRRj5^54aLz4iZD8_uhu-V50~!bhXe(^ftz-_lNeNX~G5 zyT$8HL5{_3&+&zY;4ZO>=&K=ZnR3xew=@tMS-o-q3S%O8Zks?9(QgUzKiD|w*VxGY zyD=Tq6l6d2u|%P{K{LK-ZD=Uqnom%1^}(@u=DV}h)00{(i5<0a^4p4ZNJzcqE#v~g zF=S+fFRdSvWay5#zLm1SH~Rgqz<^%kdzP6=MZdG)?Xx$!?rUG<%L-fWEqgdm?;CG# z^cZPPahVud?Y;F?459I>1&%aAKFPo}H3FMaY6NIvhWo4(yZWdeT|}q{cUkVYGft+# z1Dipf$Z#xpHp_lLP7C-`k?mxL#>ir z_*`m_4O0<2Gr?1n!k8%ArwvNAw=KbZxim$V)-x@;mt-EghXSIM%ONy2Hm>Si84*Ho zJownzMTFu`-Md^Mi&S~y4N)f_BJx7ev*ew2E-t|Bg{$kOvz?R25SjVXJS)zrLM%a; zMSbSJO4Yn}Ld#39V{UZq37m`gBUVN9wG0YJujc9x-N&nVo?an{N&nyhb!f$qvZWbV z0^Lv1~N!@3ld>~EZq~~2y6;6l|@#j0RyWKr0F|qbZ*#Hs3D2P1y6@1+x*pb zgvGxI!t>VmE|(iiI8uQP#{_(J<$k5Rc#R;4udY6n3?ovhkp<{l(L!oQH;fe$*fBMq z2Z?iV+`+NchLzN)f~eQIR0Qq@3t>I0=WUor3@^~TiukqoFo!4O(X2$5J@A%0cusZ3 zzTOlhCR(wPJn(h*y?T^qFPTMqSP8Qk^~}M5=#U+cE`=iZE4k5tQ(5wFrLmD8j>i2h z{2(!lmQ^mV=0|Xe{|ionKW6_1fhY;lZj<$~s;^N@4LNr#G`bo(q`l zxh0ix4Ki?~zMjIYgu%47W~IaHuz*Yutmh$nF$|AQ6okh%aLR&tI|*f}iw`h~LU0>Z z!1Ekk+$W=p1mL$_D*C0J(cR&|(rNL-F8?GXk;LB>4z0ypkl3U=+%raMgg|w|^m2e* zUJjEWaR-_mL~s~l0GpU7*HnPj1$=vKtGv~7=d6lhKdn3Q-L-t$0IUe#W7|DzD8Yp% z5U)9nW2{oIYN7z(3ta_&WQ`HmEE+N<<}~5<#xCZ@tru7b-uPKL6X|m9+zb~2Vb-yY zk9O9K2Sn{Y`#y@s8}f4DgK^1Qgd$j;&)DZG@~%&*u%cL;`xe0l26z-{J)bcexnj!= zzJ-NFQtBjKX9fp$&IOWhh#B@vwa zvJ(2}kHvFvMe(P75eEX!*vJI*JT7!C>USL%)WKOQIo5(^hCRRh+}JQ_5*+1Y{%U=l`jO2F85Mc8-<*;lG4TsTa}0$Jl=jQ|hxr&U^(TPd)X z+RzYgggxVIHh>ra3dt!GnNY#8NJ2mHslQ~aETqV_r_cp)S01?;jDyW=X#p==A3bkN z(Ptz@;vT~yH|#lNxZkY{R6`S2>IR$@=l4`Fj9{}m#1f9fS#Rp&W@BKzYQ!CWA}eGm zPNB}Mk2(rK+9NkVT<>Cqlq#K7IRgq8k&FbKVL55}<3#&)5ojLSWid}T&RJ9D2Em-3 zjo;+PYUt9H+SkJkf!kCUTpi~7u6vU^ ze>Wr(%Ksx}IlU2TB94j^sUaHGYtCKnc|j}#5Vj9zhpQ`pge6}TeqD92%kuz<2IL^~X6ybD84;7X4J-#(ol~S7gl^uMO6T0}C{J!?~ zby`CUrOEF&RNw~9zb~U=^+;(F2QSP!gF=c2pfR-OXYvvo=J5E8+uCPBhr6x$;;|&xfO%*DpMBFRJlt2lb zS{hg1yudy(YTt45dj`!d?7m&G`sP^mPh3&+=)<*p9E&FT?>RM?&xgC0ry9P&h3r~Ei?vht_0w$iImk~0lpM{Q-uxfSi1f>A zOQ%-8G>^HMO*AE#SuE({v}zsHVTy(kJyL`l;6<)cPXUThncJ!_p&O zh<67Bs_f#yZ;yVMuo2;qu8F6Sw76JQ?#-xY+4bz?j4Ot7@Vex&ojUW(-D&6@H^31j znnOKMzmMo0f82E!7Qmx?y_Vz!Lezl+-wK~Q_&i|Bzl+K}y39q4yS?ET}Al)=cnJCbz%)oa(hKeuWyx;(6cIYl zR{oed5&xsmJSWbb*F1 z7McMA+6IenHlz}&C?Rj&`~rTypaT_aKRD1>=)jex+QhLjv#1~{g8f1wVWjif(anJo z@;8J^Wa;YHr_|@$yC8glBCJyGgS#~n_ zC*jr%3F~5?m>};b66A_RX#Wm;Rf%soIXJUp7Hs|$)L6|k#ltmHie8f56t_+K(7_j& zV96+{{9|x-JZNa$jZu{1!@5x(6U4iT62mp05Img|F$ANaN6|bAz5Wgpw(sAa>&+V^ z8_~uWSaP-cDrJsbfJ53R>pNamuX)~AK0VgtGe*DCmmF2z)4V%QQC^n|nwso8{+H0i{P6XoT{iBz44aX-#rASt}kA)G&uFU2mwoHOl z@Ue+ZCdiK~xnQi_s=zrC5&`St|2!FQBrw?rv$ghnRp_Li%TVp#_gEEJx@j4+wfPOm zqcpf7ynSN!5lPrRUpfll%g#5#K0G)%j8E_xz$7wJ+&ML41ChRC0%$GKE#W^Mc>=X>ee4(r8-%2kJpDD|LUXdx4)Yy!e!Jz*fa6fH%i3f^ty8Ix%T(Qq9qQvS}6YG z7l(rBjBJ>cGA<3;bWL)f%3;eU?+A)Fba3JJPK0GCW4Qfd8nE7U&G{ZXaD1tXdZ+VK zDQQ$_J2nJod$J@A$53RenO=p5hxtoDTqCa-=~ni@L5Mo?_?&?2Nt0-n$^^3b7j!rq z7Wrti%U+fkspJ{7Ohntx^Bb=|mJlYlLS+fs)j|o*9f}c7#z_y(@i2SYM9xoM&s6X0 zav9qs;_;~`WW`+4)R- z<9FHjD0UVT2wuP@BE;-gft1{z^>iKElQW0I#CHq) zp3%B}c3&^q(a%cNkdGCnlM6t<=Y?bTwwO4A!*{bONT1$y54yj4DlN;@%S#~AufZBU zhgu`7xH&P3ji0itTv;X@>}xqSgmceox7x>{qGl5>F1s^|GQ6h|8ER_LITK^NC7V>o z2`Hu&0+9Q(B6mndMgO&XNG?-)d4E#0DW8lS_=7b8IyF{DprcoiM6Dv@{_y>6vvApyCoL6Tiwjd{cs#^hQzJ=ger@mYb|@qa3W%I zOR(VeRsMxW&Jdf?%|UZBj(RTOMMXQfxStN3yoZPm`6BHjXO$3RMJ(L>x1GJ}l9(We zmNSgAlvXB&@=L!9TG`|jp+7MM(xLIla05NcmHXGJQ6&r?*g*H%Kbz{)zZUj@$Dw`s zA=BNKc%B4@Cb4I}$Z>s3smJ%!ULV!Wa4esVo>0be>B=HwDY`9uUa-Ks#M@UMD+_@d zJ^?#(!j8EA*8HJcQ^)A3s1eyxl0Xp!Y{s5cje3&;cVNGl!(Qc7WXcBoUFoqEP`siG-I=Vd)=nQE z;n^d+QjI?gXF%uLTI{?s?|D9Vi1Awj;l~kI?oG}6RWK}(6mj^GG?G0M=Lr%~dXK&*S1plYAraH7R}>#cAvJ0|2Etvl+fe5YMiJ?94aW)2A4Z^w z_b>?Mjcln=bNpLtnvbKak`HY2774#HSSH+j%*wQ1w;0fcyLZ}FZ%KNJc(cf!UsoIG z{CoT0-QpbBm=aZ_@TTREn^1*z6QsCGFt;v!S~(`&!rCrRXA#rrIT<0QBPFb+jmjY0 zvHDM{#du1nVFN&5yd9W?oSspJv1}u-=l>u%^G<4&QFZJbT+E$y0`1sc|kulsUB`-9aCV!Ay ziO>0?e_+8Chc68YGM*nWUB#}P!To)sDfA8=1EvI_Tn{DSyQ68psvaWSb++%|a|~on zwRG6>!|#J_8R$s!sUKOAgV=}$7jMS@N*F`wL{hKKhZA2@dqBN05>*6k7o z5G^Rz=4Q;>*1U0GwXxSkCYCys`+!xRZXrDfM>A3SPVvWKo^aV{y>OK&=gZJW3sULo zS!9RT;M6ut?XF}2GTU>N^*FHL1b#eV`(!ogck2?VQY})y=l5(MJH%7b9g|^*1jC+W zB=x#BYmIo?M(*cln*1^3U=>4~uR8BMSeik5`js9qcriWmHL&JCq1kS#qF$&`kl!R% zG1kr-ytB>pWyz6FO}u&H{`Yw$4!*{XrTL#SL6bQtdd2*K&iya^waz$nx0x5+mK?vq z06OcRfI72ds0KeH%_3`=yQ}G_rQO^quU9ZzM|gfIwcd(QgEQ3@JS2XYjv)X>G2hsE zYAM6|wZf{V7iwjmk2I;$c*xnH{GgsL01;8XHoQWric2*2TAQ;FM+y>-I2L8y|Ic&is#W6?T=x79-&-ZQw|!mv(D>^EI*1BinE z{pIH!q8@i%7=34Gv;ZB$LjPt~hjI+4$3-;J{4wZO;o#ho;VyT-b*gUh4UUsdrZF+_ zPPCc5IyOYBnyaH9h7PNV{flW!PLAT#u(a21Br7TZ?v2%JBi<2I z3UYytk6=a;IpUt2xpk{Dl@seCg}>@T1z9PZybNx;Ad7p-MjAy@lj8QMmRIula<`QL z>%*sfxAKHA@jYe3iyZ^;{WRw}-9<}hnV;1p+Wm-E39WrzHev(z1BFI|BL zdeg-L?=JL&ao$-jItFh1AM=BIE#Ketw*FYYDRvqmB7LpSI71Q~@Pan3-yY?0S@Nl$ zTllz6P3QA1bHGziJNO_^y-1Pa3-7AD+!6w1dG+@ z03yKTGyZ|ndpY`c#bA$Y2DKkFC+dD;=xh@U(s3u{P@}nZ{f}DFkT-*ru7k%0g16Zy zOz8Nw*w>Z6NLTiI^8nYfJArWF7Sj5EVCak}izpAcpsY{B{V2Tsj3@U>6FE|+j9PW6 zar!^b#qQE4w3?kac~|F`&-JH=udxB4J-oxrU7!p?^hL2EHBbc1rH9 z$!Jzn+jTxg!`YDVqtx~+dN0nr@GB}b%XGh2edAXgzl} zXXnUcoP_@zdN*OGp!!~X$>3@X=9ovmFhHHOdGIG2s9%C)=#1XjqzEmYz@+asiqf2h zC)umlyPiINUP^i4Vo(fEG;Rv)6*m9*Wb;c13KCfxM>KZNy&C>NJ##R^d#l?sU0!N2r@;g^xYuedSI`2kqGY$%HG_zpgN z$ZPw8k${8F!1REZzrvQ?2Pkc^U@HQVJJ5`*{5%>R!T^--HMKB%i6VnDU^-PFD}^ri z7iHb6idF)AgFN!DFp(kwq``%d#wYipTfo{723#YOTBrjG5i7P_U>WD;A3x-)14_C< z7;a{sjdLkj?FRBf>K(JUio_a-gE&900p$>m!*43kv=D-uY}(9%8)cK!J`TwUNc|u3AiM)a-R!)jg&I8*Nvnmf-~dXNIE4gC9SFj4B^ ziCRgpew9E}n{+R5=hX&?F~*QQVk#NfB-Rc4Z_;(+t2iC6E5 z-cGeWyU@&Q#7lEASORZ6Pdhj02Nm6jSpQ3pJ?8NNfyc*irC3UUs#p%8;X6I^Oq3cV z5c|xdPsjiYV z5;l}DR`j;d1}esYl?4ZancB#pu64X(myw$ZIAO(>2iRI}Kpdw}jsp){RW6>lf!o=- z1Jy}SNl82qoUbnUY>srv;4~%*_xJ)_S<3^6tIXhA|1B9!0J0R`<;`5zxyt~saARFt zvqNwp0{r0jt%bj*L?J(LAa3@_eIk*O3gQ;%DVJZqbGM%h1_+V)!qph(8Lp=3LJ0uZ z`JuVeJtzc+dob6z;%06A|2%xRasjE-98RjDcpAoBc+IYO!S z#>SGp3k{}$Q<@?8QQ&yqA|UsvCTNGyI!u*nQ8^aDEx@&zEyPj8NGcpCigjXP{@Ohhg#j!S?OwOtb(h8h z%IkkEIp|s=;#lUGgjlm$22HLaYs=H2qKX!#oQZ3!JYTer7KE-tYdZ87bBh^KMDb6I z8U!IIgCcbzds5)*Eq%(DP*L_94bS&%&V_23iAV2M)E>A7F14v|X^W&lMUB6}=#rri zLl&3BdJm9mg**L}sZdc4S#lHsqNOuCSb(;aA%jSf{@xUooquHcoeKxrC)FHYtW-BI zc}aEiy93N=>2wHS?bZd+N)PAUpp?jGX@kUE1`*qRI1JxRU&&`KCcDZajD<-35Gxpn zrIv!$n=yt4Scqo@@IjMtMqg?_voQuu%@{nrb)5@(1(u zrrK?(nS)YS6hYnf`kmj!`7Z!!w~nlh{#2QdJsLoc$y;X$+WY9$59RHQ^p!TycFrIm zE*Ss`vG0k0z4~5iKb!Zya2Ml~>e#S=ok9HNFabz9RfOAIVi20u%1#4lPGsj#*M3$) z#CKT*ili`a=W4zG$&Dqz8rxF=4|5a#$DEgFL~nt-(Lt?93Ps z#DHl_&MUb?gVvNPVh@}uNs*ls5cE2lZlc&#^_9X_I7@DS{c8jI7Vzo$<5G+4<+foFD zQ#+n`LKZgX6cyFnszENs%X_(9IuwA<(nyu%pwvI=J^Wx02@95wH85)LQF-0)hZAB` z?z3C31idWAR`r;+Bupla{2RKCj5PVU-X1ypn)R#Q`FPko{xoy5!tGPRMDS zwc(6;EXD3)c@v9*O4Z;m9cvfaUduO~PJbe95Y6!Ag|1oTr}qz^?)`T6+ncOg_UcXN z0I`HqPl>zMQd@di%zD=@yUfmNtZ(1nIYTZcQu@3Ta`SiCDYqh#0|1HiJt1)d004@A bl_diLblSyR<7;kSL;y`yJ(br=_>lhrxp%aW literal 0 HcmV?d00001 diff --git a/src/components/zhnjCov.vue b/src/components/zhnjCov.vue index 2915d38..164accc 100644 --- a/src/components/zhnjCov.vue +++ b/src/components/zhnjCov.vue @@ -1,183 +1,5 @@ @@ -512,6 +526,9 @@ export default { markersOrient: [], markersSoil: [], markersOther: [], + markersFlowmeter: [], + markersVehicle: [], + vehicleMarkerMap: new Map(), // 存储车辆id和marker的映射 lastClickIcon: '', urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/', mapTypeFlag: true, @@ -576,9 +593,11 @@ export default { currentVehicleInfo: null, vehicleLocationMarker: null, vehicleInfoWindow: null, - agriculturalDialogVisible: false, - agriculturalVehicleData: null, - vehicleListFull: null, + // 轨迹弹窗相关 + selectedVehicle: null, + trajectoryDialogVisible: false, + // 下拉菜单控制 + isVehicleDropdownOpen: false, }; }, created() { @@ -638,9 +657,87 @@ export default { this.vehicleListData(); }, methods: { + // ==================== 危废车辆下拉菜单方法 ==================== + + // 切换下拉菜单 + toggleVehicleDropdown() { + this.isVehicleDropdownOpen = !this.isVehicleDropdownOpen; + }, + + // 显示全部点位 - 使用veLat和veLong + showAllVehiclePoints() { + // 先清除之前的所有车辆标记 + this.markersVehicle.forEach(marker => { + marker.setMap(null); + }); + this.markersVehicle = []; + this.vehicleMarkerMap.clear(); + + // 重新从vehicleList添加所有车辆点位 + let addedCount = 0; + this.vehicleList.forEach(item => { + const lat = parseFloat(item.veLat); + const lng = parseFloat(item.veLong); + + if (!isNaN(lat) && !isNaN(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) { + const marker = new AMap.Marker({ + position: [lng, lat], + icon: new AMap.Icon({ + size: new AMap.Size(30, 42), + image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', + imageSize: new AMap.Size(30, 42) + }), + offset: new AMap.Pixel(-15, -42), + zIndex: 1002, + extData: { vehicleInfo: item } + }); + + // 点击标记弹出信息窗口 + marker.on('click', (e) => { + const data = e.target.getExtData(); + if (data && data.vehicleInfo) { + // 先获取车辆位置点 + const point = { + jingdu: data.vehicleInfo.veLong, + weidu: data.vehicleInfo.veLat, + createTime: data.vehicleInfo.updateTime || new Date().toISOString() + }; + this.showVehicleInfoWindow(point, data.vehicleInfo); + } + }); + + marker.setMap(this.aMap); + this.markersVehicle.push(marker); + this.vehicleMarkerMap.set(item.id, marker); + addedCount++; + } + }); + + if (addedCount > 0) { + this.aMap.setFitView(this.markersVehicle, false, [200, 500, 360, 360], 16); + this.$message.success(`显示全部 ${addedCount} 个危废车辆点位`); + } else { + this.$message.warning('暂无有效的危废车辆点位数据'); + } + this.isVehicleDropdownOpen = false; + }, + + // 关闭点位显示 + hideAllVehiclePoints() { + this.markersVehicle.forEach(marker => { + marker.setMap(null); + }); + this.markersVehicle = []; + this.vehicleMarkerMap.clear(); + // 同时清除车辆位置标记 + this.clearVehicleMarker(); + this.$message.info('已关闭危废车辆点位显示'); + this.isVehicleDropdownOpen = false; + }, + // ==================== 危废车辆位置相关方法 ==================== - // 危化车辆点击 + // 危化车辆点击 - 从下拉列表选择 handleVehicleSelect(item) { this.currentVehicleInfo = item; @@ -648,62 +745,80 @@ export default { this.clearVehicleMarker(); const vehicleName = item.vePlate || item.plateNumber || '车辆'; - - gpsRecordPage({ - pageNo: 1, - pageSize: 1000, - gpsId: item.gpsId, - }).then(res => { - - if (res.result && res.result.records && res.result.records.length > 0) { - let trackData = res.result.records; - - - // 过滤掉无效的经纬度数据 - trackData = trackData.filter(record => { - const lng = parseFloat(record.jingdu || record.longitude || record.lng || record.lon); - const lat = parseFloat(record.weidu || record.latitude || record.lat); - return !isNaN(lng) && !isNaN(lat) && - lng >= -180 && lng <= 180 && - lat >= -90 && lat <= 90; - }); - - if (trackData.length === 0) { - this.$message.warning(`${vehicleName} 的位置数据无效，请检查数据`); - return; - } - - // 按时间排序，获取最新位置 - trackData.sort((a, b) => { - const timeA = a.createTime || a.server_time || a.updateTime || 0; - const timeB = b.createTime || b.server_time || b.updateTime || 0; - return new Date(timeA) - new Date(timeB); - }); - - // 只取最后一个点（最新位置） - const latestPoint = trackData[trackData.length - 1]; - - // 定位到车辆位置并添加标记 - this.locateToVehicle(latestPoint, item); - + // 如果有经纬度直接定位 + if (item.veLat && item.veLong) { + const lat = parseFloat(item.veLat); + const lng = parseFloat(item.veLong); + if (!isNaN(lat) && !isNaN(lng)) { + const point = { + jingdu: item.veLong, + weidu: item.veLat, + createTime: item.updateTime || new Date().toISOString() + }; + this.locateToVehicle(point, item); this.$message({ - message: `成功加载 ${vehicleName} 的最新位置`, + message: `定位到 ${vehicleName}`, type: 'success' }); - } else { - this.$message({ - message: `${vehicleName} 暂无位置数据`, - type: 'warning' - }); + this.isVehicleDropdownOpen = false; + return; } - }).catch(err => { - console.error('获取位置数据失败:', err); - this.$message({ - message: '获取位置数据失败，请稍后重试', - type: 'error' + } + + // 如果没有经纬度，尝试通过gpsRecordPage获取 + if (item.gpsId) { + gpsRecordPage({ + pageNo: 1, + pageSize: 1000, + gpsId: item.gpsId, + }).then(res => { + if (res.result && res.result.records && res.result.records.length > 0) { + let trackData = res.result.records; + + trackData = trackData.filter(record => { + const lng = parseFloat(record.jingdu || record.longitude || record.lng || record.lon); + const lat = parseFloat(record.weidu || record.latitude || record.lat); + return !isNaN(lng) && !isNaN(lat) && + lng >= -180 && lng <= 180 && + lat >= -90 && lat <= 90; + }); + + if (trackData.length === 0) { + this.$message.warning(`${vehicleName} 的位置数据无效，请检查数据`); + return; + } + + trackData.sort((a, b) => { + const timeA = a.createTime || a.server_time || a.updateTime || 0; + const timeB = b.createTime || b.server_time || b.updateTime || 0; + return new Date(timeA) - new Date(timeB); + }); + + const latestPoint = trackData[trackData.length - 1]; + this.locateToVehicle(latestPoint, item); + + this.$message({ + message: `成功加载 ${vehicleName} 的最新位置`, + type: 'success' + }); + } else { + this.$message({ + message: `${vehicleName} 暂无位置数据`, + type: 'warning' + }); + } + }).catch(err => { + console.error('获取位置数据失败:', err); + this.$message({ + message: '获取位置数据失败，请稍后重试', + type: 'error' + }); }); - }); + } else { + this.$message.warning(`${vehicleName} 没有GPS设备ID和位置信息`); + } + this.isVehicleDropdownOpen = false; }, // 定位到车辆位置 @@ -716,17 +831,14 @@ export default { const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon); const lat = parseFloat(point.weidu || point.latitude || point.lat); - // 验证经纬度是否有效 if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) { console.error('无效的经纬度:', lng, lat); this.$message.warning('车辆位置数据无效'); return; } - // 添加车辆位置标记（普通坐标点） this.addVehicleLocationMarker(lng, lat, point, vehicleInfo); - // 平滑定位到车辆位置 this.aMap.panTo([lng, lat]); setTimeout(() => { this.aMap.setZoomAndCenter(16, [lng, lat]); @@ -735,7 +847,7 @@ export default { console.log(`定位到车辆位置: ${lng}, ${lat}`); }, - // 添加车辆位置标记（普通坐标点） + // 添加车辆位置标记 addVehicleLocationMarker(lng, lat, point, vehicleInfo) { if (isNaN(lng) || isNaN(lat)) { console.error('无效的经纬度:', lng, lat); @@ -745,9 +857,6 @@ export default { this.removeLocationMarker(); this.closeVehicleInfoWindow(); - const vehicleName = vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆'; - - // 使用普通坐标点标记 const locationMarker = new AMap.Marker({ position: [lng, lat], icon: new AMap.Icon({ @@ -760,7 +869,6 @@ export default { extData: { point: point, vehicleInfo: vehicleInfo } }); - // 点击标记弹出信息窗口 locationMarker.on('click', (e) => { const data = e.target.getExtData(); this.showVehicleInfoWindow(data.point, data.vehicleInfo); @@ -771,118 +879,137 @@ export default { this.vehicleMarkers.push(locationMarker); }, - // 显示车辆信息窗口（深色科技风） - showVehicleInfoWindow(point, vehicleInfo) { - this.closeVehicleInfoWindow(); - - const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon); - const lat = parseFloat(point.weidu || point.latitude || point.lat); - - const vehicleName = vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆'; - - // 使用自定义HTML，不依赖InfoWindow的默认样式 - const infoContent = ` -
-
- 🚛 - ${vehicleName} -
-
-
- 设备ID： - ${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'} + // 显示车辆信息窗口 + showVehicleInfoWindow(point, vehicleInfo) { + this.closeVehicleInfoWindow(); + + const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon); + const lat = parseFloat(point.weidu || point.latitude || point.lat); + + const vehicleName = vehicleInfo.veNotes || vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆'; + + const infoContent = ` +
+
+ 🚛 + ${vehicleName} +
+
+
+ 设备ID： + ${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'} +
+
+ 车牌号： + ${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'} +
+
+ 最新时间： + ${point.createTime || point.server_time || point.updateTime || '--'} +
+
+ 经度： + ${lng.toFixed(6)} +
+
+ 纬度： + ${lat.toFixed(6)} +
+
+
+ 📍 点击查看车辆轨迹 + → +
-
- 车牌号： - ${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'} -
-
- 最新时间： - ${point.createTime || point.server_time || point.updateTime || '--'} -
-
- 经度： - ${lng.toFixed(6)} -
-
- 纬度： - ${lat.toFixed(6)} -
-
-
- 📍 点击查看农机列表 - → -
-
- `; - - this.vehicleInfoWindow = new AMap.InfoWindow({ - content: infoContent, - offset: new AMap.Pixel(0, -35), - autoMove: true, - closeWhenClickMap: true, - isCustom: true, - }); - - if (!isNaN(lng) && !isNaN(lat)) { - this.vehicleInfoWindow.open(this.aMap, [lng, lat]); - this.vehicleMarkers.push(this.vehicleInfoWindow); - - // 添加点击事件监听 - 点击信息窗口打开农机列表 - setTimeout(() => { - const infoWindowEl = document.querySelector('.vehicle-info-window'); - if (infoWindowEl) { - infoWindowEl.addEventListener('click', (e) => { - // 防止点击内部按钮时冒泡 - if (e.target.closest('.vehicle-info-window')) { - this.openAgriculturalMachineryList(vehicleInfo, point); + `; + + this.vehicleInfoWindow = new AMap.InfoWindow({ + content: infoContent, + offset: new AMap.Pixel(0, -35), + autoMove: true, + closeWhenClickMap: true, + isCustom: true, + }); + + if (!isNaN(lng) && !isNaN(lat)) { + this.vehicleInfoWindow.open(this.aMap, [lng, lat]); + this.vehicleMarkers.push(this.vehicleInfoWindow); + + setTimeout(() => { + const infoWindowEl = document.querySelector('.vehicle-info-window'); + if (infoWindowEl) { + infoWindowEl.addEventListener('click', (e) => { + if (e.target.closest('.vehicle-info-window')) { + // 获取车辆GPS数据 + this.getVehicleGpsData(vehicleInfo); + } + }); } - }); + + const infoWindowContent = document.querySelector('.amap-info-content'); + if (infoWindowContent) { + infoWindowContent.style.background = 'transparent !important'; + infoWindowContent.style.padding = '0 !important'; + } + }, 50); + } + }, + + // 获取车辆GPS数据并打开轨迹 + getVehicleGpsData(vehicleInfo) { + if (!vehicleInfo.gpsId) { + this.$message.warning('该车辆没有GPS设备ID'); + return; } - // 覆盖InfoWindow的默认背景 - const infoWindowContent = document.querySelector('.amap-info-content'); - if (infoWindowContent) { - infoWindowContent.style.background = 'transparent !important'; - infoWindowContent.style.padding = '0 !important'; - } - }, 50); - } -}, - - // 打开智慧农机列表并传值 - openAgriculturalMachineryList(vehicleInfo, point) { - // 构建当前选中的车辆数据 + // 构建车辆数据 const vehicleData = { - vehicleInfo: vehicleInfo, - location: point, + gpsId: vehicleInfo.gpsId, + veNotes: vehicleInfo.veNotes || vehicleInfo.vePlate || '车辆', + vePlate: vehicleInfo.vePlate || vehicleInfo.plateNumber || '--', + veDriver: vehicleInfo.veDriver || vehicleInfo.driverName || '--', vehicleName: vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆', deviceId: vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '', - latitude: point.weidu || point.latitude || point.lat || 0, - longitude: point.jingdu || point.longitude || point.lng || point.lon || 0, - extData: { - vehicleType: '危废车辆', - status: '在线', - lastUpdate: point.createTime || point.server_time || point.updateTime || new Date().toISOString() - } }; this.closeVehicleInfoWindow(); this.qcdtdialogTableVisible = false; - this.agriculturalVehicleData = vehicleData; - this.agriculturalDialogVisible = true; + this.selectedVehicle = vehicleData; + this.trajectoryDialogVisible = true; + }, + + // 打开轨迹弹窗 + openTrajectoryDialog(vehicleInfo, point) { + const vehicleData = { + gpsId: vehicleInfo.gpsId || vehicleInfo.gpsDeviceId, + veNotes: vehicleInfo.veNotes || vehicleInfo.vePlate || '车辆', + vePlate: vehicleInfo.vePlate || vehicleInfo.plateNumber || '--', + veDriver: vehicleInfo.veDriver || vehicleInfo.driverName || '--', + vehicleName: vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆', + deviceId: vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '', + latitude: point.weidu || point.latitude || point.lat || 0, + longitude: point.jingdu || point.longitude || point.lng || point.lon || 0 + }; + + this.closeVehicleInfoWindow(); + this.qcdtdialogTableVisible = false; + + this.selectedVehicle = vehicleData; + this.trajectoryDialogVisible = true; + + console.log('打开轨迹弹窗，车辆数据:', vehicleData); }, // 关闭信息窗口 @@ -920,20 +1047,19 @@ export default { vehicleListData() { vehicleList({ pageNo: 1, - pageSize: 30, + pageSize: 100, }).then(res => { if (res.code === 200 && res.result) { - // 存储完整的返回数据 - this.vehicleListFull = res.result; - // 存储 records 数组 this.vehicleList = res.result.records || []; + // 默认显示全部点位 + this.$nextTick(() => { + this.showAllVehiclePoints(); + }); } else { this.vehicleList = []; - this.vehicleListFull = null; } }).catch(err => { this.vehicleList = []; - this.vehicleListFull = null; }); }, @@ -1118,6 +1244,7 @@ export default { this.liulDataId = e.target.getExtData() this.liulShowFlag = true }) + this.markersFlowmeter.push(marker); this.markersSoil.push(marker); } else { this.markersOther.push(marker) @@ -1365,6 +1492,9 @@ export default { let arr = []; if (this.lastClickIcon == flag) { this.lastClickIcon = '' + // 取消选中，恢复视图 + that.aMap.setFitView(null, false, [100, 400, 360, 360], 16); + return; } else { this.lastClickIcon = flag; if (flag == 'livestock') { @@ -1375,6 +1505,10 @@ export default { arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("watershed") != -1); } else if (flag == 'soil') { arr = this.markersSoil; + } else if (flag == 'flowmeter') { + arr = this.markersFlowmeter; + } else if (flag == 'vehicle') { + arr = this.markersVehicle; } } if (arr && arr.length > 0) { @@ -1382,16 +1516,32 @@ export default { item.setzIndex((that.lastZIndex+=2)); }); that.aMap.setFitView(arr, false, [200, 500, 360, 360], 16); + const typeNames = { + 'livestock': '畜禽污染监测站', + 'orient': '农田污染监测站', + 'watershed': '小流域监测站', + 'soil': '长期定位监测站', + 'flowmeter': '微功率雷达监测点', + 'vehicle': '危废车辆' + }; + this.$message.success(`找到 ${arr.length} 个${typeNames[flag] || '标记点'}`); } else { that.aMap.setFitView(null, false, [100, 400, 360, 360], 16); + const typeNames = { + 'livestock': '畜禽污染监测站', + 'orient': '农田污染监测站', + 'watershed': '小流域监测站', + 'soil': '长期定位监测站', + 'flowmeter': '微功率雷达监测点', + 'vehicle': '危废车辆' + }; + this.$message.warning(`暂无${typeNames[flag] || '标记点'}数据`); } - } + }, }, } - - + \ No newline at end of file