<!DOCTYPE html>
<html>
<head>
  <div  th:replace="common/header.html"></div>


</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div th:replace="common/chart.html"></div>

<div class="wrapper">

  <div th:replace="common/navbar.html"></div>

  <div th:replace="common/aside.html"></div>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper" style="font-size: 0.9rem">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1></h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item active"></li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">

  <div class="col-md-12">
    <div class="card card-primary">
      <div class="card-header">
        <h3 class="card-title" th:text="${appInfo.hostname}">进程信息</h3>(每1分钟监控)
        <div class=" float-sm-right">
          <a th:href="@{'/appInfo/list'}">返回</a>
        </div>
      </div>
      <!-- /.card-header -->
      <!-- form start -->
      <form role="form">
        <div class="card-body">
          <div class="form-group">
            <label for="exampleInputEmail1">进程</label>
              <div  th:text="${appInfo.hostname}+'，名称：'+${appInfo.appName}+'，进程ID：'+${appInfo.appPid}"></div>
          </div>
        </div>
        <!-- /.card-body -->
      </form>
      <!-- /.card-body -->

      <div class="row">
        <div class="col-12 table-responsive">
          <table class="table table-striped">
            <tbody><tr>
              <th:block th:each="item : ${dateList}">
                <th:block th:if="${item eq  datenow}">
                  <td> <button type="button" title="当前已显示该日期相关图表" class="btn btn-block btn-outline-danger btn-sm" th:text="${item}">Primary</button></td>
                </th:block>
                <th:block th:unless="${item eq  datenow}">
                  <td> <button type="button"  th:onclick="viewDate([[${appInfo.id}]],[[${item}]])" class="btn btn-block btn-outline-primary btn-sm" th:text="${item}">Primary</button></td>
                </th:block>
              </th:block>
            </tr>
            </tbody>
          </table>
        </div>
        <!-- /.col -->
      </div>


        <label style="margin-left: .9rem">cpu使用率%</label>
        <div id="cpuStateJson"></div>

        <label style="margin-left: .9rem">内存使用率%</label>
        <div id="memStateJson"></div>

    </div>
    <!-- /.card -->


  </div>

        </div>
      </div>
    </section>
  </div>


  <div th:replace="common/footer.html"></div>

</div>
<!-- ./wrapper -->

<script th:src="@{'/static/js/app.js'}"></script>


<script th:inline="javascript">
    var appStateJson =[[${appStateList}]];
    $(function() {
      var chart = new G2.Chart({
        container: 'cpuStateJson',
        forceFit: true,
        height: 500,
        padding: [30, 40, 70, 40]
      });
      chart.axis('dateStr', {
        label: {
          textStyle: {
            fill: '#aaaaaa'
          }
        }
      });
      chart.axis('cpuPer', {
        label: {
          textStyle: {
            fill: '#aaaaaa'
          }
        }
      });
      chart.tooltip({
        crosshairs: false
      });
      chart.legend({
        position: 'top-center'
      });
      chart.source(appStateJson, {
        cpuPer: {
          alias: 'cpu使用率'
        }
      });
      chart.scale('dateStr',{tickCount: 12,alias: '时间'});
      chart.line().position('dateStr*cpuPer').color('#1890ff');
      chart.render();


      var chart2 = new G2.Chart({
        container: 'memStateJson',
        forceFit: true,
        height: 500,
        padding: [30, 40, 70, 40]
      });
      chart2.axis('dateStr', {
        label: {
          textStyle: {
            fill: '#aaaaaa'
          }
        }
      });
      chart2.axis('memPer', {
        label: {
          textStyle: {
            fill: '#aaaaaa'
          }
        }
      });
      chart2.tooltip({
        crosshairs: false
      });
      chart2.legend({
        position: 'top-center'
      });
      chart2.source(appStateJson, {
        memPer: {
          alias: '内存占用M'
        }
      });
      chart2.scale('dateStr', {tickCount: 12, alias: '时间'});
      chart2.line().position('dateStr*memPer').color('#1890ff');
      chart2.render();

    })

</script>


</body>
</html>
