|
|
@@ -1,6 +1,5 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html xmlns:th="http://www.thymeleaf.org"
|
|
|
- xmlns:mo="https://gitee.com/aun/Timo">
|
|
|
+<html xmlns:th="http://www.thymeleaf.org">
|
|
|
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
|
|
|
<style>
|
|
|
a{
|
|
|
@@ -75,23 +74,40 @@
|
|
|
<div class="layui-row layui-col-space15">
|
|
|
<div class="layui-col-md8">
|
|
|
<div class="layui-card">
|
|
|
- <div class="layui-card-header">部署次数</div>
|
|
|
- <div id="chart1" class="layui-card-body" style="width: 800px;height:400px;"></div>
|
|
|
- </div>
|
|
|
- <div class="layui-card">
|
|
|
- <div class="layui-card-header">应用状态</div>
|
|
|
- <div id="chart2" class="layui-card-body" style="width: 800px;height:400px;"></div>
|
|
|
- </div>
|
|
|
- <div class="layui-card">
|
|
|
- <div class="layui-card-header">部署历史</div>
|
|
|
- <div id="chart3" class="layui-card-body" style="width: 800px;height:400px;"></div>
|
|
|
+ <div class="layui-card-header">dashboard</div>
|
|
|
+ <div id="chart1" class="layui-card-body" style="height:400px;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-md4">
|
|
|
<div class="layui-card">
|
|
|
- <div class="layui-card-header">应用类型</div>
|
|
|
+ <div class="layui-card-header">
|
|
|
+ <span><i class="fa fa-table"></i> 系统信息</span>
|
|
|
+ </div>
|
|
|
<div class="layui-card-body">
|
|
|
- <div id="chart4" class="layui-card-body" style="width: 400px;height:400px;"></div>
|
|
|
+ <div class="layui-card-body" style="height:400px;">
|
|
|
+ <li class="layui-timeline-item">
|
|
|
+ <i class="layui-icon layui-timeline-axis"></i>
|
|
|
+ <div class="layui-timeline-content layui-text">
|
|
|
+ <h3 class="layui-timeline-title">操作系统</h3>
|
|
|
+ <p th:text="${osInfo}"></p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="layui-timeline-item">
|
|
|
+ <i class="layui-icon layui-timeline-axis"></i>
|
|
|
+ <div class="layui-timeline-content layui-text">
|
|
|
+ <h3 class="layui-timeline-title">JVM</h3>
|
|
|
+ <p th:text="${jvmInfo}"></p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="layui-timeline-item">
|
|
|
+ <i class="layui-icon layui-timeline-axis"></i>
|
|
|
+ <div class="layui-timeline-content layui-text">
|
|
|
+ <h3 class="layui-timeline-title">进程</h3>
|
|
|
+ <p th:text="${pid}"></p>
|
|
|
+ <p th:text="${startAt}"></p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -100,147 +116,70 @@
|
|
|
<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 getPageByCriteria() {
|
|
|
- var envSelectedOption = $("#getPageByEnv option:selected")
|
|
|
- var envParam = envSelectedOption.text()
|
|
|
+ /*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);
|
|
|
|
|
|
- params = '?env=' + envParam
|
|
|
- window.location.href = window.location.pathname + params;
|
|
|
- }
|
|
|
+ function addData(shift) {
|
|
|
+ now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
|
|
|
+ date.push(now);
|
|
|
|
|
|
- function chart1() {
|
|
|
- var chartZhu = echarts.init(document.getElementById('chart1'));
|
|
|
- //指定图表配置项和数据
|
|
|
- var option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['npm', 'dotnetCore']
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'npm',
|
|
|
- type: 'line',
|
|
|
- data: [120, 220, 214, 238, 125, 117, 210],
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'dotnetCore',
|
|
|
- type: 'line',
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- chartZhu.setOption(option, true);
|
|
|
- }
|
|
|
+ data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
|
|
|
|
|
|
- function chart2() {
|
|
|
- var chartZhu = echarts.init(document.getElementById('chart2'));
|
|
|
- //指定图表配置项和数据
|
|
|
- var option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
- type: 'line'
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- chartZhu.setOption(option, true);
|
|
|
- }
|
|
|
+ if (shift) {
|
|
|
+ date.shift();
|
|
|
+ data.shift();
|
|
|
+ }
|
|
|
+ now = new Date(+new Date(now) + oneDay);
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var i = 1; i < 100; i++) {
|
|
|
+ addData();
|
|
|
+ }
|
|
|
|
|
|
- function chart3() {
|
|
|
- var chartZhu = echarts.init(document.getElementById('chart3'));
|
|
|
- //指定图表配置项和数据
|
|
|
- var option = {
|
|
|
+ option = {
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ boundaryGap: false,
|
|
|
+ data: date
|
|
|
},
|
|
|
yAxis: {
|
|
|
+ boundaryGap: [0, '50%'],
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
- type: 'line'
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- chartZhu.setOption(option, true);
|
|
|
- }
|
|
|
-
|
|
|
- function chart4() {
|
|
|
- var option1 = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: '5%',
|
|
|
- left: 'center'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'App Type',
|
|
|
- type: 'pie',
|
|
|
- radius: ['40%', '70%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- itemStyle: {
|
|
|
- borderRadius: 10,
|
|
|
- borderColor: '#fff',
|
|
|
- borderWidth: 2
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'center'
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- fontSize: 40,
|
|
|
- fontWeight: 'bold'
|
|
|
- }
|
|
|
+ name:'成交',
|
|
|
+ type:'bar',
|
|
|
+ smooth:true,
|
|
|
+ symbol: 'none',
|
|
|
+ stack: 'a',
|
|
|
+ areaStyle: {
|
|
|
+ normal: {}
|
|
|
},
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: [
|
|
|
- { value: 7, name: 'DotNotCore' },
|
|
|
- { value: 3, name: 'NPM' }
|
|
|
- ]
|
|
|
+ data: data
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
-
|
|
|
- var chart1 = echarts.init(document.getElementById('chart4'));
|
|
|
- chart1.setOption(option1, true);
|
|
|
- /*var envSelectedOption = $("#getPageByEnv option:selected")
|
|
|
- var envParam = envSelectedOption.text()
|
|
|
- $.get('/api/home/app?env=' + envParam,function(result){
|
|
|
- if (result.code === 0) {
|
|
|
- console.log(result.data)
|
|
|
- option1.series[0].data = result.data
|
|
|
-
|
|
|
- var chart1 = echarts.init(document.getElementById('chart4'));
|
|
|
- chart1.setOption(option1, true);
|
|
|
- }
|
|
|
- });*/
|
|
|
+ setInterval(function () {
|
|
|
+ addData(true);
|
|
|
+ myChart.setOption({
|
|
|
+ xAxis: {
|
|
|
+ data: date
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name:'成交',
|
|
|
+ data: data
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
+ var myChart = echarts.init(document.getElementById('chart1'));
|
|
|
+ myChart.setOption(option)
|
|
|
}
|
|
|
-
|
|
|
- chart1()
|
|
|
- chart2()
|
|
|
- chart3()
|
|
|
- chart4()
|
|
|
+ initChart()*/
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
