2 lines
13 KiB
JavaScript
2 lines
13 KiB
JavaScript
var bt=Object.defineProperty,Dt=Object.defineProperties;var xt=Object.getOwnPropertyDescriptors;var at=Object.getOwnPropertySymbols;var St=Object.prototype.hasOwnProperty,wt=Object.prototype.propertyIsEnumerable;var et=(i,r,c)=>r in i?bt(i,r,{enumerable:!0,configurable:!0,writable:!0,value:c}):i[r]=c,U=(i,r)=>{for(var c in r||(r={}))St.call(r,c)&&et(i,c,r[c]);if(at)for(var c of at(r))wt.call(r,c)&&et(i,c,r[c]);return i},st=(i,r)=>Dt(i,xt(r));var C=(i,r,c)=>new Promise((h,w)=>{var T=d=>{try{_(c.next(d))}catch(p){w(p)}},H=d=>{try{_(c.throw(d))}catch(p){w(p)}},_=d=>d.done?h(d.value):Promise.resolve(d.value).then(T,H);_((c=c.apply(i,r)).next())});import{aq as P,c1 as v,au as b,S as V,ct as Tt,c0 as M,an as m,D as Yt,ax as lt,R as It,ac as Ct}from"./bootstrap-BWt8zfX6.js";import{m as zt,b9 as u,cf as z,aa as N,w as ot,v as At,aU as kt,aX as Lt,x as Mt,ad as W,b2 as R,j as s,bJ as o,u as l,ae as e,ab as Nt,ac as Rt,bp as y,aR as Ot,I as Pt,aT as nt,n as G,ca as it}from"../jse/index-index-CRz-A-GR.js";import{_ as Ht}from"./AreaTree.vue_vue_type_script_setup_true_lang-BCZh8DCB.js";import{S as O}from"./index-BGzilcll.js";import{u as rt,_ as ct}from"./use-echarts-VvBie2ze.js";import"./index-B2PkzC6c.js";function dt(i){return P.get("/ops/traffic/realtime",{params:i?{date:i}:void 0})}function Et(i){return P.get("/ops/traffic/trend",{params:i})}function ut(i,r){return P.get("/ops/traffic/area/realtime",{params:U({areaIds:i.join(",")},r?{date:r}:{})})}function jt(i){return P.get("/ops/traffic/area/trend",{params:i})}const Bt={class:"traffic-dashboard"},Ut={class:"content-header mb-3"},Vt={class:"content-title"},Wt={class:"content-subtitle"},Gt={class:"metric-content"},$t={class:"metric-icon"},qt={class:"metric-info"},Ft={class:"metric-content"},Jt={class:"metric-icon"},Xt={class:"metric-info"},Kt={class:"metric-content"},Qt={class:"metric-icon"},Zt={class:"metric-info"},ta={class:"metric-content"},aa={class:"metric-icon"},ea={class:"metric-info"},sa={style:{display:"flex","align-items":"center",gap:"8px"}},la={class:"analysis-list"},oa={class:"analysis-item"},na={class:"analysis-item__header"},ia={class:"analysis-item__body"},ra={class:"analysis-item__value"},ca={class:"analysis-item__desc"},da={class:"analysis-item"},ua={class:"analysis-item__header"},fa={class:"analysis-item__body"},ya={class:"analysis-item__desc"},ma={key:1,class:"analysis-item__value analysis-item__value--muted"},_a={class:"analysis-item"},va={class:"analysis-item__header"},ha={class:"analysis-item__body"},pa={class:"analysis-item__value"},ga={class:"analysis-item__bar"},ba={class:"analysis-item__desc"},Da={class:"analysis-item"},xa={class:"analysis-item__header"},Sa={class:"analysis-item__body"},wa={class:"analysis-item__value"},Ta={style:{display:"flex","align-items":"center",gap:"8px"}},Ya=zt({name:"OpsTraffic",__name:"index",setup(i){const r=u(),c=u(),h=u([]),w=u("全局总览"),T=u("");function H(t){var a,n;t&&t.id!==null&&t.id!==void 0?(c.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):(c.value=void 0,h.value=[],w.value="全局总览"),A()}const _=u(!0),d=u(!0),p=u(z()),Y=u([z().subtract(6,"day"),z()]);function $(t){return t?t>z().endOf("day")||t<z().subtract(30,"day").startOf("day"):!1}const g=u({totalIn:0,totalOut:0,currentOccupancy:0,areas:[],hourlyTrend:{hours:[],inData:[],outData:[]},yesterdayHourlyTrend:{hours:[],inData:[],outData:[]}}),D=u({dates:[],inData:[],outData:[],netData:[],totalIn:0,totalOut:0}),q=u(),F=u(),{renderEcharts:E}=rt(q),{renderEcharts:J}=rt(F);function j(){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 X(){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 ft(){return C(this,null,function*(){_.value=!0;try{const[t,a]=Y.value,[n,f]=yield Promise.all([dt(),Et({startDate:t.format("YYYY-MM-DD"),endDate:a.format("YYYY-MM-DD")})]);g.value=n,D.value=f,T.value="",d.value=!1,yield G(),E(j()),J(X())}catch(t){d.value=!1}finally{_.value=!1}})}function yt(t){return C(this,null,function*(){_.value=!0;try{const[a,n]=Y.value,[f,S]=yield Promise.all([ut(t),jt({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||"",d.value=!1,yield G(),E(j()),J(X())}catch(a){d.value=!1}finally{_.value=!1}})}function A(){return C(this,null,function*(){yield c.value&&h.value.length>0?yt(h.value):ft()})}function mt(){return C(this,null,function*(){try{const t=p.value.format("YYYY-MM-DD");let a;c.value&&h.value.length>0?a=yield ut(h.value,t):a=yield dt(t),g.value=st(U({},g.value),{hourlyTrend:a.hourlyTrend,yesterdayHourlyTrend:a.yesterdayHourlyTrend}),yield G(),E(j())}catch(t){}})}function K(){return g.value.totalIn}function Q(){return g.value.totalOut}function _t(){const t=D.value;return!t.inData||t.inData.length<2?0:Number(t.inData[t.inData.length-2])||0}function vt(){const t=D.value;return!t.outData||t.outData.length<2?0:Number(t.outData[t.outData.length-2])||0}const Z=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=K(),a=Q(),n=t+a;return n===0?0:Math.round(t/n*100)}),ht=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)}),pt=it(A,300),gt=it(mt,300);ot(p,()=>{gt()}),ot(Y,()=>{pt()});let I=null;function tt(){B(),A(),I=setInterval(A,36e5)}function B(){I&&(clearInterval(I),I=null)}return At(tt),kt(()=>{I||tt()}),Lt(B),Mt(B),(t,a)=>(R(),W("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(Ht,{ref_key:"areaTreeRef",ref:r,onSelect:H},null,512)]),_:1})]),_:1}),s(l(v),{xs:24,sm:24,md:18,lg:19,xl:20},{default:o(()=>[s(l(V),{spinning:_.value},{default:o(()=>[e("div",Ut,[e("span",Vt,y(w.value),1),e("span",Wt,y(c.value?"区域客流数据":"所有区域汇总数据"),1)]),T.value?(R(),Nt(l(Tt),{key:0,message:T.value,type:"warning","show-icon":"",closable:"",class:"mb-3"},null,8,["message"])):Rt("",!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",Gt,[e("div",$t,[s(l(m),{icon:"mdi:arrow-right-bold"})]),e("div",qt,[a[2]||(a[2]=e("div",{class:"metric-label"},"今日进入",-1)),s(l(O),{value:K(),"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:Q(),"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",Kt,[e("div",Qt,[s(l(m),{icon:"mdi:arrow-right"})]),e("div",Zt,[a[4]||(a[4]=e("div",{class:"metric-label"},"昨日进入",-1)),s(l(O),{value:_t(),"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",ta,[e("div",aa,[s(l(m),{icon:"mdi:arrow-left"})]),e("div",ea,[a[5]||(a[5]=e("div",{class:"metric-label"},"昨日离开",-1)),s(l(O),{value:vt(),"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",sa,[s(l(Yt),{value:p.value,"onUpdate:value":a[0]||(a[0]=n=>p.value=n),"allow-clear":!1,"disabled-date":$,size:"small",style:{width:"130px"}},null,8,["value"]),s(l(lt),{title:"展示选中日期24小时各时段的进入和离开人次"},{default:o(()=>[s(l(m),{icon:"solar:info-circle-bold-duotone",class:"info-icon"})]),_:1})])]),default:o(()=>[s(l(V),{spinning:d.value},{default:o(()=>[s(l(ct),{ref_key:"hourlyChartRef",ref:q,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",la,[e("div",oa,[e("div",na,[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",ia,[e("span",ra,y(Z.value.hour),1),e("span",ca,"峰值 "+y(Z.value.count)+" 人次",1)])]),e("div",da,[e("div",ua,[s(l(m),{icon:x.value.percent>=0?"mdi:trending-up":"mdi:trending-down",class:Ot(["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",fa,[x.value.hasData?(R(),W(Pt,{key:0},[e("span",{class:"analysis-item__value",style:nt({color:x.value.percent>=0?"#ff4d4f":"#52c41a"})},y(x.value.percent>=0?"+":"")+y(x.value.percent)+"% ",5),e("span",ya," 客流量"+y(x.value.percent>=0?"上升":"下降"),1)],64)):(R(),W("span",ma,"暂无数据"))])]),e("div",_a,[e("div",va,[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",ha,[e("span",pa,y(k.value)+"%",1),e("div",ga,[e("div",{class:"analysis-item__bar-fill",style:nt({width:`${k.value}%`})},null,4)]),e("span",ba," 进入占比 "+y(k.value)+"%，离开占比 "+y(100-k.value)+"% ",1)])]),e("div",Da,[e("div",xa,[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",Sa,[e("span",wa,y(ht.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",Ta,[s(l(It),{value:Y.value,"onUpdate:value":a[1]||(a[1]=n=>Y.value=n),"allow-clear":!1,"disabled-date":$,size:"small",style:{width:"240px"}},null,8,["value"]),s(l(lt),{title:"展示选定时间范围内的客流进入和离开趋势"},{default:o(()=>[s(l(m),{icon:"solar:info-circle-bold-duotone",class:"info-icon"})]),_:1})])]),default:o(()=>[s(l(V),{spinning:d.value},{default:o(()=>[s(l(ct),{ref_key:"trendChartRef",ref:F,class:"chart-container"},null,512)]),_:1},8,["spinning"])]),_:1})]),_:1})]),_:1})]),_:1},8,["spinning"])]),_:1})]),_:1})]))}}),Na=Ct(Ya,[["__scopeId","data-v-f50833b6"]]);export{Na as default};
|