2 lines
12 KiB
JavaScript
2 lines
12 KiB
JavaScript
var A=(g,D,m)=>new Promise((b,x)=>{var S=i=>{try{_(m.next(i))}catch(r){x(r)}},O=i=>{try{_(m.throw(i))}catch(r){x(r)}},_=i=>i.done?b(i.value):Promise.resolve(i.value).then(S,O);_((m=m.apply(g,D)).next())});import{aq as R,c1 as y,au as h,S as H,ct as ot,c0 as z,an as f,ax as J,ac as nt}from"./bootstrap-Cih4O7h2.js";import{_ as it}from"./AreaTree.vue_vue_type_script_setup_true_lang-Bb9oU2aE.js";import{S as N}from"./index-fEjxWQnM.js";import{u as X,_ as K}from"./use-echarts-CZVrlB9v.js";import{m as rt,b9 as c,aa as k,v as ct,aU as dt,aX as ut,x as ft,ad as M,b2 as L,j as s,bJ as o,u as l,ae as e,ab as mt,ac as _t,bp as d,aR as yt,I as ht,aT as Q,n as Z}from"../jse/index-index-B6W-azrl.js";import"./index-qTCFnlGZ.js";function vt(){return R.get("/ops/traffic/realtime")}function pt(){return R.get("/ops/traffic/trend")}function gt(g){return R.get("/ops/traffic/area/realtime",{params:{areaIds:g.join(",")}})}function bt(g){return R.get("/ops/traffic/area/trend",{params:g})}const xt={class:"traffic-dashboard"},St={class:"content-header mb-3"},Dt={class:"content-title"},wt={class:"content-subtitle"},Tt={class:"metric-content"},It={class:"metric-icon"},Ct={class:"metric-info"},At={class:"metric-content"},zt={class:"metric-icon"},Nt={class:"metric-info"},kt={class:"metric-content"},Lt={class:"metric-icon"},Rt={class:"metric-info"},Ot={class:"metric-content"},Pt={class:"metric-icon"},Et={class:"metric-info"},Ht={class:"analysis-list"},Mt={class:"analysis-item"},Bt={class:"analysis-item__header"},Vt={class:"analysis-item__body"},Wt={class:"analysis-item__value"},jt={class:"analysis-item__desc"},Gt={class:"analysis-item"},$t={class:"analysis-item__header"},qt={class:"analysis-item__body"},Ut={class:"analysis-item__desc"},Yt={key:1,class:"analysis-item__value analysis-item__value--muted"},Ft={class:"analysis-item"},Jt={class:"analysis-item__header"},Xt={class:"analysis-item__body"},Kt={class:"analysis-item__value"},Qt={class:"analysis-item__bar"},Zt={class:"analysis-item__desc"},te={class:"analysis-item"},ee={class:"analysis-item__header"},ae={class:"analysis-item__body"},se={class:"analysis-item__value"},le=rt({name:"OpsTraffic",__name:"index",setup(g){const D=c(),m=c(),b=c([]),x=c("全局总览"),S=c("");function O(t){var a,n;t&&t.id!==null&&t.id!==void 0?(m.value=t.id,b.value=((a=D.value)==null?void 0:a.getDescendantIds(t.id))||[t.id],x.value=((n=D.value)==null?void 0:n.getAreaPath(t.id))||t.areaName):(m.value=void 0,b.value=[],x.value="全局总览"),P()}const _=c(!0),i=c(!0),r=c({totalIn:0,totalOut:0,currentOccupancy:0,areas:[],hourlyTrend:{hours:[],inData:[],outData:[]},yesterdayHourlyTrend:{hours:[],inData:[],outData:[]}}),v=c({dates:[],inData:[],outData:[],netData:[],totalIn:0,totalOut:0}),B=c(),V=c(),{renderEcharts:W}=X(B),{renderEcharts:j}=X(V);function G(){const t=r.value.hourlyTrend;if(!t||t.hours.length===0)return{};const a=r.value.yesterdayHourlyTrend,n=[{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)"}]}}}],u=["今日进入","今日离开"];return a&&a.hours.length>0&&(u.push("昨日进入","昨日离开"),n.push({name:"昨日进入",type:"line",smooth:!0,symbol:"none",data:a.inData,lineStyle:{width:1.5,color:"#b5f5ec",type:"dashed"},itemStyle:{color:"#b5f5ec"}},{name:"昨日离开",type:"line",smooth:!0,symbol:"none",data:a.outData,lineStyle:{width:1.5,color:"#adc6ff",type:"dashed"},itemStyle:{color:"#adc6ff"}})),{tooltip:{trigger:"axis"},legend:{data:u,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:n}}function $(){const t=v.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 tt(){return A(this,null,function*(){_.value=!0;try{const[t,a]=yield Promise.all([vt(),pt()]);r.value=t,v.value=a,S.value="",i.value=!1,yield Z(),W(G()),j($())}catch(t){i.value=!1}finally{_.value=!1}})}function et(t){return A(this,null,function*(){_.value=!0;try{const[a,n]=yield Promise.all([gt(t),bt({areaIds:t.join(",")})]);r.value=a,v.value=n,S.value=a.message||"",i.value=!1,yield Z(),W(G()),j($())}catch(a){i.value=!1}finally{_.value=!1}})}function P(){return A(this,null,function*(){yield m.value&&b.value.length>0?et(b.value):tt()})}function q(){return r.value.totalIn}function U(){return r.value.totalOut}function at(){const t=v.value;return!t.inData||t.inData.length<2?0:Number(t.inData[t.inData.length-2])||0}function st(){const t=v.value;return!t.outData||t.outData.length<2?0:Number(t.outData[t.outData.length-2])||0}const Y=k(()=>{const t=r.value.hourlyTrend;if(!t||t.hours.length===0)return{hour:"--",count:0};let a=0,n=0;return t.inData.forEach((u,T)=>{const C=Number(u)||0;C>n&&(n=C,a=T)}),{hour:t.hours[a]||"--",count:n}}),p=k(()=>{const t=v.value;if(!t.inData||t.inData.length<2)return{percent:0,hasData:!1};const a=t.inData.length-1,n=a-1,u=(Number(t.inData[a])||0)+(Number(t.outData[a])||0),T=(Number(t.inData[n])||0)+(Number(t.outData[n])||0);if(T===0)return{percent:0,hasData:!1};const C=(u-T)/T*100;return{percent:Math.round(C),hasData:!0}}),I=k(()=>{const t=q(),a=U(),n=t+a;return n===0?0:Math.round(t/n*100)}),lt=k(()=>{const t=v.value;if(!t.inData||t.inData.length===0)return 0;const a=t.inData.reduce((n,u)=>n+(Number(u)||0),0)+t.outData.reduce((n,u)=>n+(Number(u)||0),0);return Math.round(a/t.inData.length)});let w=null;function F(){E(),P(),w=setInterval(P,36e5)}function E(){w&&(clearInterval(w),w=null)}return ct(F),dt(()=>{w||F()}),ut(E),ft(E),(t,a)=>(L(),M("div",xt,[s(l(z),{gutter:12,class:"layout-row"},{default:o(()=>[s(l(y),{xs:24,sm:24,md:6,lg:5,xl:4,class:"tree-col"},{default:o(()=>[s(l(h),{class:"tree-card",title:"业务区域"},{default:o(()=>[s(it,{ref_key:"areaTreeRef",ref:D,onSelect:O},null,512)]),_:1})]),_:1}),s(l(y),{xs:24,sm:24,md:18,lg:19,xl:20},{default:o(()=>[s(l(H),{spinning:_.value},{default:o(()=>[e("div",St,[e("span",Dt,d(x.value),1),e("span",wt,d(m.value?"区域客流数据":"所有区域汇总数据"),1)]),S.value?(L(),mt(l(ot),{key:0,message:S.value,type:"warning","show-icon":"",closable:"",class:"mb-3"},null,8,["message"])):_t("",!0),s(l(z),{gutter:[12,12],class:"mb-3"},{default:o(()=>[s(l(y),{xs:12,sm:12,lg:6},{default:o(()=>[s(l(h),{class:"metric-card metric-card--in"},{default:o(()=>[e("div",Tt,[e("div",It,[s(l(f),{icon:"mdi:arrow-right-bold"})]),e("div",Ct,[a[0]||(a[0]=e("div",{class:"metric-label"},"今日进入",-1)),s(l(N),{value:q(),"value-style":{fontSize:"24px",fontWeight:600,color:"#52c41a"}},null,8,["value"])])])]),_:1})]),_:1}),s(l(y),{xs:12,sm:12,lg:6},{default:o(()=>[s(l(h),{class:"metric-card metric-card--out"},{default:o(()=>[e("div",At,[e("div",zt,[s(l(f),{icon:"mdi:arrow-left-bold"})]),e("div",Nt,[a[1]||(a[1]=e("div",{class:"metric-label"},"今日离开",-1)),s(l(N),{value:U(),"value-style":{fontSize:"24px",fontWeight:600,color:"#ff4d4f"}},null,8,["value"])])])]),_:1})]),_:1}),s(l(y),{xs:12,sm:12,lg:6},{default:o(()=>[s(l(h),{class:"metric-card metric-card--yin"},{default:o(()=>[e("div",kt,[e("div",Lt,[s(l(f),{icon:"mdi:arrow-right"})]),e("div",Rt,[a[2]||(a[2]=e("div",{class:"metric-label"},"昨日进入",-1)),s(l(N),{value:at(),"value-style":{fontSize:"24px",fontWeight:600,color:"#1677ff"}},null,8,["value"])])])]),_:1})]),_:1}),s(l(y),{xs:12,sm:12,lg:6},{default:o(()=>[s(l(h),{class:"metric-card metric-card--yout"},{default:o(()=>[e("div",Ot,[e("div",Pt,[s(l(f),{icon:"mdi:arrow-left"})]),e("div",Et,[a[3]||(a[3]=e("div",{class:"metric-label"},"昨日离开",-1)),s(l(N),{value:st(),"value-style":{fontSize:"24px",fontWeight:600,color:"#fa8c16"}},null,8,["value"])])])]),_:1})]),_:1})]),_:1}),s(l(z),{gutter:[12,12],class:"chart-row mb-3"},{default:o(()=>[s(l(y),{xs:24,lg:16},{default:o(()=>[s(l(h),{class:"chart-card chart-card--full",title:"小时客流趋势"},{extra:o(()=>[s(l(J),{title:"展示今日与昨日24小时各时段的进入和离开人次对比"},{default:o(()=>[s(l(f),{icon:"solar:info-circle-bold-duotone",class:"info-icon"})]),_:1})]),default:o(()=>[s(l(H),{spinning:i.value},{default:o(()=>[s(l(K),{ref_key:"hourlyChartRef",ref:B,class:"chart-container"},null,512)]),_:1},8,["spinning"])]),_:1})]),_:1}),s(l(y),{xs:24,lg:8},{default:o(()=>[s(l(h),{class:"chart-card chart-card--full analysis-card",title:"客流态势"},{default:o(()=>[e("div",Ht,[e("div",Mt,[e("div",Bt,[s(l(f),{icon:"mdi:chart-timeline-variant",class:"analysis-item__icon analysis-item__icon--orange"}),a[4]||(a[4]=e("span",{class:"analysis-item__title"},"今日高峰",-1))]),e("div",Vt,[e("span",Wt,d(Y.value.hour),1),e("span",jt,"峰值 "+d(Y.value.count)+" 人次",1)])]),e("div",Gt,[e("div",$t,[s(l(f),{icon:p.value.percent>=0?"mdi:trending-up":"mdi:trending-down",class:yt(["analysis-item__icon",p.value.percent>=0?"analysis-item__icon--red":"analysis-item__icon--green"])},null,8,["icon","class"]),a[5]||(a[5]=e("span",{class:"analysis-item__title"},"较昨日",-1))]),e("div",qt,[p.value.hasData?(L(),M(ht,{key:0},[e("span",{class:"analysis-item__value",style:Q({color:p.value.percent>=0?"#ff4d4f":"#52c41a"})},d(p.value.percent>=0?"+":"")+d(p.value.percent)+"% ",5),e("span",Ut," 客流量"+d(p.value.percent>=0?"上升":"下降"),1)],64)):(L(),M("span",Yt,"暂无数据"))])]),e("div",Ft,[e("div",Jt,[s(l(f),{icon:"mdi:swap-horizontal-bold",class:"analysis-item__icon analysis-item__icon--blue"}),a[6]||(a[6]=e("span",{class:"analysis-item__title"},"进出比",-1))]),e("div",Xt,[e("span",Kt,d(I.value)+"%",1),e("div",Qt,[e("div",{class:"analysis-item__bar-fill",style:Q({width:`${I.value}%`})},null,4)]),e("span",Zt," 进入占比 "+d(I.value)+"%，离开占比 "+d(100-I.value)+"% ",1)])]),e("div",te,[e("div",ee,[s(l(f),{icon:"mdi:calendar-clock",class:"analysis-item__icon analysis-item__icon--purple"}),a[7]||(a[7]=e("span",{class:"analysis-item__title"},"7天日均",-1))]),e("div",ae,[e("span",se,d(lt.value),1),a[8]||(a[8]=e("span",{class:"analysis-item__desc"},"近7天日均客流人次",-1))])])])]),_:1})]),_:1})]),_:1}),s(l(z),{gutter:[12,12]},{default:o(()=>[s(l(y),{span:24},{default:o(()=>[s(l(h),{class:"chart-card",title:"客流趋势（近7天）"},{extra:o(()=>[s(l(J),{title:"展示最近7天的客流进入、离开和净流量趋势"},{default:o(()=>[s(l(f),{icon:"solar:info-circle-bold-duotone",class:"info-icon"})]),_:1})]),default:o(()=>[s(l(H),{spinning:i.value},{default:o(()=>[s(l(K),{ref_key:"trendChartRef",ref:V,class:"chart-container"},null,512)]),_:1},8,["spinning"])]),_:1})]),_:1})]),_:1})]),_:1},8,["spinning"])]),_:1})]),_:1})]))}}),fe=nt(le,[["__scopeId","data-v-562fd6fe"]]);export{fe as default};
|