rtu_linux_services/web-ui.service/web/pages/page1.html

<!doctype html>
<html lang="zh-CN">

<head>
<meta charset="utf-8">
<title>系统信息</title>
</head>

<body>
<div class="page1">
  <div class="page1-card page1-dash">
    <div class="page1-header"><svg class="icon"><use href="#i-trend" xlink:href="#i-trend"/></svg> 运行总览</div>
    <div class="dash-kpis">
      <div class="dash-kpi">
        <div class="dash-kpi-name">CPU 占用</div>
        <div class="dash-kpi-value" id="dk-cpu">--</div>
        <div class="dash-kpi-bar"><i class="dash-bar-fill" id="dk-cpu-bar"></i></div>
      </div>
      <div class="dash-kpi">
        <div class="dash-kpi-name">内存占用</div>
        <div class="dash-kpi-value" id="dk-mem">--</div>
        <div class="dash-kpi-bar"><i class="dash-bar-fill" id="dk-mem-bar"></i></div>
      </div>
      <div class="dash-kpi">
        <div class="dash-kpi-name">硬盘占用</div>
        <div class="dash-kpi-value" id="dk-disk">--</div>
        <div class="dash-kpi-bar"><i class="dash-bar-fill" id="dk-disk-bar"></i></div>
      </div>
      <div class="dash-kpi">
        <div class="dash-kpi-name">服务正常</div>
        <div class="dash-kpi-value" id="dk-svc">--</div>
      </div>
      <div class="dash-kpi">
        <div class="dash-kpi-name">持续开机</div>
        <div class="dash-kpi-value dash-kpi-txt" id="dk-uptime">--</div>
      </div>
    </div>
    <div class="dash-grid" id="dash-grid"></div>
    <div class="dash-foot" id="dash-updated">数据未刷新</div>
  </div>

  <div class="page1-grid-1">
    <div class="page1-card">
      <div class="page1-header"><svg class="icon"><use href="#i-cpu" xlink:href="#i-cpu"/></svg> CPU</div>
      <div id="cpu-chart" class="page1-chart"></div>
    </div>

    <div class="page1-card">
      <div class="page1-header"><svg class="icon"><use href="#i-mem" xlink:href="#i-mem"/></svg> 内存</div>
      <div id="mem-chart" class="page1-chart"></div>
    </div>

    <div class="page1-card">
      <div class="page1-header"><svg class="icon"><use href="#i-disk" xlink:href="#i-disk"/></svg> 硬盘</div>
      <div id="disk-chart" class="page1-chart"></div>
    </div>
  </div>
  <div class="page1-grid-2">
    <div class="page1-card">
      <div class="page1-header"><svg class="icon"><use href="#i-trend" xlink:href="#i-trend"/></svg> 统计</div>
      <div class="info-list">
        <div class="info-item">
          <span class="info-name">系统01分钟负载</span>
          <span class="info-value" id="load1m">--</span>
        </div>

        <div class="info-item">
          <span class="info-name">系统05分钟负载</span>
          <span class="info-value" id="load5m">--</span>
        </div>

        <div class="info-item">
          <span class="info-name">系统15分钟负载</span>
          <span class="info-value" id="load15m">--</span>
        </div>

        <div class="info-item">
          <span class="info-name">系统待运行任务</span>
          <span class="info-value" id="runQueue">--</span>
        </div>

        <div class="info-item">
          <span class="info-name">本次开机的时间</span>
          <span class="info-value" id="bootTime">--</span>
        </div>

        <div class="info-item">
          <span class="info-name">持续开机的时长</span>
          <span class="info-value" id="uptime">--</span>
        </div>
      </div>
    </div>

    <div class="page1-card service-card">
      <div class="page1-header"><svg class="icon"><use href="#i-box" xlink:href="#i-box"/></svg> 服务</div>
      <div class="info-list">
        <div class="info-item">
          <div class="info-info">
            <div class="info-name">开机任务执行</div>
            <div class="info-desc">local-startup.service</div>
          </div>
          <span class="info-value" id="var10">--</span>
        </div>

        <div class="info-item">
          <div class="info-info">
            <div class="info-name">设备自动联网</div>
            <div class="info-desc">networkd.service</div>
          </div>
          <span class="info-value" id="var1">--</span>
          <span class="svc-ops"><span class="info-value" id="var11">--</span><button class="btn" style="margin-right:32px;" onclick="switchServiceVersion('yfkj-networkd.service', 'factory')">恢复出厂版本</button><button class="btn" onclick="switchServiceVersion('yfkj-networkd.service', 'previous')">回退上一版本</button></span>
        </div>

        <div class="info-item">
          <div class="info-info">
            <div class="info-name">同步系统时间</div>
            <div class="info-desc">timesyncd.service</div>
          </div>
          <span class="info-value" id="var2">--</span>
          <span class="svc-ops"><span class="info-value" id="var22">--</span><button class="btn" style="margin-right:32px;" onclick="switchServiceVersion('yfkj-timesyncd.service', 'factory')">恢复出厂版本</button><button class="btn" onclick="switchServiceVersion('yfkj-timesyncd.service', 'previous')">回退上一版本</button></span>
        </div>

        <div class="info-item">
          <div class="info-info">
            <div class="info-name">地理坐标定位</div>
            <div class="info-desc">gnss.service</div>
          </div>
          <span class="info-value" id="var3">--</span>
          <span class="svc-ops"><span class="info-value" id="var33">--</span><button class="btn" style="margin-right:32px;" onclick="switchServiceVersion('yfkj-gnss.service', 'factory')">恢复出厂版本</button><button class="btn" onclick="switchServiceVersion('yfkj-gnss.service', 'previous')">回退上一版本</button></span>
        </div>

        <div class="info-item">
          <div class="info-info">
            <div class="info-name">远程运维通道</div>
            <div class="info-desc">sshd-mqtt-bridge.service</div>
          </div>
          <span class="info-value" id="var4">--</span>
          <span class="svc-ops"><span class="info-value" id="var44">--</span><button class="btn" style="margin-right:32px;" onclick="switchServiceVersion('yfkj-sshd-mqtt-bridge.service', 'factory')">恢复出厂版本</button><button class="btn" onclick="switchServiceVersion('yfkj-sshd-mqtt-bridge.service', 'previous')">回退上一版本</button></span>
        </div>

        <div class="info-item">
          <div class="info-info">
            <div class="info-name">相机图像采集</div>
            <div class="info-desc">camera-capture.service</div>
          </div>
          <span class="info-value" id="var5">--</span>
          <span class="svc-ops"><span class="info-value" id="var55">--</span><button class="btn" style="margin-right:32px;" onclick="switchServiceVersion('yfkj-camera-capture.service', 'factory')">恢复出厂版本</button><button class="btn" onclick="switchServiceVersion('yfkj-camera-capture.service', 'previous')">回退上一版本</button></span>
        </div>

        <div class="info-item">
          <div class="info-info">
            <div class="info-name">应用安装卸载</div>
            <div class="info-desc">app-install.service</div>
          </div>
          <span class="info-value" id="var6">--</span>
          <span class="svc-ops"><span class="info-value" id="var66">--</span><button class="btn" style="margin-right:32px;" onclick="switchServiceVersion('yfkj-app-install.service', 'factory')">恢复出厂版本</button><button class="btn" onclick="switchServiceVersion('yfkj-app-install.service', 'previous')">回退上一版本</button></span>
        </div>

        <div class="info-item">
          <div class="info-info">
            <div class="info-name">本地配置管理</div>
            <div class="info-desc">web-ui.service</div>
          </div>
          <span class="info-value" id="var7">--</span>
          <span class="svc-ops"><span class="info-value" id="var77">--</span><button class="btn" style="margin-right:32px;" onclick="switchServiceVersion('yfkj-web-ui.service', 'factory')">恢复出厂版本</button><button class="btn" onclick="switchServiceVersion('yfkj-web-ui.service', 'previous')">回退上一版本</button></span>
        </div>

        <div class="info-item">
          <div class="info-info">
            <div class="info-name">公网配置管理</div>
            <div class="info-desc">web-ui.service</div>
          </div>
          <span class="info-value" id="var8">--</span>
          <span class="svc-ops"><span class="info-value" id="var88">--</span><button class="btn" style="margin-right:32px;" onclick="startPublicAccess(event)">开启公网访问</button><button class="btn" style="margin-right:32px;" onclick="stopPublicAccess(event)">关闭公网访问</button></span>
        </div>

        <div class="info-item">
          <div class="info-info">
            <div class="info-name">设备自动升级</div>
            <div class="info-desc">upgrade.service</div>
          </div>
          <span class="info-value" id="var9">--</span>
          <span class="svc-ops"><span class="info-value" id="var99">--</span><button class="btn" style="margin-right:02px;" onclick="switchAutoUpgrade(event, 'enable --now')">开启</button><button class="btn" style="margin-right:32px;" onclick="switchAutoUpgrade(event, 'disable --now')">关闭</button><button class="btn" onclick="downloadUpgradeLogFile(event)">下载升级日志</button></span>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

</html>