2 lines
13 KiB
JavaScript
2 lines
13 KiB
JavaScript
var gt=Object.defineProperty,bt=Object.defineProperties;var Dt=Object.getOwnPropertyDescriptors;var Q=Object.getOwnPropertySymbols;var xt=Object.prototype.hasOwnProperty,St=Object.prototype.propertyIsEnumerable;var tt=(u,r,i)=>r in u?gt(u,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):u[r]=i,at=(u,r)=>{for(var i in r||(r={}))xt.call(r,i)&&tt(u,i,r[i]);if(Q)for(var i of Q(r))St.call(r,i)&&tt(u,i,r[i]);return u},et=(u,r)=>bt(u,Dt(r));var z=(u,r,i)=>new Promise((h,w)=>{var T=c=>{try{_(i.next(c))}catch(p){w(p)}},P=c=>{try{_(i.throw(c))}catch(p){w(p)}},_=c=>c.done?h(c.value):Promise.resolve(c.value).then(T,P);_((i=i.apply(u,r)).next())});import{b_ as v,au as b,S as U,cp as wt,bZ as M,an as m,D as Tt,ax as st,R as Yt,ac as It}from"./bootstrap-CW2RsBQq.js";import{m as zt,b9 as d,cf as A,aa as N,w as lt,v as At,aU as Ct,aX as kt,x as Lt,ad as V,b2 as R,j as s,bJ as o,u as l,ae as e,ab as Mt,ac as Nt,bp as y,aR as Rt,I as Ot,aT as ot,n as W,ca as nt}from"../jse/index-index-Cy8amzIl.js";import{a as it,b as Pt,c as rt,d as Ht}from"./index-DvZTxwJT.js";import{_ as Et}from"./AreaTree.vue_vue_type_script_setup_true_lang-DtzhyA0O.js";import{S as O}from"./index-DgcXOzO5.js";import{u as ct,_ as dt}from"./use-echarts-BU4Mem_i.js";import"./index-CXfyaNjj.js";const Bt={class:"traffic-dashboard"},Ut={class:"content-header mb-3"},Vt={class:"content-title"},Wt={class:"content-subtitle"},jt={class:"metric-content"},Gt={class:"metric-icon"},$t={class:"metric-info"},Ft={class:"metric-content"},Jt={class:"metric-icon"},Xt={class:"metric-info"},Zt={class:"metric-content"},qt={class:"metric-icon"},Kt={class:"metric-info"},Qt={class:"metric-content"},ta={class:"metric-icon"},aa={class:"metric-info"},ea={style:{display:"flex","align-items":"center",gap:"8px"}},sa={class:"analysis-list"},la={class:"analysis-item"},oa={class:"analysis-item__header"},na={class:"analysis-item__body"},ia={class:"analysis-item__value"},ra={class:"analysis-item__desc"},ca={class:"analysis-item"},da={class:"analysis-item__header"},ua={class:"analysis-item__body"},fa={class:"analysis-item__desc"},ya={key:1,class:"analysis-item__value analysis-item__value--muted"},ma={class:"analysis-item"},_a={class:"analysis-item__header"},va={class:"analysis-item__body"},ha={class:"analysis-item__value"},pa={class:"analysis-item__bar"},ga={class:"analysis-item__desc"},ba={class:"analysis-item"},Da={class:"analysis-item__header"},xa={class:"analysis-item__body"},Sa={class:"analysis-item__value"},wa={style:{display:"flex","align-items":"center",gap:"8px"}},Ta=zt({name:"OpsTraffic",__name:"index",setup(u){const r=d(),i=d(),h=d([]),w=d("全局总览"),T=d("");function P(t){var a,n;t&&t.id!==null&&t.id!==void 0?(i.value=t.id,h.value=((a=r.value)==null?void 0:a.getDescendantIds(t.id))||[t.id],w.value=((n=r.value)==null?void 0:n.getAreaPath(t.id))||t.areaName):(i.value=void 0,h.value=[],w.value="全局总览"),C()}const _=d(!0),c=d(!0),p=d(A()),Y=d([A().subtract(6,"day"),A()]);function j(t){return t?t>A().endOf("day")||t<A().subtract(30,"day").startOf("day"):!1}const g=d({totalIn:0,totalOut:0,currentOccupancy:0,areas:[],hourlyTrend:{hours:[],inData:[],outData:[]},yesterdayHourlyTrend:{hours:[],inData:[],outData:[]}}),D=d({dates:[],inData:[],outData:[],netData:[],totalIn:0,totalOut:0}),G=d(),$=d(),{renderEcharts:H}=ct(G),{renderEcharts:F}=ct($);function E(){const t=g.value.hourlyTrend;if(!t||t.hours.length===0)return{};const a=[{name:"进入",type:"line",smooth:!0,symbol:"circle",symbolSize:5,data:t.inData,lineStyle:{width:2.5,color:"#36cfc9"},itemStyle:{color:"#36cfc9"},areaStyle:{opacity:.12,color:{type:"linear",x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:"rgba(54, 207, 201, 0.3)"},{offset:1,color:"rgba(54, 207, 201, 0.02)"}]}}},{name:"离开",type:"line",smooth:!0,symbol:"circle",symbolSize:5,data:t.outData,lineStyle:{width:2.5,color:"#597ef7"},itemStyle:{color:"#597ef7"},areaStyle:{opacity:.12,color:{type:"linear",x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:"rgba(89, 126, 247, 0.3)"},{offset:1,color:"rgba(89, 126, 247, 0.02)"}]}}}];return{tooltip:{trigger:"axis"},legend:{data:["进入","离开"],top:"5%",textStyle:{color:"#595959",fontSize:11}},grid:{left:"3%",right:"4%",bottom:"3%",top:"15%",containLabel:!0},xAxis:{type:"category",boundaryGap:!1,data:t.hours,axisLine:{lineStyle:{color:"#d9d9d9"}},axisLabel:{color:"#8c8c8c",fontSize:11}},yAxis:{type:"value",name:"人次",nameTextStyle:{color:"#8c8c8c",fontSize:12},axisLine:{show:!1},axisLabel:{color:"#8c8c8c"},splitLine:{lineStyle:{color:"#f0f0f0",type:"dashed"}}},series:a}}function J(){const t=D.value;return{tooltip:{trigger:"axis",axisPointer:{type:"cross",label:{backgroundColor:"#6a7985"}}},legend:{data:["进入","离开"],top:"5%",textStyle:{color:"#595959"}},grid:{left:"3%",right:"4%",bottom:"3%",top:"15%",containLabel:!0},xAxis:{type:"category",boundaryGap:!1,data:t.dates,axisLine:{lineStyle:{color:"#d9d9d9"}},axisLabel:{color:"#8c8c8c"}},yAxis:{type:"value",name:"人次",nameTextStyle:{color:"#8c8c8c"},axisLine:{show:!1},axisLabel:{color:"#8c8c8c"},splitLine:{lineStyle:{color:"#f0f0f0",type:"dashed"}}},series:[{name:"进入",type:"line",smooth:!0,symbol:"circle",symbolSize:6,areaStyle:{opacity:.15,color:{type:"linear",x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:"rgba(54, 207, 201, 0.35)"},{offset:1,color:"rgba(54, 207, 201, 0.03)"}]}},data:t.inData,lineStyle:{width:2.5,color:"#36cfc9"},itemStyle:{color:"#36cfc9"}},{name:"离开",type:"line",smooth:!0,symbol:"circle",symbolSize:6,areaStyle:{opacity:.15,color:{type:"linear",x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:"rgba(89, 126, 247, 0.35)"},{offset:1,color:"rgba(89, 126, 247, 0.03)"}]}},data:t.outData,lineStyle:{width:2.5,color:"#597ef7"},itemStyle:{color:"#597ef7"}}]}}function ut(){return z(this,null,function*(){_.value=!0;try{const[t,a]=Y.value,[n,f]=yield Promise.all([it(),Pt({startDate:t.format("YYYY-MM-DD"),endDate:a.format("YYYY-MM-DD")})]);g.value=n,D.value=f,T.value="",c.value=!1,yield W(),H(E()),F(J())}catch(t){c.value=!1}finally{_.value=!1}})}function ft(t){return z(this,null,function*(){_.value=!0;try{const[a,n]=Y.value,[f,S]=yield Promise.all([rt(t),Ht({areaIds:t.join(","),startDate:a.format("YYYY-MM-DD"),endDate:n.format("YYYY-MM-DD")})]);g.value=f,D.value=S,T.value=f.message||"",c.value=!1,yield W(),H(E()),F(J())}catch(a){c.value=!1}finally{_.value=!1}})}function C(){return z(this,null,function*(){yield i.value&&h.value.length>0?ft(h.value):ut()})}function yt(){return z(this,null,function*(){try{const t=p.value.format("YYYY-MM-DD");let a;i.value&&h.value.length>0?a=yield rt(h.value,t):a=yield it(t),g.value=et(at({},g.value),{hourlyTrend:a.hourlyTrend,yesterdayHourlyTrend:a.yesterdayHourlyTrend}),yield W(),H(E())}catch(t){}})}function X(){return g.value.totalIn}function Z(){return g.value.totalOut}function mt(){const t=D.value;return!t.inData||t.inData.length<2?0:Number(t.inData[t.inData.length-2])||0}function _t(){const t=D.value;return!t.outData||t.outData.length<2?0:Number(t.outData[t.outData.length-2])||0}const q=N(()=>{const t=g.value.hourlyTrend;if(!t||t.hours.length===0)return{hour:"--",count:0};let a=0,n=0;return t.inData.forEach((f,S)=>{const L=Number(f)||0;L>n&&(n=L,a=S)}),{hour:t.hours[a]||"--",count:n}}),x=N(()=>{const t=D.value;if(!t.inData||t.inData.length<2)return{percent:0,hasData:!1};const a=t.inData.length-1,n=a-1,f=(Number(t.inData[a])||0)+(Number(t.outData[a])||0),S=(Number(t.inData[n])||0)+(Number(t.outData[n])||0);if(S===0)return{percent:0,hasData:!1};const L=(f-S)/S*100;return{percent:Math.round(L),hasData:!0}}),k=N(()=>{const t=X(),a=Z(),n=t+a;return n===0?0:Math.round(t/n*100)}),vt=N(()=>{const t=D.value;if(!t.inData||t.inData.length===0)return 0;const a=t.inData.reduce((n,f)=>n+(Number(f)||0),0)+t.outData.reduce((n,f)=>n+(Number(f)||0),0);return Math.round(a/t.inData.length)}),ht=nt(C,300),pt=nt(yt,300);lt(p,()=>{pt()}),lt(Y,()=>{ht()});let I=null;function K(){B(),C(),I=setInterval(C,36e5)}function B(){I&&(clearInterval(I),I=null)}return At(K),Ct(()=>{I||K()}),kt(B),Lt(B),(t,a)=>(R(),V("div",Bt,[s(l(M),{gutter:12,class:"layout-row"},{default:o(()=>[s(l(v),{xs:24,sm:24,md:6,lg:5,xl:4,class:"tree-col"},{default:o(()=>[s(l(b),{class:"tree-card",title:"业务区域"},{default:o(()=>[s(Et,{ref_key:"areaTreeRef",ref:r,onSelect:P},null,512)]),_:1})]),_:1}),s(l(v),{xs:24,sm:24,md:18,lg:19,xl:20},{default:o(()=>[s(l(U),{spinning:_.value},{default:o(()=>[e("div",Ut,[e("span",Vt,y(w.value),1),e("span",Wt,y(i.value?"区域客流数据":"所有区域汇总数据"),1)]),T.value?(R(),Mt(l(wt),{key:0,message:T.value,type:"warning","show-icon":"",closable:"",class:"mb-3"},null,8,["message"])):Nt("",!0),s(l(M),{gutter:[12,12],class:"mb-3"},{default:o(()=>[s(l(v),{xs:12,sm:12,lg:6},{default:o(()=>[s(l(b),{class:"metric-card metric-card--in"},{default:o(()=>[e("div",jt,[e("div",Gt,[s(l(m),{icon:"mdi:arrow-right-bold"})]),e("div",$t,[a[2]||(a[2]=e("div",{class:"metric-label"},"今日进入",-1)),s(l(O),{value:X(),"value-style":{fontSize:"24px",fontWeight:600,color:"#52c41a"}},null,8,["value"])])])]),_:1})]),_:1}),s(l(v),{xs:12,sm:12,lg:6},{default:o(()=>[s(l(b),{class:"metric-card metric-card--out"},{default:o(()=>[e("div",Ft,[e("div",Jt,[s(l(m),{icon:"mdi:arrow-left-bold"})]),e("div",Xt,[a[3]||(a[3]=e("div",{class:"metric-label"},"今日离开",-1)),s(l(O),{value:Z(),"value-style":{fontSize:"24px",fontWeight:600,color:"#ff4d4f"}},null,8,["value"])])])]),_:1})]),_:1}),s(l(v),{xs:12,sm:12,lg:6},{default:o(()=>[s(l(b),{class:"metric-card metric-card--yin"},{default:o(()=>[e("div",Zt,[e("div",qt,[s(l(m),{icon:"mdi:arrow-right"})]),e("div",Kt,[a[4]||(a[4]=e("div",{class:"metric-label"},"昨日进入",-1)),s(l(O),{value:mt(),"value-style":{fontSize:"24px",fontWeight:600,color:"#1677ff"}},null,8,["value"])])])]),_:1})]),_:1}),s(l(v),{xs:12,sm:12,lg:6},{default:o(()=>[s(l(b),{class:"metric-card metric-card--yout"},{default:o(()=>[e("div",Qt,[e("div",ta,[s(l(m),{icon:"mdi:arrow-left"})]),e("div",aa,[a[5]||(a[5]=e("div",{class:"metric-label"},"昨日离开",-1)),s(l(O),{value:_t(),"value-style":{fontSize:"24px",fontWeight:600,color:"#fa8c16"}},null,8,["value"])])])]),_:1})]),_:1})]),_:1}),s(l(M),{gutter:[12,12],class:"chart-row mb-3"},{default:o(()=>[s(l(v),{xs:24,lg:16},{default:o(()=>[s(l(b),{class:"chart-card chart-card--full",title:"小时客流趋势"},{extra:o(()=>[e("div",ea,[s(l(Tt),{value:p.value,"onUpdate:value":a[0]||(a[0]=n=>p.value=n),"allow-clear":!1,"disabled-date":j,size:"small",style:{width:"130px"}},null,8,["value"]),s(l(st),{title:"展示选中日期24小时各时段的进入和离开人次"},{default:o(()=>[s(l(m),{icon:"solar:info-circle-bold-duotone",class:"info-icon"})]),_:1})])]),default:o(()=>[s(l(U),{spinning:c.value},{default:o(()=>[s(l(dt),{ref_key:"hourlyChartRef",ref:G,class:"chart-container"},null,512)]),_:1},8,["spinning"])]),_:1})]),_:1}),s(l(v),{xs:24,lg:8},{default:o(()=>[s(l(b),{class:"chart-card chart-card--full analysis-card",title:"客流态势"},{default:o(()=>[e("div",sa,[e("div",la,[e("div",oa,[s(l(m),{icon:"mdi:chart-timeline-variant",class:"analysis-item__icon analysis-item__icon--orange"}),a[6]||(a[6]=e("span",{class:"analysis-item__title"},"今日高峰",-1))]),e("div",na,[e("span",ia,y(q.value.hour),1),e("span",ra,"峰值 "+y(q.value.count)+" 人次",1)])]),e("div",ca,[e("div",da,[s(l(m),{icon:x.value.percent>=0?"mdi:trending-up":"mdi:trending-down",class:Rt(["analysis-item__icon",x.value.percent>=0?"analysis-item__icon--red":"analysis-item__icon--green"])},null,8,["icon","class"]),a[7]||(a[7]=e("span",{class:"analysis-item__title"},"较昨日",-1))]),e("div",ua,[x.value.hasData?(R(),V(Ot,{key:0},[e("span",{class:"analysis-item__value",style:ot({color:x.value.percent>=0?"#ff4d4f":"#52c41a"})},y(x.value.percent>=0?"+":"")+y(x.value.percent)+"% ",5),e("span",fa," 客流量"+y(x.value.percent>=0?"上升":"下降"),1)],64)):(R(),V("span",ya,"暂无数据"))])]),e("div",ma,[e("div",_a,[s(l(m),{icon:"mdi:swap-horizontal-bold",class:"analysis-item__icon analysis-item__icon--blue"}),a[8]||(a[8]=e("span",{class:"analysis-item__title"},"进出比",-1))]),e("div",va,[e("span",ha,y(k.value)+"%",1),e("div",pa,[e("div",{class:"analysis-item__bar-fill",style:ot({width:`${k.value}%`})},null,4)]),e("span",ga," 进入占比 "+y(k.value)+"%，离开占比 "+y(100-k.value)+"% ",1)])]),e("div",ba,[e("div",Da,[s(l(m),{icon:"mdi:calendar-clock",class:"analysis-item__icon analysis-item__icon--purple"}),a[9]||(a[9]=e("span",{class:"analysis-item__title"},"7天日均",-1))]),e("div",xa,[e("span",Sa,y(vt.value),1),a[10]||(a[10]=e("span",{class:"analysis-item__desc"},"近7天日均客流人次",-1))])])])]),_:1})]),_:1})]),_:1}),s(l(M),{gutter:[12,12]},{default:o(()=>[s(l(v),{span:24},{default:o(()=>[s(l(b),{class:"chart-card",title:"客流趋势"},{extra:o(()=>[e("div",wa,[s(l(Yt),{value:Y.value,"onUpdate:value":a[1]||(a[1]=n=>Y.value=n),"allow-clear":!1,"disabled-date":j,size:"small",style:{width:"240px"}},null,8,["value"]),s(l(st),{title:"展示选定时间范围内的客流进入和离开趋势"},{default:o(()=>[s(l(m),{icon:"solar:info-circle-bold-duotone",class:"info-icon"})]),_:1})])]),default:o(()=>[s(l(U),{spinning:c.value},{default:o(()=>[s(l(dt),{ref_key:"trendChartRef",ref:$,class:"chart-container"},null,512)]),_:1},8,["spinning"])]),_:1})]),_:1})]),_:1})]),_:1},8,["spinning"])]),_:1})]),_:1})]))}}),Na=It(Ta,[["__scopeId","data-v-f50833b6"]]);export{Na as default};
|