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

let cpuChart       = null;
let memChart       = null;
let diskChart      = null;
let sysStatusTimer = null;
let resizeHandler  = null;
let page1Active    = false;

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  温度${d.cpu_temp||"--"}`,
          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 getLoadInfo(){
  fetch("/api/system/loadAverage")
    .then(async r => {
      if (!r.ok) {
        throw new Error("HTTP " + r.status);
      }

      return r.json();
    })
    .then(data => {
      if(!page1Active){
        return;
      }
      document.getElementById("load1m").textContent = data.load1m || "--";
      document.getElementById("load5m").textContent = data.load5m || "--";
      document.getElementById("load15m").textContent = data.load15m || "--";
      document.getElementById("runQueue").textContent = data.runQueue || "--";
    })
    .catch(e => {
      if(!page1Active){
        return;
      }
      console.error("network status failed:", e);

      document.getElementById("load1m").textContent = "--";
      document.getElementById("load5m").textContent = "--";
      document.getElementById("load15m").textContent = "--";
      document.getElementById("runQueue").textContent = "--";
    });
}

function getServiceInfo(){
  fetch("/api/system/serviceStatus")
    .then(r => {
      if (!r.ok) {
        throw new Error("HTTP " + r.status);
      }

      return r.json();
    })
    .then(data => {
      if(!page1Active){
        return;
      }
      document.getElementById("var1").textContent = data.var1 || "--";
      document.getElementById("var2").textContent = data.var2 || "--";
      document.getElementById("var3").textContent = data.var3 || "--";
      document.getElementById("var4").textContent = data.var4 || "--";
      document.getElementById("var5").textContent = data.var5 || "--";
      document.getElementById("var6").textContent = data.var6 || "--";
      document.getElementById("var7").textContent = data.var7 || "--";
      document.getElementById("var8").textContent = data.var8 || "--";
      document.getElementById("var11").textContent = data.var11 || "--";
      document.getElementById("var22").textContent = data.var22 || "--";
      document.getElementById("var33").textContent = data.var33 || "--";
      document.getElementById("var44").textContent = data.var44 || "--";
      document.getElementById("var55").textContent = data.var55 || "--";
      document.getElementById("var66").textContent = data.var66 || "--";
      document.getElementById("var77").textContent = data.var77 || "--";
      document.getElementById("var88").textContent = data.var88 || "--";
    })
    .catch(e => {
      if(!page1Active){
        return;
      }
      console.error("getAllServiceStatus() failed:", e);

      document.getElementById("var1").textContent = "--";
      document.getElementById("var2").textContent = "--";
      document.getElementById("var3").textContent = "--";
      document.getElementById("var4").textContent = "--";
      document.getElementById("var5").textContent = "--";
      document.getElementById("var6").textContent = "--";
      document.getElementById("var7").textContent = "--";
      document.getElementById("var8").textContent = "--";
      document.getElementById("var11").textContent = "--";
      document.getElementById("var22").textContent = "--";
      document.getElementById("var33").textContent = "--";
      document.getElementById("var44").textContent = "--";
      document.getElementById("var55").textContent = "--";
      document.getElementById("var66").textContent = "--";
      document.getElementById("var77").textContent = "--";
      document.getElementById("var88").textContent = "--";
    });
}

function startSysStatusRefresh(){
  if(sysStatusTimer) return;

  getSystemInfo();
  getLoadInfo();
  getServiceInfo();

  sysStatusTimer = setInterval(() => {
    getSystemInfo();
    getLoadInfo();
    getServiceInfo();
  }, 5000);
}

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

function resizeSysCharts(){
  cpuChart?.resize();
  memChart?.resize();
  diskChart?.resize();
}

function initPage1(){
  page1Active = true;

  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();

  resizeHandler = resizeSysCharts;

  window.addEventListener(
    "resize",
    resizeHandler
  );

  setTimeout(()=>{
    resizeSysCharts();
  },100);
}

function exitPage1(){
  page1Active = false;

  stopSysStatusRefresh();

  if(resizeHandler){
    window.removeEventListener(
      "resize",
      resizeHandler
    );
    resizeHandler=null;
  }

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

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