| 1 |
- import{H as e,K as t,Q as n,U as r,V as i,X as a,Y as o,d as s,it as c,m as l,ot as u,q as d,tt as f}from"./vue-router-DiegbtGD.js";import{n as p,r as m,t as h}from"./AppLayout-r9BI5ihT.js";import{t as g}from"./helpers-B5dMFDUW.js";import{t as _}from"./echarts-_A7zOSGa.js";var v={class:`dashboard`},y=p(d({__name:`Dashboard`,setup(d){let p=u(!0),y=u(null),b=u(null),x=u(),S=u(),C=null,w=null,T=[{title:`客户端ID`,dataIndex:`clientid`,key:`clientid`,ellipsis:!0},{title:`事件`,dataIndex:`event`,key:`event`,customRender:({text:e})=>e===`client.connected`?`连接`:`断开`},{title:`时间`,dataIndex:`timestamp`,key:`timestamp`,customRender:({text:e})=>g(e)}],E=[{title:`客户端ID`,dataIndex:`clientid`,key:`clientid`,ellipsis:!0},{title:`主题`,dataIndex:`topic`,key:`topic`,ellipsis:!0},{title:`时间`,dataIndex:`message_time`,key:`message_time`,customRender:({text:e})=>g(e)}],D=async()=>{p.value=!0,y.value=null;try{let e=await s.getOverview();e&&e.success&&e.data?b.value=e.data:e&&!e.success?y.value=e.message||`获取仪表板数据失败`:y.value=`获取仪表板数据失败`}catch(e){console.error(`获取仪表板数据时发生错误:`,e),y.value=e?.message||e?.error||`获取仪表板数据时发生错误`}finally{p.value=!1}},O=()=>{x.value&&(C=_(x.value),k())},k=()=>{if(!C)return;let e=b.value?.deviceStatusDistribution;C.setOption({tooltip:{trigger:`item`},legend:{bottom:0},series:[{type:`pie`,radius:[`40%`,`70%`],avoidLabelOverlap:!1,itemStyle:{borderRadius:10,borderColor:`#fff`,borderWidth:2},label:{show:!1},emphasis:{label:{show:!0,fontSize:16,fontWeight:`bold`}},data:[{value:e?.online||0,name:`在线`,itemStyle:{color:`#52c41a`}},{value:e?.offline||0,name:`离线`,itemStyle:{color:`#ff4d4f`}},{value:e?.unknown||0,name:`未知`,itemStyle:{color:`#d9d9d9`}}]}]})},A=async()=>{if(S.value){w=_(S.value);try{let e=await l.getMessageHeatmapData(7);e&&e.success&&Array.isArray(e.data)&&w.setOption({tooltip:{position:`top`},grid:{top:10,bottom:30,left:60,right:20},xAxis:{type:`category`,data:Array.from({length:24},(e,t)=>`${t}时`)},yAxis:{type:`category`,data:e.data.map(e=>e.date||e.day)},visualMap:{min:0,max:100,calculable:!0,orient:`horizontal`,left:`center`,bottom:0},series:[{type:`heatmap`,data:e.data.flatMap((e,t)=>(e.hours||[]).map(e=>[e.hour||0,t,e.count||0])),label:{show:!1},emphasis:{itemStyle:{shadowBlur:10,shadowColor:`rgba(0, 0, 0, 0.5)`}}}]})}catch{}}};return m(`recent_connections`,e=>{b.value&&e&&(Array.isArray(e)?b.value.recentConnections=e:e.connections&&Array.isArray(e.connections)&&(b.value.recentConnections=e.connections))}),m(`device_status_distribution`,e=>{b.value&&e&&(b.value.deviceStatusDistribution=e,k())}),a(async()=>{await D(),await o(),O(),A()}),(a,o)=>{let s=f(`a-alert`),l=f(`a-statistic`),u=f(`a-card`),d=f(`a-col`),m=f(`a-row`),g=f(`a-table`),_=f(`a-spin`);return n(),e(h,null,{default:c(()=>[i(`div`,v,[t(_,{spinning:p.value},{default:c(()=>[y.value?(n(),e(s,{key:0,message:y.value,type:`error`,"show-icon":``,style:{"margin-bottom":`16px`}},null,8,[`message`])):r(``,!0),t(m,{gutter:[16,16]},{default:c(()=>[t(d,{xs:12,sm:6},{default:c(()=>[t(u,null,{default:c(()=>[t(l,{title:`设备总数`,value:b.value?.summary?.totalDevices||0,"value-style":{color:`#1890ff`}},null,8,[`value`])]),_:1})]),_:1}),t(d,{xs:12,sm:6},{default:c(()=>[t(u,null,{default:c(()=>[t(l,{title:`在线设备`,value:b.value?.summary?.onlineDevices||0,"value-style":{color:`#52c41a`}},null,8,[`value`])]),_:1})]),_:1}),t(d,{xs:12,sm:6},{default:c(()=>[t(u,null,{default:c(()=>[t(l,{title:`连接总数`,value:b.value?.summary?.totalConnections||0,"value-style":{color:`#722ed1`}},null,8,[`value`])]),_:1})]),_:1}),t(d,{xs:12,sm:6},{default:c(()=>[t(u,null,{default:c(()=>[t(l,{title:`消息总数`,value:b.value?.summary?.totalMessages||0,"value-style":{color:`#faad14`}},null,8,[`value`])]),_:1})]),_:1})]),_:1}),t(m,{gutter:[16,16],style:{"margin-top":`16px`}},{default:c(()=>[t(d,{xs:24,lg:12},{default:c(()=>[t(u,{title:`设备状态分布`},{default:c(()=>[i(`div`,{ref_key:`deviceChartRef`,ref:x,style:{height:`300px`}},null,512)]),_:1})]),_:1}),t(d,{xs:24,lg:12},{default:c(()=>[t(u,{title:`消息热力图`},{default:c(()=>[i(`div`,{ref_key:`heatmapChartRef`,ref:S,style:{height:`300px`}},null,512)]),_:1})]),_:1})]),_:1}),t(m,{gutter:[16,16],style:{"margin-top":`16px`}},{default:c(()=>[t(d,{xs:24,lg:12},{default:c(()=>[t(u,{title:`最近连接`},{default:c(()=>[t(g,{dataSource:b.value?.recentConnections||[],columns:T,pagination:!1,size:`small`,scroll:{x:400},"row-key":`id`},null,8,[`dataSource`])]),_:1})]),_:1}),t(d,{xs:24,lg:12},{default:c(()=>[t(u,{title:`最近消息`},{default:c(()=>[t(g,{dataSource:b.value?.recentMessages||[],columns:E,pagination:!1,size:`small`,scroll:{x:400},"row-key":`id`},null,8,[`dataSource`])]),_:1})]),_:1})]),_:1})]),_:1},8,[`spinning`])])]),_:1})}}}),[[`__scopeId`,`data-v-c61e0bfa`]]);export{y as default};
|
