index.ftl 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <#import "./common/common.macro.ftl" as netCommon>
  5. <@netCommon.commonStyle />
  6. <!-- daterangepicker -->
  7. <link rel="stylesheet"
  8. href="${request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.css">
  9. <title>${I18n.admin_name}</title>
  10. </head>
  11. <body class="hold-transition skin-blue sidebar-mini <#if cookieMap?exists && cookieMap["xxljob_adminlte_settings"]?exists && "off" == cookieMap["xxljob_adminlte_settings"].value >sidebar-collapse</#if> ">
  12. <div class="wrapper">
  13. <!-- header -->
  14. <@netCommon.commonHeader />
  15. <!-- left -->
  16. <@netCommon.commonLeft "index" />
  17. <!-- Content Wrapper. Contains page content -->
  18. <div class="content-wrapper">
  19. <!-- Content Header (Page header) -->
  20. <section class="content-header">
  21. <h1>${I18n.job_dashboard_name}</h1>
  22. <!--
  23. <h1>运行报表<small>任务调度中心</small></h1>
  24. <ol class="breadcrumb">
  25. <li><a><i class="fa fa-dashboard"></i>调度中心</a></li>
  26. <li class="active">使用教程</li>
  27. </ol>
  28. -->
  29. </section>
  30. <!-- Main content -->
  31. <section class="content">
  32. <!-- 任务信息 -->
  33. <div class="row">
  34. <#-- 任务信息 -->
  35. <div class="col-md-4 col-sm-6 col-xs-12">
  36. <div class="info-box bg-aqua">
  37. <span class="info-box-icon"><i class="fa fa-flag-o"></i></span>
  38. <div class="info-box-content">
  39. <span class="info-box-text">${I18n.job_dashboard_job_num}</span>
  40. <span class="info-box-number">${jobInfoCount}</span>
  41. <div class="progress">
  42. <div class="progress-bar" style="width: 100%"></div>
  43. </div>
  44. <span class="progress-description">${I18n.job_dashboard_job_num_tip}</span>
  45. </div>
  46. </div>
  47. </div>
  48. <#-- 调度信息 -->
  49. <div class="col-md-4 col-sm-6 col-xs-12">
  50. <div class="info-box bg-yellow">
  51. <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
  52. <div class="info-box-content">
  53. <span class="info-box-text">${I18n.job_dashboard_trigger_num}</span>
  54. <span class="info-box-number">${jobLogCount}</span>
  55. <div class="progress">
  56. <div class="progress-bar" style="width: 100%"></div>
  57. </div>
  58. <span class="progress-description">
  59. ${I18n.job_dashboard_trigger_num_tip}
  60. <#--<#if jobLogCount gt 0>
  61. 调度成功率:${(jobLogSuccessCount*100/jobLogCount)?string("0.00")}<small>%</small>
  62. </#if>-->
  63. </span>
  64. </div>
  65. </div>
  66. </div>
  67. <#-- 执行器 -->
  68. <div class="col-md-4 col-sm-6 col-xs-12">
  69. <div class="info-box bg-green">
  70. <span class="info-box-icon"><i class="fa ion-ios-settings-strong"></i></span>
  71. <div class="info-box-content">
  72. <span class="info-box-text">${I18n.job_dashboard_jobgroup_num}</span>
  73. <span class="info-box-number">${executorCount}</span>
  74. <div class="progress">
  75. <div class="progress-bar" style="width: 100%"></div>
  76. </div>
  77. <span class="progress-description">${I18n.job_dashboard_jobgroup_num_tip}</span>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. <#-- 调度报表:时间区间筛选,左侧折线图 + 右侧饼图 -->
  83. <div class="row">
  84. <div class="col-md-12">
  85. <div class="box">
  86. <div class="box-header with-border">
  87. <h3 class="box-title">${I18n.job_dashboard_report}</h3>
  88. <#--<input type="text" class="form-control" id="filterTime" readonly >-->
  89. <!-- tools box -->
  90. <div class="pull-right box-tools">
  91. <button type="button" class="btn btn-primary btn-sm daterange pull-right"
  92. data-toggle="tooltip" id="filterTime">
  93. <i class="fa fa-calendar"></i>
  94. </button>
  95. <#--<button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse" data-toggle="tooltip" title="" style="margin-right: 5px;" data-original-title="Collapse">
  96. <i class="fa fa-minus"></i>
  97. </button>-->
  98. </div>
  99. <!-- /. tools -->
  100. </div>
  101. <div class="box-body">
  102. <div class="row">
  103. <#-- 左侧折线图 -->
  104. <div class="col-md-8">
  105. <div id="lineChart" style="height: 350px;"></div>
  106. </div>
  107. <#-- 右侧饼图 -->
  108. <div class="col-md-4">
  109. <div id="pieChart" style="height: 350px;"></div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. </section>
  117. <!-- /.content -->
  118. </div>
  119. <!-- /.content-wrapper -->
  120. <!-- footer -->
  121. <@netCommon.commonFooter />
  122. </div>
  123. <@netCommon.commonScript />
  124. <!-- daterangepicker -->
  125. <script src="${request.contextPath}/static/adminlte/bower_components/moment/moment.min.js"></script>
  126. <script src="${request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
  127. <#-- echarts -->
  128. <script src="${request.contextPath}/static/plugins/echarts/echarts.common.min.js"></script>
  129. <script src="${request.contextPath}/static/js/index.js"></script>
  130. </body>
  131. </html>