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