| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- <!DOCTYPE html>
- <html xmlns:th="http://www.thymeleaf.org">
- <head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
- <style>
- a{
- color: #005980;
- }
- .widget-small{
- background-color: #FFFFFF;
- overflow: hidden;
- text-align: center;
- border-radius: 2px;
- box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
- }
- .widget-small .fa{
- float: left;
- width: 40%;
- line-height: 80px;
- color: #FFFFFF;
- }
- .widget-user .fa{
- background-color: #029789;
- }
- .widget-visit .fa{
- background-color: #17a2b8;
- }
- .widget-message .fa{
- background-color: #fbad4c;
- }
- .widget-like .fa{
- background-color: #ff646d;
- }
- .widget-small-info{
- float: left;
- text-align: left;
- width: 40%;
- margin-left: 20px;
- margin-top: 18px;
- line-height: 24px;
- }
- .widget-small-info h4{
- font-size: 18px;
- }
- .widget-small-info span{
- font-size: 16px;
- }
- .project-introduce{
- min-height: 466px;
- }
- .project-introduce h4{
- font-weight: bold;
- margin-top: 12px;
- margin-bottom: 8px;
- }
- .project-introduce li{
- list-style: decimal;
- margin-left: 28px;
- }
- .alert {
- padding: 15px;
- margin-bottom: 10px;
- border: 1px solid transparent;
- border-radius: 4px;
- }
- .alert-info {
- color: #31708f;
- background-color: #d9edf7;
- border-color: #bce8f1;
- }
- </style>
- </head>
- <body class="timo-layout-page">
- <div class="layui-row layui-col-space15">
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">
- <span><i class="fa fa-dashboard"></i> dashboard</span>
- </div>
- <div id="chart1" class="layui-card-body" style="height:400px;"></div>
- </div>
- </div>
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">
- <span><i class="fa fa-table"></i> 系统信息</span>
- </div>
- <div class="layui-card-body">
- <div class="layui-card-body" style="height:200px;">
- <table class="layui-table timo-detail-table">
- <tbody>
- <tr>
- <th>操作系统</th>
- <td th:text="${osInfo}"></td>
- </tr>
- <tr>
- <th>JVM</th>
- <td th:text="${jvmInfo}"></td>
- </tr>
- <tr>
- <th>PID</th>
- <td th:text="${pid}"></td>
- </tr>
- <tr>
- <th>启动时间</th>
- <td th:text="${startAt}"></td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script th:src="@{/js/plugins/jquery-3.4.1.min.js}" charset="utf-8"></script>
- <script th:src="@{/lib/echarts-4.7.0/echarts.js}" charset="utf-8"></script>
- <script type="text/javascript" th:inline="javascript">
- /*function initChart() {
- var base = +new Date(2014, 9, 3);
- var oneDay = 24 * 3600 * 1000;
- var date = [];
- var data = [Math.random() * 150];
- var now = new Date(base);
- function addData(shift) {
- now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
- date.push(now);
- data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
- if (shift) {
- date.shift();
- data.shift();
- }
- now = new Date(+new Date(now) + oneDay);
- }
- for (var i = 1; i < 100; i++) {
- addData();
- }
- option = {
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: date
- },
- yAxis: {
- boundaryGap: [0, '50%'],
- type: 'value'
- },
- series: [
- {
- name:'成交',
- type:'bar',
- smooth:true,
- symbol: 'none',
- stack: 'a',
- areaStyle: {
- normal: {}
- },
- data: data
- }
- ]
- };
- setInterval(function () {
- addData(true);
- myChart.setOption({
- xAxis: {
- data: date
- },
- series: [{
- name:'成交',
- data: data
- }]
- });
- }, 500);
- var myChart = echarts.init(document.getElementById('chart1'));
- myChart.setOption(option)
- }
- initChart()*/
- </script>
- </body>
- </html>
|