index1.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
  4. <style>
  5. a{
  6. color: #005980;
  7. }
  8. .widget-small{
  9. background-color: #FFFFFF;
  10. overflow: hidden;
  11. text-align: center;
  12. border-radius: 2px;
  13. box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  14. }
  15. .widget-small .fa{
  16. float: left;
  17. width: 40%;
  18. line-height: 80px;
  19. color: #FFFFFF;
  20. }
  21. .widget-user .fa{
  22. background-color: #029789;
  23. }
  24. .widget-visit .fa{
  25. background-color: #17a2b8;
  26. }
  27. .widget-message .fa{
  28. background-color: #fbad4c;
  29. }
  30. .widget-like .fa{
  31. background-color: #ff646d;
  32. }
  33. .widget-small-info{
  34. float: left;
  35. text-align: left;
  36. width: 40%;
  37. margin-left: 20px;
  38. margin-top: 18px;
  39. line-height: 24px;
  40. }
  41. .widget-small-info h4{
  42. font-size: 18px;
  43. }
  44. .widget-small-info span{
  45. font-size: 16px;
  46. }
  47. .project-introduce{
  48. min-height: 466px;
  49. }
  50. .project-introduce h4{
  51. font-weight: bold;
  52. margin-top: 12px;
  53. margin-bottom: 8px;
  54. }
  55. .project-introduce li{
  56. list-style: decimal;
  57. margin-left: 28px;
  58. }
  59. .alert {
  60. padding: 15px;
  61. margin-bottom: 10px;
  62. border: 1px solid transparent;
  63. border-radius: 4px;
  64. }
  65. .alert-info {
  66. color: #31708f;
  67. background-color: #d9edf7;
  68. border-color: #bce8f1;
  69. }
  70. </style>
  71. </head>
  72. <body class="timo-layout-page">
  73. <div class="layui-row layui-col-space15">
  74. <div class="layui-col-md6">
  75. <div class="layui-card">
  76. <div class="layui-card-header">
  77. <span><i class="fa fa-dashboard"></i> dashboard</span>
  78. </div>
  79. <div id="chart1" class="layui-card-body" style="height:400px;"></div>
  80. </div>
  81. </div>
  82. <div class="layui-col-md6">
  83. <div class="layui-card">
  84. <div class="layui-card-header">
  85. <span><i class="fa fa-table"></i> 系统信息</span>
  86. </div>
  87. <div class="layui-card-body">
  88. <div class="layui-card-body" style="height:200px;">
  89. <table class="layui-table timo-detail-table">
  90. <tbody>
  91. <tr>
  92. <th>操作系统</th>
  93. <td th:text="${osInfo}"></td>
  94. </tr>
  95. <tr>
  96. <th>JVM</th>
  97. <td th:text="${jvmInfo}"></td>
  98. </tr>
  99. <tr>
  100. <th>PID</th>
  101. <td th:text="${pid}"></td>
  102. </tr>
  103. <tr>
  104. <th>启动时间</th>
  105. <td th:text="${startAt}"></td>
  106. </tr>
  107. </tbody>
  108. </table>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <script th:src="@{/js/plugins/jquery-3.4.1.min.js}" charset="utf-8"></script>
  115. <script th:src="@{/lib/echarts-4.7.0/echarts.js}" charset="utf-8"></script>
  116. <script type="text/javascript" th:inline="javascript">
  117. /*function initChart() {
  118. var base = +new Date(2014, 9, 3);
  119. var oneDay = 24 * 3600 * 1000;
  120. var date = [];
  121. var data = [Math.random() * 150];
  122. var now = new Date(base);
  123. function addData(shift) {
  124. now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
  125. date.push(now);
  126. data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
  127. if (shift) {
  128. date.shift();
  129. data.shift();
  130. }
  131. now = new Date(+new Date(now) + oneDay);
  132. }
  133. for (var i = 1; i < 100; i++) {
  134. addData();
  135. }
  136. option = {
  137. xAxis: {
  138. type: 'category',
  139. boundaryGap: false,
  140. data: date
  141. },
  142. yAxis: {
  143. boundaryGap: [0, '50%'],
  144. type: 'value'
  145. },
  146. series: [
  147. {
  148. name:'成交',
  149. type:'bar',
  150. smooth:true,
  151. symbol: 'none',
  152. stack: 'a',
  153. areaStyle: {
  154. normal: {}
  155. },
  156. data: data
  157. }
  158. ]
  159. };
  160. setInterval(function () {
  161. addData(true);
  162. myChart.setOption({
  163. xAxis: {
  164. data: date
  165. },
  166. series: [{
  167. name:'成交',
  168. data: data
  169. }]
  170. });
  171. }, 500);
  172. var myChart = echarts.init(document.getElementById('chart1'));
  173. myChart.setOption(option)
  174. }
  175. initChart()*/
  176. </script>
  177. </body>
  178. </html>