2 lines
3.3 KiB
JavaScript
2 lines
3.3 KiB
JavaScript
import{j as t}from"./operations-Cr4YfoRu.js";import{d as e,k as s,r as l,c as a,o,b as r,e as n,f as i,I as d,J as c,m as u,q as v,v as g}from"./index-BoIUJTA2.js";import{_ as x}from"./_plugin-vue_export-helper-BCo6x5W8.js";const m={class:"art-card h-140 p-5 mb-5 max-sm:mb-4"},p={class:"h-[calc(100%-40px)]"},f={class:"h-80 relative"},h={class:"flex items-center"},b={class:"w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-3"},y={class:"text-lg"},w={class:"text-sm opacity-80"},_={class:"text-right"},j={class:"text-xl"},F={class:"text-sm opacity-80"},k={class:"mt-4 grid grid-cols-2 gap-4"},I={class:"bg-g-50 p-4 rounded-lg"},P={class:"text-2xl font-bold text-success"},q={class:"text-xs text-g-400 mt-1"},z={class:"bg-g-50 p-4 rounded-lg"},C={class:"text-lg font-bold text-danger"},J={class:"text-xs text-g-400 mt-1"},M=x(e({__name:"order-funnel",setup(e){const x=s([]),M=l(!1),S=a(()=>{var t,e;const s=(null==(t=x[0])?void 0:t.count)||0,l=(null==(e=x[2])?void 0:e.count)||0;return s<=0?0:parseFloat((l/s*100).toFixed(1))}),$=a(()=>{var t,e,s;const l=(null==(t=x[0])?void 0:t.count)||0,a=(null==(e=x[1])?void 0:e.count)||0,o=(null==(s=x[2])?void 0:s.count)||0;if(l<=0||a<0||o<0)return"-";return(l>0?1-a/l:0)>=(a>0?1-o/a:0)?"下单用户":"支付用户"}),A=a(()=>{var t,e,s;const l=(null==(t=x[0])?void 0:t.count)||0,a=(null==(e=x[1])?void 0:e.count)||0,o=(null==(s=x[2])?void 0:s.count)||0,r=l>0?1-a/l:0,n=a>0?1-o/a:0,i=Math.max(r,n);return parseFloat((100*i).toFixed(1))}),B=a(()=>{const t=S.value;return t>=20?"转化表现优秀":t>=15?"转化表现良好":t>=10?"转化表现一般":"需要优化转化流程"}),D=t=>["bg-gradient-to-r from-blue-500 to-blue-400","bg-gradient-to-r from-green-500 to-green-400","bg-gradient-to-r from-yellow-500 to-yellow-400","bg-gradient-to-r from-red-500 to-red-400"][t]||"bg-gradient-to-r from-gray-500 to-gray-400",E=t=>t>=1e4?(t/1e4).toFixed(1)+"w":t>=1e3?(t/1e3).toFixed(1)+"k":t.toString(),G=()=>{return e=this,s=null,l=function*(){M.value=!0;try{const e=yield t("7d");x.splice(0,x.length,...e)}catch(e){}finally{M.value=!1}},new Promise((t,a)=>{var o=t=>{try{n(l.next(t))}catch(e){a(e)}},r=t=>{try{n(l.throw(t))}catch(e){a(e)}},n=e=>e.done?t(e.value):Promise.resolve(e.value).then(o,r);n((l=l.apply(e,s)).next())});var e,s,l};return o(()=>{G()}),(t,e)=>(n(),r("div",m,[e[2]||(e[2]=i("div",{class:"art-card-header"},[i("div",{class:"title"},[i("h4",null,"订单转化漏斗"),i("p",null,"识别支付瓶颈，提升营收转化")])],-1)),i("div",p,[i("div",f,[(n(!0),r(d,null,c(x,(t,e)=>(n(),r("div",{key:t.stage,class:v(["funnel-stage absolute left-0 right-0 flex items-center justify-between px-6 text-white font-medium transition-all duration-300 hover:opacity-90",D(e)]),style:u({top:70*e+"px",height:"60px",zIndex:10-e})},[i("div",h,[i("div",b,g(e+1),1),i("div",null,[i("div",y,g(t.stage),1),i("div",w,g(E(t.count))+"人",1)])]),i("div",_,[i("div",j,g(t.rate)+"%",1),i("div",F,g(e>0?`流失${E(t.lostCount)}人`:"基准"),1)])],6))),128))]),i("div",k,[i("div",I,[e[0]||(e[0]=i("div",{class:"text-g-500 text-sm"},"整体转化率",-1)),i("div",P,g(S.value)+"%",1),i("div",q,g(B.value),1)]),i("div",z,[e[1]||(e[1]=i("div",{class:"text-g-500 text-sm"},"主要流失环节",-1)),i("div",C,g($.value),1),i("div",J,"流失率: "+g(A.value)+"%",1)])])])]))}}),[["__scopeId","data-v-e1a74e9b"]]);export{M as default};
|