rtu_linux_services/web-ui.service/web/static/js/page1.js

let cpuChart       = null;
let memChart       = null;
let diskChart      = null;
let sysStatusTimer = null;

function getSystemInfo(){
  fetch("/api/system/info")
  .then(r=>{
    if(!r.ok) throw new Error("HTTP "+r.status);
    return r.json();
  })
  .then(d=>{
    cpuChart.setOption({
      graphic:[{
        type:"text",
        left:"center",
        top:"75%",
        style:{
          text:`${d.cpu_cores||"--"}核 ${d.cpu_freq||"--"}MHz`,
          fill:"#aaa",
          fontSize:15
        }
      }],
      series:[{data:[{value:d.cpu_usage}]}]
    });

    memChart.setOption({
      graphic:[{
        type:"text",
        left:"center",
        top:"75%",
        style:{
          text:`${d.mem_used||"--"} / ${d.mem_total||"--"}`,
          fill:"#aaa",
          fontSize:15
        }
      }],
      series:[{data:[{value:d.mem_percent}]}]
    });

    diskChart.setOption({
      title:{
        text:`${d.disk_percent}%`,
        subtext:`${d.disk_used||"--"} / ${d.disk_total||"--"}`,
        left:"center",
        top:"38%",
        textStyle:{
          fontSize:38,
          fontWeight:"bold"
        },
        subtextStyle:{
          fontSize:15
        }
      },
      series:[{
        data:[
          {value:d.disk_percent,name:"已使用"},
          {value:100-d.disk_percent,name:"剩余"}
        ]
      }]
    });
  })
  .catch(e=>console.error("system info failed:",e));
}

function gaugeOption(){
  return {
    series:[{
      type:"gauge",
      radius:"95%",
      center:["50%","55%"],
      min:0,
      max:100,
      startAngle:210,
      endAngle:-30,
      axisLine:{
        lineStyle:{
          width:22
        }
      },
      progress:{
        show:true,
        width:22
      },
      pointer:{show:false},
      axisTick:{show:false},
      splitLine:{show:false},
      axisLabel:{show:false},
      detail:{
        fontSize:42,
        fontWeight:"bold",
        offsetCenter:[0,"0%"],
        formatter:"{value}%"
      },
      title:{show:false},
      data:[{value:0}]
    }]
  };
}

function startSysStatusRefresh(){
  if(sysStatusTimer) return;

  getSystemInfo();

  sysStatusTimer = setInterval(() => {
    getSystemInfo();
  }, 3000);
}

function stopSysStatusRefresh(){
  if(sysStatusTimer){
    clearInterval(sysStatusTimer);
    sysStatusTimer=null;
  }
}

function initPage1(){
  cpuChart=echarts.init(document.getElementById("cpu-chart"));
  memChart=echarts.init(document.getElementById("mem-chart"));
  diskChart=echarts.init(document.getElementById("disk-chart"));

  cpuChart.setOption(gaugeOption());
  memChart.setOption(gaugeOption());

  diskChart.setOption({
    title:{
      text:"0%",
      subtext:"-- / --",
      left:"center",
      top:"38%",
      textStyle:{
        fontSize:38,
        fontWeight:"bold"
      },
      subtextStyle:{
        fontSize:15
      }
    },
    series:[{
      type:"pie",
      radius:["65%","85%"],
      label:{show:false},
      data:[
        {value:0,name:"已使用"},
        {value:100,name:"剩余"}
      ]
    }]
  });

  startSysStatusRefresh();

  setTimeout(()=>{
    cpuChart.resize();
    memChart.resize();
    diskChart.resize();
  },500);
}

function exitPage1(){
  stopSysStatusRefresh();

  cpuChart?.dispose();
  memChart?.dispose();
  diskChart?.dispose();

  cpuChart=null;
  memChart=null;
  diskChart=null;
}