Skip to content

O
ocrCloudPlatformAdmin
Commit 76183631 by 杨琪琪
Options

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

parent aef9242c
Showing with 548 additions and 23 deletions
src/main/resources/static/js/callSupervision/callChartOptions.js
......@@ -20,7 +20,7 @@ var defaultLineOptions = {
legend: {
data: [],
textStyle: {
color: "#fff",
// color: "#fff",
fontSize: 13,
},
type: 'scroll',
......@@ -57,6 +57,7 @@ var defaultLineOptions = {
end: 100
}
],
visualMap: null,
series: []
}
var defaultXBarOptions = {
......
src/main/resources/templates/authorization/list.html
......@@ -4,7 +4,8 @@
<base th:href="${#request.getContextPath()}+'/'">
<meta charset="UTF-8">
<title>角色管理列表</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!-- <link rel="stylesheet" href="layui/css/layui.css" media="all">-->
<link rel="stylesheet" href="layui2_9_8/css/layui.css" media="all">
<style>
html, body {
width: 100%;
......@@ -14,6 +15,82 @@
body {
background-color: #fff;
}
#row-form > .layui-form {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
#row-form .layui-form-item {
margin-bottom: 0 !important;
}
#row-form .layui-input-block {
margin-left: 15px;
}
#row-form .layui-form-switch {
margin-top: 0 !important;
}
.content-box {
background-color: #b3b3b30d;
/*margin: 5px;*/
/*padding: 5px;*/
}
.box-title {
text-align: center;
height: 20px;
position: relative;
}
.box-title > .layui-btn-group {
position: absolute;
left: 0;
}
.box-title > .layui-btn-group > .layui-btn, .layui-input {
background-color: #a1b9fd24;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-align {
align-items: center;
}
.flex-justify {
justify-content: center;
}
.flex-justify-between {
justify-content: space-between;
}
/* 隐藏时间选择器顶部的切换按钮 */
#layui-laydate2 .laydate-prev-y,
#layui-laydate2 .laydate-next-y,
#layui-laydate2 .laydate-prev-m,
#layui-laydate2 .laydate-next-m {
display: none !important;
}
#layui-laydate3 .laydate-prev-y,
#layui-laydate3 .laydate-next-y,
#layui-laydate3 .laydate-prev-m,
#layui-laydate3 .laydate-next-m {
display: none !important;
}
</style>
</head>
<body>
......@@ -32,7 +109,8 @@
<div class="layui-form-item">
<label class="layui-form-label">授权码</label>
<div class="layui-input-block">
<input type="text" name="authCode" lay-verify="required" lay-reqText="授权码不能为空" autocomplete="off" placeholder="授权码不能为空" class="layui-input">
<input type="text" name="authCode" lay-verify="required" lay-reqText="授权码不能为空" autocomplete="off"
placeholder="授权码不能为空" class="layui-input">
</div>
</div>
<div class="layui-form-item">
......@@ -52,19 +130,87 @@
</div>
</div>
</div>
<div class="layui-layout" style="margin-top: 10px">
<div class="layui-row" style="height: 60vh">
<div class="layui-col-xs12" style="height: 100%">
<div id="row-form" class="content-box box-border"
style="width: calc(100% - 20px);height: calc(100% - 20px)">
<form class="layui-form layui-row layui-col-space10" lay-filter="intervalForm" autocomplete="off">
<div class="layui-form-item layui-col-xs1" style="text-align: center">
<input type="checkbox" name="isRegion" value="true" lay-skin="switch" lay-text="全区|地市"
lay-filter="area">
</div>
<div class="layui-col-xs5">
<div class="layui-row layui-col-space5 flex flex-row flex-align flex-justify"
style="width: 100%">
<div class="layui-form-item layui-col-xs4">
<input type="text" class="layui-input" name="year" id="interval-year" placeholder="请选择">
</div>
<div class="layui-form-item layui-col-xs4">
<input type="text" class="layui-input" name="month" id="interval-month" placeholder="请选择">
</div>
<div class="layui-form-item layui-col-xs4">
<input type="text" class="layui-input" name="day" id="interval-day" placeholder="请选择">
</div>
</div>
</div>
<div class="layui-form-item layui-col-xs4 interval-box">
<div class="layui-input-block flex flex-row flex-align">
<input type="radio" lay-filter="radio-time" name="interval" value="hour" title="时">
<input type="radio" lay-filter="radio-time" name="interval" value="minute" title="分">
<div id="radio-second" style="width: fit-content">
<input type="radio" lay-filter="radio-time" name="interval"
value="second"
title="秒">
</div>
</div>
</div>
</form>
<div id="ocr-call-chart" style="width: 100%; height: calc(100% - 50px);"></div>
</div>
</div>
</div>
</div>
</body>
<script src="layui/layui.all.js"></script>
<!--<script src="layui/layui.all.js"></script>-->
<script src="layui2_9_8/layui.js"></script>
<script src="js/jquery.min.js"></script>
<script src="layui/xmSelect/xm-select.js"></script>
<script src="js/utils/axios.min.js"></script>
<script src="js/echarts/echarts.js"></script>
<script src="js/utils/dateformat.js"></script>
<script src="js/callSupervision/callChartOptions.js"></script>
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
<input type="button" lay-event="add" value="添加授权" class="layui-btn layui-btn-sm layui-btn-normal">
</div>
</script>
<script th:inline="javascript">
var gatewayUrl = [[${gatewayUrl}]];
</script>
<script>
var list, authorizationList, table, form;
layui.use(["table", "form", 'laydate'], function () {
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response.data;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
</script>
<script>
var list, authorizationList, table, form, timeLineChart, brokenLineInterval;
var currYear = new Date().strftime('%Y');
var currMonth = new Date().strftime('%m');
var currDate = new Date().strftime('%d');
var datazoom_broken_start_n = 0;
var datazoom_broken_end_n = 100;
var isLineRestart = false;
layui.use(["table", "form", 'laydate','element'], function () {
var laydate = layui.laydate;
laydate.render({
elem: '#stime'
......@@ -219,6 +365,356 @@
});
}
});
//图表初始
initChart('ocr-call-chart', 'line', 'timeLineChart');
function initChart(chartId, type, key, title, value) {
window[key] = echarts.init(document.getElementById(chartId))
var option = {};
switch (type) {
case 'line':
option = JSON.parse(JSON.stringify(defaultLineOptions));
break;
case 'Xbar':
option = JSON.parse(JSON.stringify(defaultXBarOptions));
break;
case 'Ybar':
option = JSON.parse(JSON.stringify(defaultYBarOptions));
break;
case 'gauge':
option = JSON.parse(JSON.stringify(defaultGaugeOptions));
break;
default:
break;
}
if (title) {
option.title.text = title;
option.series[1].data[0] = value;
let color = "#58D9F9";
if (value > 70 && value <= 90) {
color = "#ff9b3d"
} else if (value > 90) {
color = "#e82c06"
}
option.series[1].progress.itemStyle.color = color
}
var currChart = window[key];
option && currChart.setOption(option, true)
// 如果需要在layui的事件中响应，比如窗口大小改变，可以绑定resize事件
window.addEventListener("resize", function () {
if (currChart && currChart.resize) {
currChart.resize();
}
});
}
// 表单初始赋值
form.val('intervalForm', {
isRegion: true,
interval: 'hour',
year: currYear,
month: currMonth,
day: currDate
})
// 全区/地市 切换监听
form.on('switch(area)', function (data) {
let checked = data.elem.checked;
if (checked) {
$("#radio-second").show();
} else {
$("#radio-second").hide();
}
if (timeLineChart) {
timeLineChart.clear();
}
restartBrokenLineInterval(true);
});
// 时间选择器初始
laydate.render({
elem: '#interval-year',
type: 'year',
value: new Date(),
isInitValue: true,
// showBottom: false,
isPreview: false,
btns: ['now'],
max: new Date().strftime('%Y'),
done: function (value, date, endDate) {
if (timeLineChart) {
timeLineChart.clear();
}
restartBrokenLineInterval(true);
}
});
laydate.render({
elem: '#interval-month',
type: 'month',
value: new Date(),
format: 'MM',
// max: new Date(),
isPreview: false, //禁用面板左下角选择值的预览，默认 true
done: function (value, date, endDate) {
if (!value) {
form.val("intervalForm", {
day: ""
});
$('.interval-box').css('display', 'none')
}
if (timeLineChart) {
timeLineChart.clear();
}
restartBrokenLineInterval(true);
}
});
laydate.render({
elem: '#interval-day',
type: 'date',
value: new Date(),
format: 'dd',
// max: new Date(),
isPreview: false, //禁用面板左下角选择值的预览，默认 true
done: function (value, date, endDate) {
if (value) {
form.val("intervalForm", {
interval: "hour"
});
$('.interval-box').css('display', 'unset')
} else {
form.val("intervalForm", {
interval: ""
});
$('.interval-box').css('display', 'none')
}
if (timeLineChart) {
timeLineChart.clear();
}
restartBrokenLineInterval(true);
}
});
//时分秒选择框
form.on('radio(radio-time)', function (data) {
if (timeLineChart) {
timeLineChart.clear();
}
restartBrokenLineInterval(true);
});
// 开启定时器
function startInterval() {
restartBrokenLineInterval(true);
}
startInterval();
// 重新计时
function restartBrokenLineInterval(isNotMerge) {
datazoom_broken_start_n = 0;
datazoom_broken_end_n = 100;
getBrokenLineData(isNotMerge);
if (brokenLineInterval) {
clearInterval(brokenLineInterval)
brokenLineInterval = null;
}
brokenLineInterval = setInterval(function () {
if (isLineRestart) {
getBrokenLineData();
}
}, 5000)
}
// 获取调用数据
function getBrokenLineData(isNotMerge) {
let fData = form.val('intervalForm');
let displayType = "full"
if (!fData.isRegion) {
displayType = "detailed"
}
isLineRestart = false;
let startDate = fData.day ? `${fData.year}-${fData.month}-${fData.day}` : fData.month ? `${fData.year}-${fData.month}` : fData.year;
axios({
url: gatewayUrl + '/stat/getBrokenLineData',
method: 'get',
params: {
displayType,
startDate,
interval: fData.interval
}
}).then(function (res) {
if (res.success) {
let dataObj = JSON.parse(JSON.stringify(res.data));
let timeArr;
let YArrObject = {};
if (displayType == 'full') {
timeArr = dataObj.map(function (item) {
return [new Date(item['time']), item['value']]
})
YArrObject['当前'] = timeArr;
updateLineChart({dataObject: YArrObject, showLegend: false}, isNotMerge);
} else {
if (dataObj && Object.keys(dataObj).length != 0) {
for (let k in dataObj) {
let arr = dataObj[k];
timeArr = arr.map(function (item) {
return [new Date(item['time']), item['value']]
})
YArrObject[k] = timeArr;
}
}
updateLineChart({dataObject: YArrObject, showLegend: true}, isNotMerge);
}
}
isLineRestart = true
}).catch(function (err) {
console.log(' --- 接口请求失败，抛出异常 --- ', err)
isLineRestart = true
})
}
// 时间轴折线图
function updateLineChart({dataObject, showLegend}, isNotMerge) {
// 基于准备好的dom，初始化echarts实例
var seriesData = [];
var legendData = [];
if (dataObject && Object.keys(dataObject).length != 0) {
let i = 0;
for (var k in dataObject) {
let obj = {};
obj['id'] = `line${i++}`;
obj['type'] = 'line';
obj['name'] = k;
obj['data'] = JSON.parse(JSON.stringify(dataObject[k])); // 对应曲线数据
obj['showSymbol'] = false;
obj['sampling'] = 'lttb';
obj['large'] = true;
seriesData.push(obj);
legendData.push(k);
}
}
timeLineChart.on('dataZoom', function (event) {
if (event.batch) {
datazoom_broken_start_n = event.batch[0].start
datazoom_broken_end_n = event.batch[0].end
} else {
datazoom_broken_start_n = event.start
datazoom_broken_end_n = event.end
}
})
let option = {};
if (isNotMerge) {
option = JSON.parse(JSON.stringify(defaultLineOptions));
if (showLegend) {
option.legend.data = legendData;
} else {
option.legend.data = [];
}
let fData = form.val('intervalForm');
// 坐标轴最小间隔
switch (fData.interval) {
case 'hour':
option.xAxis.minInterval = 1000 * 3600;
break
case 'minute':
option.xAxis.minInterval = 1000 * 60;
break
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",
}]
option.xAxis.minInterval = 1000;
break
default:
option.xAxis.minInterval = 1000 * 3600 * 24;
break
}
} else {
option.dataZoom = [
{
id: 'inside',
type: 'inside',
start: datazoom_broken_start_n,
end: datazoom_broken_end_n
},
{
id: 'slide',
start: datazoom_broken_start_n,
end: datazoom_broken_end_n
}
]
}
option.series = seriesData;
if (isNotMerge) {
timeLineChart.setOption(option, true);
} else {
// 替换合并
timeLineChart.setOption(option, {notMerge: false, replaceMerge: ['dataZoom', 'series']});
}
}
// 清空定时器
function stopInterval() {
if (brokenLineInterval) {
clearInterval(brokenLineInterval)
}
}
// 移除监听器
function stopListener() {
window.removeEventListener('resize', function () {
if (timeLineChart && timeLineChart.resize) {
timeLineChart.resize();
}
})
}
// 图表销毁
function chartsDestroy() {
if (timeLineChart) {
timeLineChart.dispose();
timeLineChart = null;
}
}
// 页面销毁前
$(window).on('beforeunload', function () {
console.log(' --- 页面即将销毁 --- ')
stopInterval();
chartsDestroy();
stopListener();
});
document.addEventListener("visibilitychange", destroyObject);
// 页面隐藏销毁图表和定时器
function destroyObject(e) {
if (document.hidden) {
// 清除定时任务
stopInterval();
} else {
// 开启定时任务
startInterval();
}
}
});
</script>
......
src/main/resources/templates/callSupervision/index.html
......@@ -21,7 +21,7 @@
</style>
</head>
<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-col-xs8" style="height: 100%">
<div class="content-box box-border" style="width: calc(100% - 20px);height: calc(65% - 20px)">
......@@ -165,7 +165,6 @@
<script src="js/utils/dateformat.js"></script>
<script src="js/utils/fileDownload.js"></script>
<script th:inline="javascript">
var gatewayUrl = [[${gatewayUrl}]];
</script>
......@@ -348,12 +347,12 @@
page: false,
cols: [
[
{field: 'name', title: '服务器资源池', align: 'center', style: 'color: #3e63cc',minWidth: "200"},
{field: 'name', title: '服务器资源池', align: 'center', style: 'color: #3e63cc', minWidth: "200"},
{
field: 'active',
title: '活跃状态',
align: 'center',
width:'100',
width: '100',
style: 'color: #3e63cc',
templet: function (data) {
if (data.active) {
......@@ -416,16 +415,16 @@
var option = {};
switch (type) {
case 'line':
option = defaultLineOptions;
option = JSON.parse(JSON.stringify(defaultLineOptions));
break;
case 'Xbar':
option = defaultXBarOptions;
option = JSON.parse(JSON.stringify(defaultXBarOptions));
break;
case 'Ybar':
option = defaultYBarOptions;
option = JSON.parse(JSON.stringify(defaultYBarOptions));
break;
case 'gauge':
option = defaultGaugeOptions;
option = JSON.parse(JSON.stringify(defaultGaugeOptions));
break;
default:
break;
......@@ -482,9 +481,10 @@
})
let option = {};
if (isNotMerge) {
option = defaultLineOptions;
option = JSON.parse(JSON.stringify(defaultLineOptions));
if (showLegend) {
option.legend.data = legendData;
option.legend.textStyle.color = '#fff';
} else {
option.legend.data = [];
}
......@@ -498,6 +498,29 @@
option.xAxis.minInterval = 1000 * 60;
break
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;
break
default:
......@@ -525,6 +548,7 @@
} else {
// 替换合并
timeLineChart.setOption(option, {notMerge: false, replaceMerge: ['dataZoom', 'series']});
let op = timeLineChart.getOption();
}
}
......@@ -908,7 +932,7 @@
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].end = datazoom_end_n;
option.dataZoom[1].start = datazoom_start_n;
......@@ -949,12 +973,12 @@
method: 'get',
}).then(function (res) {
if (res.success) {
let {cpu,disk,gpu,load,memory} = res.data
updateGauge('cpuGaugeChart',cpu);
updateGauge('hardDiskGaugeChart',disk);
updateGauge('gpuGaugeChart',gpu);
updateGauge('sysLoadGaugeChart',load);
updateGauge('memoryGaugeChart',memory);
let {cpu, disk, gpu, load, memory} = res.data
updateGauge('cpuGaugeChart', cpu);
updateGauge('hardDiskGaugeChart', disk);
updateGauge('gpuGaugeChart', gpu);
updateGauge('sysLoadGaugeChart', load);
updateGauge('memoryGaugeChart', memory);
} else {
console.log(' --- 获取服务器总资源实时监控数据失败 --- ', res)
}
......@@ -963,7 +987,7 @@
})
}
function updateGauge(key,value){
function updateGauge(key, value) {
let option = window[key].getOption();
option.series[1].data[0] = value;
let color = "#58D9F9";
......@@ -1003,6 +1027,9 @@
if (gaugeInterval) {
clearInterval(gaugeInterval)
}
if (tableInterval) {
clearInterval(tableInterval)
}
}
// 移除监听器
......@@ -1051,6 +1078,7 @@
// 页面销毁前
$(window).on('beforeunload', function () {
console.log(' --- 页面即将销毁 --- ')
stopInterval();
chartsDestroy();
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