| 12 |
- import{d as oe,aC as Te,Q as Ye,S as Ee,h as q,f as F,c as H,o as He,C as he,j as Le,r as ge,bc as fe,cL as Ie,Z as A,a1 as Q,a7 as J,bn as G,T as _,bi as $e,n as R,a6 as Be,$ as Ze,a0 as se,a9 as ze,ay as Xe,cM as Fe,cN as Ae,a8 as U,c2 as Oe,c3 as Ne,aQ as je,at as Ve,bo as pe,bh as We}from"./index-a8341fa1.js";import{a as Ge,d as u}from"./dayjs-919e6097.js";import{G as Ue,x as qe,y as Qe,z as Je}from"./gb28181-0e98f3aa.js";import{V as Ke}from"./jb4-7b5b6ba3.js";const et={initTime:{type:Ge.Dayjs,default:""},timeRange:{type:Object,default(){return{}}},initZoomIndex:{type:Number,default:5},showCenterLine:{type:Boolean,default:!0},lineHeightRatio:{type:Object,default(){return{date:.3,time:.15,none:.1,hover:.35}}},showHoverTime:{type:Boolean,default:!0},hoverTimeFormat:{type:Function},timeSegments:{type:Array,default:()=>[]},enableZoom:{type:Boolean,default:!0},enableDrag:{type:Boolean,default:!0},maxClickDistance:{type:Number,default:3},roundWidthTimeSegments:{type:Boolean,default:!0},customShowTime:{type:Function},showDateAtZero:{type:Boolean,default:!0},extendZOOM:{type:Array,default(){return[]}},formatTime:{type:Function}},B=60*60*1e3,ie=30*1e3,tt=oe({__name:"index",props:et,emits:["timeChange","mousedown","mouseup","dragTimeChange","click_timeline"],setup(d,{expose:M,emit:y}){const{t:b}=Te(),{getDarkMode:D}=Ye(Ee());q(()=>_(D),()=>le());const f=F(()=>D.value==="dark"),n=d,x=y,S=H();He(()=>{if(P(),N(),n.timeSegments.length>0){let t=1/0,a=-1/0;n.timeSegments.forEach(s=>{t=Math.min(t,s.StartTime.getTime()),a=Math.max(a,s.EndTime.getTime())});const i=(t+a)/2;e.startTimestamp=i-l.value/2}else{const t=n.initTime?ue(n.initTime):Date.now();e.startTimestamp=t-l.value/2}W(),v(),he(()=>{ne("初始")}),window.addEventListener("mouseup",I,!0),S.value&&S.value.addEventListener("wheel",z,{passive:!1})}),Le(()=>{window.removeEventListener("mouseup",I,!0),S.value&&S.value.removeEventListener("wheel",z),document.body.style.userSelect=""});const L=H(),e=ge({ctx:{},width:0,height:0,zoomLevel:50,currentTime:0,startTimestamp:0,mousedown:!1,mousedownX:0,mousedownY:0,mousedownCacheStartTimestamp:0,mousemoveX:-1,watchTimeList:[]}),g=12*B,Z=24*B,K=F(()=>{const t=ie/g,a=Z/g,i=e.zoomLevel/100;return Math.exp(Math.log(t)+(Math.log(a)-Math.log(t))*(1-i))}),l=F(()=>g*K.value),O=()=>{if(n.timeSegments.length===0)return{min:0,max:100};let t=1/0,a=-1/0;n.timeSegments.forEach(p=>{t=Math.min(t,p.StartTime.getTime()),a=Math.max(a,p.EndTime.getTime())});const s=(a-t)/g,m=1-(Math.log(s)-Math.log(ie/g))/(Math.log(Z/g)-Math.log(ie/g));return{min:Math.max(0,Math.floor(m*100)),max:100}},z=t=>{if(!n.enableZoom)return;t.preventDefault();const a=1.2,i=t.deltaY*a,{min:s,max:m}=O(),c=e.zoomLevel;let r;if(i>0?r=Math.max(s,c-Math.abs(i)/30):r=Math.min(m,c+Math.abs(i)/30),r===c)return;const p=V(t)[0],Y=e.startTimestamp+p/e.width*l.value;e.zoomLevel=r;const E=e.startTimestamp+p/e.width*l.value;e.startTimestamp+=Y-E,W(),C(e.width,e.height),v(),e.currentTime=e.startTimestamp+l.value/2,ne()},N=()=>{const{min:t}=O(),a=50+15*Math.log(g/(60*1e3));n.timeSegments.length>0?e.zoomLevel=t:e.zoomLevel=a},P=()=>{let{width:t,height:a}=S.value.getBoundingClientRect();e.width=t,e.height=a,L.value.width=t,L.value.height=a,e.ctx=L.value.getContext("2d")},v=()=>{h(),o(),te(),e.currentTime=e.startTimestamp+l.value/2,x("timeChange",e.currentTime),ee()},ee=()=>{e.watchTimeList.forEach(t=>{if(t.time<e.startTimestamp||t.time>e.startTimestamp+l.value)t.callback(-1,-1);else{let a=(t.time-e.startTimestamp)*(e.width/l.value),i=0,{left:s,top:m}=L.value.getBoundingClientRect();i=m,t.callback(a+s,i)}})},te=()=>{if(!n.showCenterLine)return;e.ctx.beginPath();let t=e.width/2;ae({x1:t,y1:0,x2:t,y2:e.height,lineWidth:2,color:f.value?"#fff":"#2c2c2c"})},o=()=>{const t=e.ctx;t.beginPath();const a=l.value,i=60;let s,m;const r=a/e.width*i;r<=5*1e3?(s=5*1e3,m="mm:ss"):r<=10*1e3?(s=10*1e3,m="mm:ss"):r<=30*1e3?(s=30*1e3,m="mm:ss"):r<=60*1e3?(s=60*1e3,m="HH:mm"):r<=5*60*1e3?(s=5*60*1e3,m="HH:mm"):r<=15*60*1e3?(s=15*60*1e3,m="HH:mm"):r<=30*60*1e3?(s=30*60*1e3,m="HH:mm"):r<=B?(s=B,m="HH:mm"):(s=Math.ceil(r/B)*B,m="MM-DD HH:mm");const p=Math.floor(e.startTimestamp/s)*s,Y=e.startTimestamp+l.value;for(let E=p;E<=Y;E+=s){const X=(E-e.startTimestamp)/l.value*e.width;if(X>=0&&X<=e.width){t.font="12px Arial",t.fillStyle=f.value?"#fff":"#515151",t.strokeStyle=f.value?"#fff":"#515151";const ce=e.height*(n.lineHeightRatio.time??.2);ae({x1:X,y1:0,x2:X,y2:ce,lineWidth:1,color:f.value?"#fff":"#515151"});const de=u(E).format(m),ke=t.measureText(de).width;t.fillText(de,X-ke/2,ce+15)}}},h=(t=()=>{},a=!1)=>{const i=e.width/l.value;n.timeSegments.forEach(s=>{if(s.StartTime.getTime()<=e.startTimestamp+l.value){let m=s.EndTime.getTime()>=e.startTimestamp;e.ctx.beginPath();let c=(s.StartTime.getTime()-e.startTimestamp)*i,r;c<0?(c=0,r=m?(s.EndTime.getTime()-e.startTimestamp)*i:1):r=m?(s.EndTime.getTime()-s.StartTime.getTime())*i:1;let p=.7,Y=.9;n.roundWidthTimeSegments&&(c=Math.round(c),r=Math.round(r)),r=Math.max(1,r),a?e.ctx.rect(c,e.height*p,r,e.height*(Y-p)):(e.ctx.fillStyle=f.value?"#BB86FC":"#d0a3ff",e.ctx.fillRect(c,e.height*p,r,e.height*(Y-p))),t(s)}})},w=t=>{t.stopPropagation(),t.preventDefault(),document.body.style.userSelect="none",k(t)},k=t=>{let a=V(t);e.mousedownX=a[0],e.mousedownY=a[1],e.mousedown=!0,e.mousedownCacheStartTimestamp=e.startTimestamp,x("mousedown",t)},I=t=>{t.stopPropagation(),t.preventDefault(),document.body.style.userSelect="",$(t)},$=t=>{let a=V(t);const i=()=>{e.mousedown=!1,e.mousedownX=0,e.mousedownY=0,e.mousedownCacheStartTimestamp=0};if(Math.abs(a[0]-e.mousedownX)<=n.maxClickDistance&&Math.abs(a[1]-e.mousedownY)<=n.maxClickDistance){i(),xe(a[0]);return}if(e.mousedown&&n.enableDrag){const s=e.startTimestamp+l.value/2,m=re(s);m&&m.length>0?(i(),x("dragTimeChange",s,m),fe.info(`${b("routes.components.跳转至")}: ${u(s).format("YYYY-MM-DD HH:mm:ss")}`)):(e.startTimestamp=e.mousedownCacheStartTimestamp,C(e.width,e.height),v(),i())}else i();x("mouseup",t)},j=t=>{ve(t)},ve=t=>{let a=V(t)[0];e.mousemoveX=a,e.mousedown&&n.enableDrag?ye(a):n.showHoverTime&&me(a)},we=()=>{e.mousemoveX=-1},ye=t=>{if(!n.enableDrag)return;const a=e.width/l.value;let i=t-e.mousedownX,s=l.value/2,m=e.mousedownCacheStartTimestamp-Math.round(i/a),c=m+s;n.timeSegments.some(p=>{const Y=p.StartTime.getTime(),E=p.EndTime.getTime();return c>=Y&&c<=E})&&(T.value.start&&c<T.value.start&&(m=T.value.start-s),T.value.end&&c>T.value.end&&(m=T.value.end-s),e.startTimestamp=m,C(e.width,e.height),v())},me=(t,a=!1)=>{const i=e.width/l.value;let s=e.startTimestamp+t/i;a||(C(e.width,e.height),v());let m=e.height*(n.lineHeightRatio.hover??.3);ae({x1:t,y1:0,x2:t,y2:m,lineWidth:1,color:f.value?"#fff":"black"}),e.ctx.fillStyle=f.value?"#fff":"black";let c=n.hoverTimeFormat?n.hoverTimeFormat(s):u(s).format("YYYY-MM-DD HH:mm:ss"),r=e.ctx.measureText(c).width;e.ctx.fillText(c,t-r/2,m+20)},Se=()=>{C(e.width,e.height),v()},re=t=>{const a=[];for(let i of n.timeSegments){const{StartTime:s,EndTime:m}=i;t>=s.getTime()&&t<=m.getTime()&&a.push(i)}return a},xe=t=>{const a=e.width/l.value,i=e.startTimestamp+t/a,s=re(i);s&&s.length>0&&(Ce(i,s),fe.info(`${b("routes.components.跳转至")}: ${u(i).format("YYYY-MM-DD HH:mm:ss")}`))},V=t=>{if(!S.value||!t)return[0,0];let{left:a,top:i}=S.value.getBoundingClientRect();return[t.clientX-a,t.clientY-i]},C=(t,a)=>{e.ctx.clearRect(0,0,t,a)},ae=({x1:t,y1:a,x2:i,y2:s,lineWidth:m=1,color:c="#fff"})=>{const r=e.ctx;r.beginPath(),r.strokeStyle=c,r.lineWidth=m,r.moveTo(t,a),r.lineTo(i,s),r.stroke()},le=()=>{he(()=>{if(C(e.width,e.height),Pe(),P(),N(),n.timeSegments.length>0){let t=1/0,a=-1/0;n.timeSegments.forEach(s=>{t=Math.min(t,s.StartTime.getTime()),a=Math.max(a,s.EndTime.getTime())});const i=(t+a)/2;e.startTimestamp=i-l.value/2}else{const t=n.initTime?ue(n.initTime):Date.now();e.startTimestamp=t-l.value/2}W(),v(),ne("重新渲染")})},Me=()=>{P(),v()};Ie(document.body,()=>{Me()});const Pe=()=>{e.width=0,e.height=0,e.ctx=null,e.zoomLevel=50,e.currentTime=0,e.startTimestamp=0,e.mousedown=!1,e.mousedownX=0,e.mousedownCacheStartTimestamp=0},_e=t=>{if(e.mousedown)return;let a=typeof t=="number"?t:new Date(t).getTime();e.startTimestamp=a-l.value/2,W(),C(e.width,e.height),v(),e.mousemoveX!==-1&&me(e.mousemoveX,!0)},Re=t=>{e.zoomLevel=t>=0&&t<ZOOM.length?t:5,C(e.width,e.height),e.startTimestamp=e.currentTime-l.value/2,v()},be=(t,a,i)=>{!t||!a||e.watchTimeList.push({time:typeof t=="number"?t:new Date(t).getTime(),callback:a,windowTimeLineIndex:typeof i=="number"?i-1:-1})},Ce=(t,a=[])=>{x("click_timeline",t,a)},De=()=>{if(!T.value.start||!T.value.end)return;const t=T.value.end-T.value.start,a=t*.05,i=12*B/(t+2*a);e.zoomLevel=25*Math.log(i*Math.exp(50/25)),e.startTimestamp=T.value.start-a,C(e.width,e.height),v()},ue=t=>new Date(u(t).format("YYYY-MM-DD HH:mm:ss")).getTime(),T=F(()=>{let t={start:0,end:0};const a=n.timeRange.start;a&&(t.start=typeof a=="number"?a:new Date(a).getTime());const i=n.timeRange.end;return i&&(t.end=typeof i=="number"?i:new Date(i).getTime()),t}),W=()=>{let t=l.value/2,a=e.startTimestamp+t;T.value.start&&a<T.value.start&&(e.startTimestamp=T.value.start-t),T.value.end&&a>T.value.end&&(e.startTimestamp=T.value.end-t)},ne=(t="当前")=>{e.width&&(`${t}`,u(e.startTimestamp).format("YYYY-MM-DD HH:mm:ss"),u(e.startTimestamp+l.value).format("YYYY-MM-DD HH:mm:ss"),`${(l.value/1e3).toFixed(1)}`,e.zoomLevel.toFixed(1),e.width)};return M({reRender:le,setTime:_e,setZoom:Re,watchTime:be,fitTimeRange:De}),(t,a)=>(A(),Q("div",{class:"timeRuleContainer w-full h-full cursor-pointer",ref_key:"timeRuleContainer",ref:S,onMousedown:G(w,["stop","prevent"]),onMouseout:G(Se,["stop"]),onMousemove:G(j,["stop"]),onMouseleave:G(we,["stop"])},[J("canvas",{ref_key:"canvasRef",ref:L},null,512)],544))}});const at=$e({id:"record-store",state:()=>({timeRange:[u().subtract(2,"day"),u()],timeRangeMP4:[u().subtract(2,"day"),u()],currentChannel:{parentId:"",deviceId:"",key:""},currentStreamPath:""}),getters:{getCurrentChannel(){return this.currentChannel},getTimeRange(){return this.timeRange},getTimeRangeMP4(){return this.timeRangeMP4},getCurrentStreamPath(){return this.currentStreamPath}},actions:{setTimeRange(d){this.timeRange=d},setCurrentChannel(d){this.currentChannel=d},setTimeRangeMP4(d){this.timeRangeMP4=d},setCurrentStreamPath(d){this.currentStreamPath=d}}}),nt={class:"w-full max-w-1200px m-auto pt-10px"},st={key:0,class:"placeholder"},it={class:"tip"},ot={class:"font-bold font-size-18px"},mt={key:2,class:"text-center mt-10px flex justify-center items-center gap-4"},rt=oe({name:"Record"}),lt=oe({...rt,props:{data:{type:Array,default:[]},vodType:{type:String,default:"mp4"},streamPath:{type:String,default:""},endTime:String,showDatePicker:{type:Boolean,default:!0}},setup(d){const{t:M}=Te(),y=d,b=at(),D=o=>o&&(o<=u(b.getTimeRange[0]).add(-1,"day")||o>b.getTimeRange[1]),f=H(),n=ge({initTime:u(),currentTime:u(),timeSegments:[],initZoomIndex:0,inTimeSegments:!1}),x=[],S=(o,h)=>{n.currentTime=u(o),h?Z(o):n.inTimeSegments=!1},L=o=>{o&&f.value.setTime(o),n.timeSegments.length?Z(o.toDate().getTime()):n.inTimeSegments=!1},e=(o,h)=>{n.currentTime=u(o),h?Z(o):n.inTimeSegments=!1},g=H("");function Z(o){Fe(g.value),l.value=o,n.inTimeSegments=!0,Ae(v.value,o/1e3>>0)}const K=o=>{const h=o.sort((I,$)=>Date.parse(I.startTime)-Date.parse($.startTime)),w=[];let k;return h.forEach(I=>{const $=new Date(I.startTime),j=new Date(I.endTime);k?.EndTime.getTime()==$.getTime()?k.EndTime=j:(k&&x.push({StartTime:k.EndTime,EndTime:$}),k={StartTime:$,EndTime:j},w.push(k))}),w},l=H(),O=H("ws-flv"),z=H(1),N=[{label:"0.5x",value:.5},{label:"1x",value:1},{label:"2x",value:2},{label:"4x",value:4}],P=H(!1),v=F(()=>{if(!y.streamPath||!l.value)return"";const o=`${Ue(!0)}${y.streamPath}`;return g.value=o,`${o}?start=${l.value/1e3>>0}&end=${y.endTime}`});q(()=>y.data,()=>{if(y.data?.length){n.timeSegments=K(y.data);const o=n.timeSegments[0].StartTime;n.currentTime=u(o),n.initTime=u(o),l.value=o.getTime()}else n.currentTime=u(),n.initTime=u(),n.timeSegments=[];f.value?.reRender()},{immediate:!0}),q(()=>_(n.inTimeSegments),o=>{}),q(()=>z.value,async o=>{if(y.data?.length&&g.value)try{await Je(g.value,o)}catch(h){console.error("设置倍速失败:",h)}});const ee=async()=>{if(g.value)try{P.value?await qe(g.value):await Qe(g.value),P.value=!P.value}catch(o){console.error("暂停/恢复失败:",o)}};function te(o){let h=o;for(const w of x)if(h>=w.StartTime.getTime())h+=w.EndTime.getTime()-w.StartTime.getTime();else break;return u(h)}return(o,h)=>(A(),Q("div",nt,[d.data.length?(A(),Ze(Ke,{key:1,streamPath:v.value,format:O.value,videoShadow:!0,startTime:l.value,onPostion:h[0]||(h[0]=w=>f.value.setTime(n.currentTime=te(w)))},null,8,["streamPath","format","startTime"])):(A(),Q("div",st,[J("div",it,[R(_(U),{icon:"pepicons-pop:television-play-off",size:70}),J("p",ot,Be(_(M)("routes.record.当前无可播放的录像资源")),1)])])),d.showDatePicker?(A(),Q("div",mt,[R(_(Oe),{value:n.currentTime,"onUpdate:value":h[1]||(h[1]=w=>n.currentTime=w),showTime:"",onChange:L,bordered:!1,allowClear:!1,"disabled-date":D,class:"cursor-pointer"},{suffixIcon:se(()=>[R(_(U),{icon:"line-md:edit"})]),_:1},8,["value"]),R(_(Ne),{value:z.value,"onUpdate:value":h[2]||(h[2]=w=>z.value=w),style:{width:"100px"},options:N,bordered:!1},{suffixIcon:se(()=>[R(_(U),{icon:"bi:speedometer2"})]),_:1},8,["value"]),R(_(je),{onClick:ee,type:P.value?"primary":"default",danger:!P.value},{icon:se(()=>[R(_(U),{icon:P.value?"mdi:play":"mdi:pause"},null,8,["icon"])]),_:1},8,["type","danger"])])):ze("",!0),J("div",{class:Xe(["h-40px w-96% m-auto",{"mt-10px":!d.showDatePicker}])},[R(tt,{ref_key:"timeRuleRef",ref:f,"init-zoom-index":n.initZoomIndex,initTime:n.initTime,timeSegments:n.timeSegments,enableZoom:!0,onDragTimeChange:S,onClick_timeline:e},null,8,["init-zoom-index","initTime","timeSegments"])],2)]))}});const ut=Ve(lt,[["__scopeId","data-v-09f0eec7"]]),ct=(d,M="YYYY-MM-DD HH:mm:ss")=>new Date(u(d).format(M)).getTime(),gt=async({channel:d,row:M})=>{const{parentId:y,deviceId:b,key:D}=d,{endTime:f}=M,n=`${y}/${b}`;pe({content:()=>R(ut,{data:[M],streamPath:n,key:D,showDatePicker:!1,endTime:`${ct(f)}`},null),modalConfig:{width:"100%",wrapClassName:"full-antdv-modal",destroyOnClose:!0,footer:null}})},pt=async({row:d})=>{const{streamPath:M,id:y,startTime:b,endTime:D}=d,f=`${We("mp4","/download")}/${M}.mp4?id=${y}`;pe({content:()=>R("video",{style:{width:"100%",height:"100%"},autoplay:!0,controls:!0,onError:n=>{const x=n.target,S=x.currentTime;x.load(),x.currentTime=S+1},src:f},null),modalConfig:{title:`${M} ${u(b).format("YYYY-MM-DD HH:mm:ss")}-${u(D).format("YYYY-MM-DD HH:mm:ss")}`,width:"800px",destroyOnClose:!0,footer:null}})};export{ut as V,tt as _,gt as a,pt as b,ct as d,at as u};
- //# sourceMappingURL=usePlay-5884af03.js.map
|
