Skip to content

O
ocrCloudPlatformAdmin
Commit 76183631 by 杨琪琪
Options

ocr调用统计-折线图添加超量显示；授权管理-添加折线图；

parent aef9242c
Showing with 47 additions and 18 deletions
src/main/resources/static/js/callSupervision/callChartOptions.js
...@@ -20,7 +20,7 @@ var defaultLineOptions = { ...@@ -20,7 +20,7 @@ var defaultLineOptions = {
legend: { legend: {
data: [], data: [],
textStyle: { textStyle: {
color: "#fff", // color: "#fff",
fontSize: 13, fontSize: 13,
}, },
type: 'scroll', type: 'scroll',
...@@ -57,6 +57,7 @@ var defaultLineOptions = { ...@@ -57,6 +57,7 @@ var defaultLineOptions = {
end: 100 end: 100
} }
], ],
visualMap: null,
series: [] series: []
} }
var defaultXBarOptions = { var defaultXBarOptions = {
......
src/main/resources/templates/callSupervision/index.html
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</style> </style>
</head> </head>
<body> <body>
<div class="layui-layout"> <div class="layui-layout" id="charts-content">
<div class="layui-row layui-col-space5" style="height: 60vh"> <div class="layui-row layui-col-space5" style="height: 60vh">
<div class="layui-col-xs8" style="height: 100%"> <div class="layui-col-xs8" style="height: 100%">
<div class="content-box box-border" style="width: calc(100% - 20px);height: calc(65% - 20px)"> <div class="content-box box-border" style="width: calc(100% - 20px);height: calc(65% - 20px)">
...@@ -165,7 +165,6 @@ ...@@ -165,7 +165,6 @@
<script src="js/utils/dateformat.js"></script> <script src="js/utils/dateformat.js"></script>
<script src="js/utils/fileDownload.js"></script> <script src="js/utils/fileDownload.js"></script>
<script th:inline="javascript"> <script th:inline="javascript">
var gatewayUrl = [[${gatewayUrl}]]; var gatewayUrl = [[${gatewayUrl}]];
</script> </script>
...@@ -348,12 +347,12 @@ ...@@ -348,12 +347,12 @@
page: false, page: false,
cols: [ cols: [
[ [
{field: 'name', title: '服务器资源池', align: 'center', style: 'color: #3e63cc',minWidth: "200"}, {field: 'name', title: '服务器资源池', align: 'center', style: 'color: #3e63cc', minWidth: "200"},
{ {
field: 'active', field: 'active',
title: '活跃状态', title: '活跃状态',
align: 'center', align: 'center',
width:'100', width: '100',
style: 'color: #3e63cc', style: 'color: #3e63cc',
templet: function (data) { templet: function (data) {
if (data.active) { if (data.active) {
...@@ -416,16 +415,16 @@ ...@@ -416,16 +415,16 @@
var option = {}; var option = {};
switch (type) { switch (type) {
case 'line': case 'line':
option = defaultLineOptions; option = JSON.parse(JSON.stringify(defaultLineOptions));
break; break;
case 'Xbar': case 'Xbar':
option = defaultXBarOptions; option = JSON.parse(JSON.stringify(defaultXBarOptions));
break; break;
case 'Ybar': case 'Ybar':
option = defaultYBarOptions; option = JSON.parse(JSON.stringify(defaultYBarOptions));
break; break;
case 'gauge': case 'gauge':
option = defaultGaugeOptions; option = JSON.parse(JSON.stringify(defaultGaugeOptions));
break; break;
default: default:
break; break;
...@@ -482,9 +481,10 @@ ...@@ -482,9 +481,10 @@
}) })
let option = {}; let option = {};
if (isNotMerge) { if (isNotMerge) {
option = defaultLineOptions; option = JSON.parse(JSON.stringify(defaultLineOptions));
if (showLegend) { if (showLegend) {
option.legend.data = legendData; option.legend.data = legendData;
option.legend.textStyle.color = '#fff';
} else { } else {
option.legend.data = []; option.legend.data = [];
} }
...@@ -498,6 +498,29 @@ ...@@ -498,6 +498,29 @@
option.xAxis.minInterval = 1000 * 60; option.xAxis.minInterval = 1000 * 60;
break break
case 'second': case 'second':
option.visualMap = [{
show: true,
top: 30,
right: 10,
pieces: [
{
gt: 0,
lt: 195,
color: '#5470c6'
},
{
gte: 195,
color: '#AC3B2A'
}
],
outOfRange: {
color: '#999'
},
orient: "horizontal",
textStyle: {
color: "#fff"
}
}]
option.xAxis.minInterval = 1000; option.xAxis.minInterval = 1000;
break break
default: default:
...@@ -525,6 +548,7 @@ ...@@ -525,6 +548,7 @@
} else { } else {
// 替换合并 // 替换合并
timeLineChart.setOption(option, {notMerge: false, replaceMerge: ['dataZoom', 'series']}); timeLineChart.setOption(option, {notMerge: false, replaceMerge: ['dataZoom', 'series']});
let op = timeLineChart.getOption();
} }
} }
...@@ -908,7 +932,7 @@ ...@@ -908,7 +932,7 @@
datazoom_end_n = event.end datazoom_end_n = event.end
} }
}) })
let option = defaultYBarOptions; let option = JSON.parse(JSON.stringify(defaultYBarOptions));
option.dataZoom[0].start = datazoom_start_n; option.dataZoom[0].start = datazoom_start_n;
option.dataZoom[0].end = datazoom_end_n; option.dataZoom[0].end = datazoom_end_n;
option.dataZoom[1].start = datazoom_start_n; option.dataZoom[1].start = datazoom_start_n;
...@@ -949,12 +973,12 @@ ...@@ -949,12 +973,12 @@
method: 'get', method: 'get',
}).then(function (res) { }).then(function (res) {
if (res.success) { if (res.success) {
let {cpu,disk,gpu,load,memory} = res.data let {cpu, disk, gpu, load, memory} = res.data
updateGauge('cpuGaugeChart',cpu); updateGauge('cpuGaugeChart', cpu);
updateGauge('hardDiskGaugeChart',disk); updateGauge('hardDiskGaugeChart', disk);
updateGauge('gpuGaugeChart',gpu); updateGauge('gpuGaugeChart', gpu);
updateGauge('sysLoadGaugeChart',load); updateGauge('sysLoadGaugeChart', load);
updateGauge('memoryGaugeChart',memory); updateGauge('memoryGaugeChart', memory);
} else { } else {
console.log(' --- 获取服务器总资源实时监控数据失败 --- ', res) console.log(' --- 获取服务器总资源实时监控数据失败 --- ', res)
} }
...@@ -963,7 +987,7 @@ ...@@ -963,7 +987,7 @@
}) })
} }
function updateGauge(key,value){ function updateGauge(key, value) {
let option = window[key].getOption(); let option = window[key].getOption();
option.series[1].data[0] = value; option.series[1].data[0] = value;
let color = "#58D9F9"; let color = "#58D9F9";
...@@ -1003,6 +1027,9 @@ ...@@ -1003,6 +1027,9 @@
if (gaugeInterval) { if (gaugeInterval) {
clearInterval(gaugeInterval) clearInterval(gaugeInterval)
} }
if (tableInterval) {
clearInterval(tableInterval)
}
} }
// 移除监听器 // 移除监听器
...@@ -1051,6 +1078,7 @@ ...@@ -1051,6 +1078,7 @@
// 页面销毁前 // 页面销毁前
$(window).on('beforeunload', function () { $(window).on('beforeunload', function () {
console.log(' --- 页面即将销毁 --- ')
stopInterval(); stopInterval();
chartsDestroy(); chartsDestroy();
stopListener(); stopListener();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment