DeviceRanking.D-j1VN9I.js 2.0 KB

1
  1. import{i as b,L as f}from"./echarts.Bog-kzRU.js";import{a as _,r as l,q as h,w as g,c as y,o as D,b as a,G as v}from"./vue.fY72QXCX.js";import{_ as w}from"./_plugin-vue_export-helper.DlAUqK2U.js";const k=_({name:"DeviceRanking",props:{apiData:{type:Object,required:!0},minValue:{type:Number,default:5}},setup(e){const t=l("count"),o=l(),n=l(),u=()=>{o.value&&(n.value=b(o.value),r())},d=()=>(t.value==="count"?e.apiData.data.borrow_count_ranking:e.apiData.data.borrow_duration_ranking).filter(s=>t.value==="count"?(s.borrow_count||0)>=e.minValue:parseInt(s.total_duration||"0")>=e.minValue).slice(0,20),r=()=>{if(!n.value)return;const c=d(),s=c.map(i=>i.device_name),p=c.map(i=>t.value==="count"?i.borrow_count:parseInt(i.total_duration||"0")),m={tooltip:{trigger:"axis",axisPointer:{type:"shadow"}},grid:{left:"3%",right:"4%",bottom:"3%",containLabel:!0},xAxis:{type:"value",name:t.value==="count"?"借用次数":"借用时长(小时)"},yAxis:{type:"category",data:s,axisLabel:{interval:0,rotate:30}},series:[{name:t.value==="count"?"借用次数":"借用时长",type:"bar",data:p,itemStyle:{color:new f(0,0,1,0,[{offset:0,color:"#83bff6"},{offset:.5,color:"#188df0"},{offset:1,color:"#0078ff"}])},emphasis:{itemStyle:{color:new f(0,0,1,0,[{offset:0,color:"#2378f7"},{offset:.7,color:"#2378f7"},{offset:1,color:"#83bff6"}])}}}]};n.value.setOption(m)};return h(()=>{u()}),g(t,()=>{r()}),{activeTab:t,chartRef:o}}}),x={class:"device-ranking"},C={class:"header"},$={class:"tabs"},T={class:"chart-container"},I={ref:"chartRef",style:{width:"100%",height:"400px"}};function L(e,t,o,n,u,d){return D(),y("div",x,[a("div",C,[t[2]||(t[2]=a("h2",null,"设备排行榜",-1)),a("div",$,[a("button",{class:v({active:e.activeTab==="count"}),onClick:t[0]||(t[0]=r=>e.activeTab="count")}," 借用次数排名 ",2),a("button",{class:v({active:e.activeTab==="duration"}),onClick:t[1]||(t[1]=r=>e.activeTab="duration")}," 借用时长排名 ",2)])]),a("div",T,[a("div",I,null,512)])])}const B=w(k,[["render",L],["__scopeId","data-v-d73f2e98"]]);export{B as default};