road-traffic-viewer 1.0.0

package/dist/road-traffic-viewer.cjs.js

@@ -0,0 +1 @@
+"use strict";var E=Object.defineProperty;var I=(l,e,s)=>e in l?E(l,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):l[e]=s;var h=(l,e,s)=>I(l,typeof e!="symbol"?e+"":e,s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("vue"),C=[{key:3,color:"#ff4d6a"},{key:2,color:"#ff9500"},{key:1,color:"#00bfff"},{key:0,color:"#00ff88"}],D=/^[kK](\d+)(?:\.(\d+))?$/,H=/^\d+(\.\d+)?$/;function m(l){if(typeof l=="number")return Math.round(l);const e=l.trim();if(H.test(e))return Math.round(parseFloat(e));const t=e.replace("+",".").match(D);if(t){const a=parseInt(t[1],10),n=t[2]||"0";let r=0;if(n.length>0){const o=n.padEnd(3,"0").substring(0,3);r=parseInt(o,10)}return a*1e3+r}const i=parseFloat(e);return isNaN(i)?(console.warn(`[pile-utils] 无法解析桩号: "${l}"，已当作 0 处理`),0):Math.round(i)}function S(l){const e=Math.round(l),s=Math.floor(e/1e3),t=e%1e3;if(t===0)return`K${s}`;const i=t.toString().padStart(3,"0");return`K${s}+${i}`}function U(l){return`K${Math.floor(Math.round(l)/1e3)}`}const F="#141a28",y="#1e2a3e",A="#2a3a55",O="#3a5070",B="#1a2535",k="#ffb020",W="#0a0f1a",V="#3a5070",z="#2a3a55",Y="#ffffff",q="#00ff88",N=28,$=3,G=6,X=16,K=12,J=1e3,j=1e3,Q=1,Z=-1;class P{constructor(e,s){h(this,"container");h(this,"canvas");h(this,"ctx");h(this,"config");h(this,"metrics",null);h(this,"cachedVehicles",[]);h(this,"cachedTrafficFlows",[]);h(this,"renderPending",!1);h(this,"dpr",1);h(this,"resizeObserver",null);h(this,"destroyed",!1);h(this,"statusColorMap",new Map);h(this,"svgImageCache",new Map);h(this,"roadBgImage",null);h(this,"roadBgImageLoading",!1);h(this,"viewOffsetMeters",0);h(this,"isDragging",!1);h(this,"dragStartX",0);h(this,"dragStartOffset",0);h(this,"_boundMouseMove",null);h(this,"_boundMouseUp",null);h(this,"_onWindowResize",()=>{this.destroyed||(this._resize(),this.renderPending||(this.renderPending=!0,requestAnimationFrame(()=>this._doRender())))});h(this,"_onMouseDown",e=>{if(this.destroyed||!this.metrics)return;e.preventDefault(),this.isDragging=!0,this.dragStartX=e.clientX,this.dragStartOffset=this.viewOffsetMeters,this.canvas.style.cursor="grabbing";const s=i=>this._onMouseMove(i),t=i=>this._onMouseUp(i);this._boundMouseMove=s,this._boundMouseUp=t,window.addEventListener("mousemove",s),window.addEventListener("mouseup",t)});h(this,"_onMouseMove",e=>{if(!this.isDragging||!this.metrics)return;const s=this.metrics,i=(e.clientX-this.dragStartX)/s.canvasWidthPx*s.visibleMeters;let a=this.dragStartOffset-i;const n=s.effectiveStartM,r=Math.max(n,s.effectiveEndM-s.visibleMeters);a=Math.max(n,Math.min(a,r)),this.viewOffsetMeters=a,s.viewOffsetMeters=a,this.renderPending||(this.renderPending=!0,requestAnimationFrame(()=>this._doRender()))});h(this,"_onMouseUp",e=>{this.isDragging&&(this.isDragging=!1,this.canvas.style.cursor="grab",this._boundMouseMove&&(window.removeEventListener("mousemove",this._boundMouseMove),this._boundMouseMove=null),this._boundMouseUp&&(window.removeEventListener("mouseup",this._boundMouseUp),this._boundMouseUp=null))});if(!e)throw new Error("[RoadTrafficCore] container 不能为空");this.container=e,this.dpr=window.devicePixelRatio||1,this.config=this._applyDefaults(s),this._buildStatusColorMap(),this.canvas=document.createElement("canvas"),this.canvas.style.display="block",this.ctx=this.canvas.getContext("2d"),e.innerHTML="",e.appendChild(this.canvas),this._resize(),this._drawEmptyRoad(),typeof ResizeObserver<"u"&&(this.resizeObserver=new ResizeObserver(()=>{this._resize(),this.renderPending||(this.renderPending=!0,requestAnimationFrame(()=>this._doRender()))}),this.resizeObserver.observe(e)),window.addEventListener("resize",this._onWindowResize),this.canvas.addEventListener("mousedown",this._onMouseDown.bind(this)),this.canvas.style.cursor="grab"}render(){this.destroyed||(this._resize(),this._drawEmptyRoad())}updateVehicles(e){this.destroyed||(this.cachedVehicles=e||[],this.renderPending||(this.renderPending=!0,requestAnimationFrame(()=>this._doRender())))}updateTrafficFlows(e){this.destroyed||(this.cachedTrafficFlows=e||[],this.renderPending||(this.renderPending=!0,requestAnimationFrame(()=>this._doRender())))}updateAll(e,s){this.destroyed||(this.cachedVehicles=e||[],this.cachedTrafficFlows=s||[],this.renderPending||(this.renderPending=!0,requestAnimationFrame(()=>this._doRender())))}getCanvas(){return this.canvas}getMetrics(){return this.metrics}updateConfig(e){this.destroyed||(this.config={...this.config,...e},e.trafficStatusColors&&this._buildStatusColorMap(),this._resize(),this.renderPending||(this.renderPending=!0,requestAnimationFrame(()=>this._doRender())))}destroy(){this.destroyed||(this.destroyed=!0,this.renderPending=!1,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),window.removeEventListener("resize",this._onWindowResize),this._boundMouseMove&&(window.removeEventListener("mousemove",this._boundMouseMove),this._boundMouseMove=null),this._boundMouseUp&&(window.removeEventListener("mouseup",this._boundMouseUp),this._boundMouseUp=null),this.container&&(this.container.innerHTML=""),this.cachedVehicles=[],this.cachedTrafficFlows=[])}_applyDefaults(e){return{startPile:e.startPile,endPile:e.endPile,paddingStartMeters:e.paddingStartMeters??0,paddingEndMeters:e.paddingEndMeters??0,segmentIntervalMeters:e.segmentIntervalMeters??J,scale:e.scale??j,canvasWidth:e.canvasWidth??"100%",canvasHeight:e.canvasHeight??"auto",directionDown:e.directionDown??Q,directionUp:e.directionUp??Z,lanesDown:e.lanesDown??1,lanesUp:e.lanesUp??1,laneHeight:e.laneHeight??N,laneLineColor:e.laneLineColor??Y,roadPadding:e.roadPadding??$,medianHeight:e.medianHeight??G,roadBg:e.roadBg??F,roadShoulder:e.roadShoulder??y,roadLine:e.roadLine??A,roadEdge:e.roadEdge??O,medianBg:e.medianBg??B,medianLineColor:e.medianLineColor??k,canvasBg:e.canvasBg??W,markerColor:e.markerColor??V,laneLabelColor:e.laneLabelColor??z,defaultCarColor:e.defaultCarColor??q,trafficStatusColors:e.trafficStatusColors??C,carLength:e.carLength??X,carWidth:e.carWidth??K,carSvgUrl:e.carSvgUrl??"",roadBgImage:e.roadBgImage??"",showCarSpeed:e.showCarSpeed??!0,showCarId:e.showCarId??!0}}_buildStatusColorMap(){this.statusColorMap.clear();const e=this.config.trafficStatusColors;for(let s=0;s<e.length;s++)this.statusColorMap.set(e[s].key,e[s].color)}_computeMetrics(){const e=this.config,s=m(e.startPile),t=m(e.endPile),i=s-e.paddingStartMeters,a=t+e.paddingEndMeters,n=a-i,r=n;if(r<=0)return console.warn("[RoadTrafficCore] 路线长度无效 (<=0)，请检查 startPile/endPile"),null;const o=e.scale,d=this.container.clientWidth;let c;const f=e.canvasWidth;if(typeof f=="string"&&f.endsWith("%")){const L=parseFloat(f)/100;c=d*L}else typeof f=="number"?c=f:c=d;const p=Math.min(o,r),v=e.roadPadding+e.lanesUp*e.laneHeight,M=e.roadPadding+e.lanesDown*e.laneHeight,_=v+e.medianHeight+M;let u;const w=e.canvasHeight;if(typeof w=="string"&&w.endsWith("%")){const L=this.container.clientHeight,R=parseFloat(w)/100;u=L*R}else typeof w=="number"?u=w:u=_+40;const T=(u-_)/2;return c<10&&(c=10),u<10&&(u=10),{totalMeters:r,effectiveStartM:i,effectiveEndM:a,effectiveLengthM:n,scale:o,visibleMeters:p,viewOffsetMeters:this.viewOffsetMeters,canvasWidthPx:c,canvasHeightPx:u,laneHeight:e.laneHeight,roadPadding:e.roadPadding,medianHeight:e.medianHeight,lanesDown:e.lanesDown,lanesUp:e.lanesUp,roadTotalHeight:_,roadY:T,directionDown:e.directionDown,directionUp:e.directionUp}}_computeSegments(){const e=this.metrics,s=this.config.segmentIntervalMeters,t=Math.ceil(e.effectiveStartM/s)*s,i=[];for(let a=t;a<=e.effectiveEndM;a+=s){const n=(a-e.viewOffsetMeters)/e.visibleMeters*e.canvasWidthPx;i.push({label:S(a),meters:a,x:n})}return i}_resize(){if(this.metrics=this._computeMetrics(),!this.metrics)return;const e=this.metrics.effectiveStartM,s=Math.max(e,this.metrics.effectiveEndM-this.metrics.visibleMeters);this.viewOffsetMeters=Math.max(e,Math.min(this.viewOffsetMeters,s)),this.metrics.viewOffsetMeters=this.viewOffsetMeters;const t=this.metrics,i=this.dpr;this.canvas.width=t.canvasWidthPx*i,this.canvas.height=t.canvasHeightPx*i,this.canvas.style.width=t.canvasWidthPx+"px",this.canvas.style.height=t.canvasHeightPx+"px",this.ctx.setTransform(i,0,0,i,0,0)}_doRender(){if(this.renderPending=!1,this.destroyed||!this.metrics)return;const e=this.metrics,s=this.ctx,t=e.canvasWidthPx,i=e.canvasHeightPx;s.clearRect(0,0,t,i),this._drawCanvasBg(s,t,i),this._drawRoad(s,t,i,e),this._drawTrafficFlowColors(s,t,e),this._drawMedian(s,t,e),this._drawLaneLines(s,t,e),this._drawPileMarkers(s,t,e),this._drawLaneLabels(s,e),this._drawVehicles(s,t,e)}_drawEmptyRoad(){if(!this.metrics)return;const e=this.metrics,s=this.ctx,t=e.canvasWidthPx,i=e.canvasHeightPx;s.clearRect(0,0,t,i),this._drawCanvasBg(s,t,i),this._drawRoad(s,t,i,e),this._drawMedian(s,t,e),this._drawLaneLines(s,t,e),this._drawPileMarkers(s,t,e),this._drawLaneLabels(s,e)}_drawCanvasBg(e,s,t){e.fillStyle=this.config.canvasBg,e.fillRect(0,0,s,t)}_drawRoad(e,s,t,i){const a=i.roadY,n=i.roadPadding+i.lanesUp*i.laneHeight,r=i.roadY+n+i.medianHeight,o=i.roadPadding+i.lanesDown*i.laneHeight,d=this._getRoadBgImage();d?e.drawImage(d,0,i.roadY,s,i.roadTotalHeight):(e.fillStyle=this.config.roadBg,e.fillRect(0,i.roadY,s,i.roadTotalHeight)),e.fillStyle=this.config.roadShoulder,e.fillRect(0,a,s,i.roadPadding),e.fillRect(0,r+o-i.roadPadding,s,i.roadPadding)}_drawMedian(e,s,t){const i=t.roadPadding+t.lanesUp*t.laneHeight,a=t.roadY+i;e.fillStyle=this.config.medianBg,e.fillRect(0,a,s,t.medianHeight);const n=this.config.medianLineColor,r=2,o=3,d=a+t.medianHeight/2;e.strokeStyle=n,e.lineWidth=r,e.beginPath(),e.moveTo(0,d-o/2-r/2),e.lineTo(s,d-o/2-r/2),e.stroke(),e.beginPath(),e.moveTo(0,d+o/2+r/2),e.lineTo(s,d+o/2+r/2),e.stroke()}_drawLaneLines(e,s,t){const i=t.roadY+t.roadPadding,a=t.lanesUp*t.laneHeight,n=t.roadY+t.roadPadding+a+t.medianHeight+t.roadPadding;e.strokeStyle=this.config.laneLineColor,e.lineWidth=1;const d=[10,8];for(let c=1;c<t.lanesUp;c++){const f=i+c*t.laneHeight;this._drawDashedLine(e,0,f,s,f,d)}for(let c=1;c<t.lanesDown;c++){const f=n+c*t.laneHeight;this._drawDashedLine(e,0,f,s,f,d)}}_drawDashedLine(e,s,t,i,a,n){const r=i-s,o=a-t,d=Math.sqrt(r*r+o*o),c=n[0],f=n[1],p=c+f;let v=0;for(;v<d;){const M=v,_=Math.min(v+c,d),u=M/d,w=_/d;e.beginPath(),e.moveTo(s+r*u,t+o*u),e.lineTo(s+r*w,t+o*w),e.stroke(),v+=p}}_drawTrafficFlowColors(e,s,t){if(this.cachedTrafficFlows.length===0)return;const i=t.roadY+t.roadPadding,a=t.lanesUp*t.laneHeight,n=t.roadY+t.roadPadding+a+t.medianHeight,r=t.roadPadding+t.lanesDown*t.laneHeight;for(let o=0;o<this.cachedTrafficFlows.length;o++){const d=this.cachedTrafficFlows[o],c=m(d.startPile),f=m(d.endPile);if(f<=c)continue;const p=Math.max(c,t.effectiveStartM),v=Math.min(f,t.effectiveEndM);if(v<=p)continue;const M=(p-t.viewOffsetMeters)/t.visibleMeters*s,_=(v-t.viewOffsetMeters)/t.visibleMeters*s,u=typeof d.status=="string"?parseInt(d.status,10):d.status,w=this._getStatusColor(u);if(!w)continue;const T=d.direction===this.config.directionUp,L=d.direction===this.config.directionDown;e.fillStyle=w,T?e.fillRect(M,i,_-M,a):L&&e.fillRect(M,n,_-M,r)}}_getStatusColor(e){return this.statusColorMap.get(e)}_drawPileMarkers(e,s,t){const i=this._computeSegments();e.font='9px "JetBrains Mono", monospace',e.fillStyle=this.config.markerColor;for(let a=0;a<i.length;a++){const n=i[a],r=n.x;r>=0&&r<=s&&(e.fillStyle=this.config.markerColor,e.fillRect(r,t.roadY-6,1,5),e.fillStyle=this.config.markerColor,e.textAlign="center",e.fillText(n.label,r,t.roadY-9))}e.textAlign="start"}_drawLaneLabels(e,s){const t=s.roadPadding+s.lanesDown*s.laneHeight,i=s.roadY+t+s.medianHeight;e.font='8px "JetBrains Mono", monospace',e.fillStyle=this.config.laneLabelColor;const a=s.roadY+t/2+3;e.fillText("上行",6,a);const n=i+s.roadPadding+s.lanesUp*s.laneHeight/2+3;e.fillText("下行",6,n)}_drawVehicles(e,s,t){if(this.cachedVehicles.length===0)return;const i=this.cachedVehicles,a=t.visibleMeters>0?s/t.visibleMeters:0;for(let n=0;n<i.length;n++){const r=i[n],o=m(r.position),d=t.viewOffsetMeters+t.visibleMeters;if(o<t.viewOffsetMeters-50||o>d+50)continue;const f=r.direction===this.config.directionUp?"up":"down",p=r.lane??1,v=f==="down"?t.lanesDown:t.lanesUp,M=Math.max(1,Math.min(p,v)),_=this._computeLaneY(t,f,M),u=(o-t.viewOffsetMeters)*a,w=r.carColor||this.config.defaultCarColor,T=r.carSvgUrl||this.config.carSvgUrl||null;this._drawSingleCar(e,u,_,w,r,T)}}_computeLaneY(e,s,t){if(s==="up"){const i=e.roadY+e.roadPadding,a=t-1;return i+(e.lanesUp-1-a)*e.laneHeight+e.laneHeight/2}else{const i=e.roadPadding+e.lanesUp*e.laneHeight,a=e.roadY+i+e.medianHeight+e.roadPadding,n=t-1;return a+n*e.laneHeight+e.laneHeight/2}}_drawSingleCar(e,s,t,i,a,n){const r=this.config.carLength,o=this.config.carWidth;if(e.save(),e.translate(s,t),a.direction===this.config.directionUp&&e.scale(-1,1),n){const _=this._loadSvgImage(n);if(_){e.drawImage(_,-r/2,-o/2,r,o),e.restore(),this._drawCarLabels(e,s,t,o,i,a);return}}const d=this._hexToRgb(i),c=this._rgbToHex(Math.floor(d[0]*.6),Math.floor(d[1]*.6),Math.floor(d[2]*.6));e.fillStyle="rgba(0,0,0,0.25)",this._drawCarPath(e,1.5,1.5,r,o),e.fill(),e.fillStyle=i,this._drawCarPath(e,0,0,r,o),e.fill(),e.fillStyle=c,this._drawCarPath(e,0,0,r*.45,o*.7),e.fill(),e.fillStyle="rgba(150,200,255,0.5)";const f=r*.12,p=o*.6,v=-r*.18;this._drawRoundRect(e,v,-p/2,f,p,2),e.fillStyle="rgba(150,200,255,0.35)";const M=r*.12;this._drawRoundRect(e,M,-p/2,f*.8,p,2),e.fillStyle="rgba(255,255,200,0.8)",e.beginPath(),e.ellipse(-r/2+2,-o/2+2.5,2.5,1.8,0,0,Math.PI*2),e.fill(),e.beginPath(),e.ellipse(-r/2+2,o/2-2.5,2.5,1.8,0,0,Math.PI*2),e.fill(),e.fillStyle="rgba(255,30,30,0.8)",e.beginPath(),e.ellipse(r/2-2,-o/2+2.5,2,1.5,0,0,Math.PI*2),e.fill(),e.beginPath(),e.ellipse(r/2-2,o/2-2.5,2,1.5,0,0,Math.PI*2),e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=.8,this._drawCarPath(e,0,0,r,o),e.stroke(),e.restore(),this._drawCarLabels(e,s,t,o,i,a)}_drawCarLabels(e,s,t,i,a,n){if(this.config.showCarSpeed&&n.speed!=null){const r=Math.abs(n.speed);e.font='bold 7px "JetBrains Mono", monospace',e.fillStyle="rgba(255,255,255,0.7)",e.textAlign="center",e.fillText(r.toFixed(0),s,t-i/2-4)}this.config.showCarId&&(e.font="6px sans-serif",e.fillStyle=a,e.fillText("#"+String(n.id),s,t+i/2+8)),e.textAlign="start"}_loadSvgImage(e){return this._loadImage(e,this.svgImageCache)}_getRoadBgImage(){const e=this.config.roadBgImage;if(!e)return null;if(this.roadBgImage)return this.roadBgImage;if(this.roadBgImageLoading)return null;this.roadBgImageLoading=!0;const s=new Image;return s.onload=()=>{this.roadBgImage=s,this.roadBgImageLoading=!1,!this.destroyed&&!this.renderPending&&(this.renderPending=!0,requestAnimationFrame(()=>this._doRender()))},s.onerror=()=>{this.roadBgImageLoading=!1,console.warn("[RoadTrafficCore] 道路底图加载失败")},s.src=this._resolveSvgSrc(e),null}_loadImage(e,s){const t=s.get(e);if(t)return t;const i=this._resolveSvgSrc(e),a=new Image;return a.onload=()=>{s.set(e,a),!this.destroyed&&!this.renderPending&&(this.renderPending=!0,requestAnimationFrame(()=>this._doRender()))},a.onerror=()=>{console.warn("[RoadTrafficCore] SVG 图片加载失败:",i.substring(0,80)+"...")},a.src=i,null}_resolveSvgSrc(e){const s=e.trim();return s.startsWith("<svg")||s.startsWith("<?xml")?"data:image/svg+xml,"+encodeURIComponent(s):s}_drawCarPath(e,s,t,i,a){const n=i/2,r=a/2,o=Math.min(n*.4,5),d=Math.min(n*.25,3);e.beginPath(),e.moveTo(s-n+o,t-r),e.lineTo(s+n-d,t-r),e.quadraticCurveTo(s+n,t-r,s+n,t-r+d),e.lineTo(s+n,t+r-d),e.quadraticCurveTo(s+n,t+r,s+n-d,t+r),e.lineTo(s-n+o,t+r),e.quadraticCurveTo(s-n,t+r,s-n,t+r-o),e.lineTo(s-n,t-r+o),e.quadraticCurveTo(s-n,t-r,s-n+o,t-r),e.closePath()}_drawRoundRect(e,s,t,i,a,n){e.beginPath(),e.moveTo(s+n,t),e.lineTo(s+i-n,t),e.quadraticCurveTo(s+i,t,s+i,t+n),e.lineTo(s+i,t+a-n),e.quadraticCurveTo(s+i,t+a,s+i-n,t+a),e.lineTo(s+n,t+a),e.quadraticCurveTo(s,t+a,s,t+a-n),e.lineTo(s,t+n),e.quadraticCurveTo(s,t,s+n,t),e.closePath(),e.fill()}_hexToRgb(e){return e=e.replace("#",""),[parseInt(e.substring(0,2),16)||0,parseInt(e.substring(2,4),16)||0,parseInt(e.substring(4,6),16)||0]}_rgbToHex(e,s,t){return"#"+((1<<24)+(e<<16)+(s<<8)+t).toString(16).slice(1)}}const x=g.defineComponent({__name:"RoadTrafficViewer",props:{config:{},vehicles:{},trafficFlows:{}},emits:["ready"],setup(l,{expose:e,emit:s}){const t=l,i=s,a=g.ref(null),n=g.shallowRef(null),r=g.computed(()=>{const o={position:"relative",overflow:"hidden"},d=t.config.canvasWidth,c=t.config.canvasHeight;return d!==void 0?o.width=typeof d=="number"?`${d}px`:d:o.width="100%",c!==void 0&&(o.height=typeof c=="number"?`${c}px`:c),o});return g.onMounted(()=>{if(!a.value){console.warn("[RoadTrafficViewer] 容器 DOM 未找到");return}const o=new P(a.value,t.config);n.value=o,o.render(),t.vehicles&&t.vehicles.length>0&&o.updateVehicles(t.vehicles),t.trafficFlows&&t.trafficFlows.length>0&&o.updateTrafficFlows(t.trafficFlows),i("ready",o)}),g.onUnmounted(()=>{n.value&&(n.value.destroy(),n.value=null)}),g.watch(()=>t.vehicles,o=>{n.value&&o&&n.value.updateVehicles(o)},{deep:!0}),g.watch(()=>t.trafficFlows,o=>{n.value&&n.value.updateTrafficFlows(o??[])},{deep:!0}),e({core:n,containerRef:a}),(o,d)=>(g.openBlock(),g.createElementBlock("div",{ref_key:"containerRef",ref:a,class:"road-traffic-viewer",style:g.normalizeStyle(r.value)},null,4))}}),b=(l,e)=>{const s=l.__vccOpts||l;for(const[t,i]of e)s[t]=i;return s},ee=b(x,[["__scopeId","data-v-c2f245be"]]),te={name:"RoadTrafficViewerV2",props:{config:{type:Object,required:!0},vehicles:{type:Array,default:function(){return[]}},trafficFlows:{type:Array,default:function(){return[]}}},emits:["ready"],data(){return{coreInstance:null}},computed:{containerStyle(){var l={position:"relative",overflow:"hidden"},e=this.config.canvasWidth,s=this.config.canvasHeight;return e!==void 0?l.width=typeof e=="number"?e+"px":e:l.width="100%",s!==void 0&&(l.height=typeof s=="number"?s+"px":s),l}},watch:{vehicles:{handler:function(l){this.coreInstance&&l&&this.coreInstance.updateVehicles(l)},deep:!0},trafficFlows:{handler:function(l){this.coreInstance&&this.coreInstance.updateTrafficFlows(l||[])},deep:!0}},mounted(){var l=this.$refs.container;if(!l){console.warn("[RoadTrafficViewerV2] 容器 DOM 未找到");return}var e=new P(l,this.config);this.coreInstance=e,e.render(),this.vehicles&&this.vehicles.length>0&&e.updateVehicles(this.vehicles),this.trafficFlows&&this.trafficFlows.length>0&&e.updateTrafficFlows(this.trafficFlows),this.$emit("ready",e)},beforeDestroy(){this.coreInstance&&(this.coreInstance.destroy(),this.coreInstance=null)}};function se(l,e,s,t,i,a){return g.openBlock(),g.createElementBlock("div",{ref:"container",class:"road-traffic-viewer-v2",style:g.normalizeStyle(a.containerStyle)},null,4)}const ie=b(te,[["render",se],["__scopeId","data-v-51c2f40a"]]);exports.DEFAULT_TRAFFIC_STATUS_COLORS=C;exports.RoadTrafficCore=P;exports.RoadTrafficViewer=ee;exports.RoadTrafficViewerV2=ie;exports.formatPile=S;exports.formatPileShort=U;exports.parsePile=m;