<template>
 <div class="charts" style="background: #fff; padding: 15px">

 <a-card title="系统信息" :bordered="false">
   <p>在线用户：{{sysparams.name}}</p>
   <p>用户数量：{{sysparams.count}}</p>
   <p>系统当前时间：{{sysparams.current_time}}</p>
   <p>系统开机时间：{{sysparams.start_time}}</p>
 </a-card>
 <a-card title="cpu使用率" :bordered="false">
 <echarts class="chart" :option="option"/>
 </a-card>

 <a-card title="memory使用率" :bordered="false">
 <echarts class="chart" :option="memory"/>
 </a-card>


 </div>

</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {Cpu, SysInfo} from "@/api/monitor"
let sysparams = reactive({
  count: 0,
  name: "",
  current_time: "",
  start_time: "",
  cpu_percent: 0,
})
const option = reactive({
 tooltip: {
 formatter: '{a} <br/>{b} : {c}%'
 },
 series: [
 {
 name: 'cpu',
 type: 'gauge',
 detail: {
 formatter: '{value}'
 },
 data: [
 {
 value: 60,
 name: 'cpu'
 }
 ]
 }
 ]
})

const memory = ref({
 tooltip: {
 formatter: '{a} <br/>{b} : {c}%'
 },
 series: [
 {
 name: 'memory',
 type: 'gauge',
 progress: {
 show: true
 },
 detail: {
 valueAnimation: true,
 formatter: '{value}'
 },
 data: [
 {
 value: 60,
 name: 'memory'
 }
 ]
 }
 ]
})

onMounted(()=>{
  QuerySys()
  QueryCpu()
  setInterval(()=>{
    QuerySys();
    QueryCpu();

  },5000)
})
function QuerySys() {
  SysInfo().then((response)=>{
    if (response.code===200){
      let {count,name,current_time,start_time} = response.data
        sysparams.count = count
        sysparams.name = name
        sysparams.current_time = current_time
        sysparams.start_time = start_time

    }
  })
}
const QueryCpu =()=>{
  Cpu().then((rep)=>{
    let {cpu_percent} =rep.data
    option.series.forEach((data)=>{
      data.data.forEach((key)=>{
        key.value = cpu_percent
      })
    })
    console.log(rep.data)

  })
}
</script>


<style scoped>
.chart {

 height: 300px;
 width: 300px;
}
.a-card{
 width: 300px;
 height: 300px;
}

.charts {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap
}
p{
  display: flex;
  justify-content: flex-start;
  font-size: 16px;
  font-weight: bold;
}
</style>