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