Skip to content

O
ocrCloudPlatformAdmin
Commit 1fd2c863 by 杨琪琪
Options

接入导出，添加服务器资源实时监控图表

parent 9339121c
Showing with 413 additions and 24 deletions
src/main/resources/static/css/callSupervision.css
...@@ -35,15 +35,30 @@ ...@@ -35,15 +35,30 @@
.box-title { .box-title {
color: #fff; color: #fff;
text-align: center; text-align: center;
height: 15px; 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;
border-color: #323232;
color: #fff;
} }
.box-content { .box-content {
color: #fff; color: #fff;
height: calc(100% - 20px);
} }
.box-content .num { .box-content .num-span {
font-width: bolder; font-weight: bolder;
color: #f2495c;
white-space: nowrap;
} }
.time-select-box { .time-select-box {
...@@ -77,6 +92,14 @@ ...@@ -77,6 +92,14 @@
border-color: #323232; border-color: #323232;
} }
/*.layui-table-cell {*/
/* overflow: visible;*/
/* text-overflow: inherit;*/
/* white-space: normal;*/
/* height: auto !important;*/
/* word-break: break-all;*/
/*}*/
.flex { .flex {
display: flex; display: flex;
} }
...@@ -98,10 +121,10 @@ ...@@ -98,10 +121,10 @@
} }
/* 隐藏时间选择器顶部的切换按钮 */ /* 隐藏时间选择器顶部的切换按钮 */
#layui-laydate2 .laydate-prev-y,.laydate-next-y, .laydate-prev-m, .laydate-next-m { #layui-laydate2 .laydate-prev-y, #layui-laydate2 .laydate-next-y, #layui-laydate2 .laydate-prev-m#layui-laydate2, .laydate-next-m {
display: none !important; display: none !important;
} }
#layui-laydate3 .laydate-prev-y,.laydate-next-y .laydate-prev-m, .laydate-next-m { #layui-laydate3 .laydate-prev-y, .laydate-next-y, .laydate-prev-m, .laydate-next-m {
display: none !important; display: none !important;
} }
src/main/resources/static/js/callSupervision/callChartOptions.js
var defaultLineOptions = { var defaultLineOptions = {
title: {
text: 'OCR调用',
textStyle: {fontSize: '14px', color: "#fff"},
left: 'center'
},
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '12%', bottom: '15%',
containLabel: true containLabel: true
}, },
legend: { legend: {
...@@ -29,11 +33,11 @@ var defaultLineOptions = { ...@@ -29,11 +33,11 @@ var defaultLineOptions = {
{ {
type: 'inside', type: 'inside',
start: 0, start: 0,
end: 20 end: 100
}, },
{ {
start: 0, start: 0,
end: 20 end: 100
} }
], ],
series: [ series: [
...@@ -43,7 +47,7 @@ var defaultLineOptions = { ...@@ -43,7 +47,7 @@ var defaultLineOptions = {
} }
] ]
} }
var defaultBarOptions = { var defaultXBarOptions = {
grid: { grid: {
left: 5, left: 5,
right: 5, right: 5,
...@@ -53,7 +57,7 @@ var defaultBarOptions = { ...@@ -53,7 +57,7 @@ var defaultBarOptions = {
show: false, show: false,
}, },
tooltip: { tooltip: {
show: false, trigger: 'axis'
}, },
xAxis: { xAxis: {
show: false, show: false,
...@@ -72,7 +76,7 @@ var defaultBarOptions = { ...@@ -72,7 +76,7 @@ var defaultBarOptions = {
show: true, show: true,
type: "category", type: "category",
inverse: true, inverse: true,
data: ['广西高院', '玉林中院', '桂林中院', '贵港中院', '南宁中院', '来宾中院', '贺州中院'], data: [],
axisLine: { axisLine: {
show: false, show: false,
}, },
...@@ -88,20 +92,93 @@ var defaultBarOptions = { ...@@ -88,20 +92,93 @@ var defaultBarOptions = {
series: [ series: [
{ {
type: "bar", type: "bar",
hoverAnimation: false, data: [],
data: [1233, 23423, 4323, 12121, 5234, 4234, 234234],
// barGap:'30px',
itemStyle: {
normal: {
// color: "#5AC3C3",
// barBorderRadius: 20,
},
},
label: {
show: false,
},
barCategoryGap: 30, barCategoryGap: 30,
barWidth: 10, barWidth: 10,
}, },
], ],
} }
const labelOption = {
show: true,
position: 'insideBottom',
distance: 15,
align: 'left',
verticalAlign: 'middle',
rotate: 90,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {}
}
};
var defaultYBarOptions = {
title: {
text: '服务器资源实时监控',
textStyle: {fontSize: '14px', color: "#fff"},
left: 'center'
},
grid: {
left: '3%',
right: '4%',
bottom: '5%',
containLabel: true
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland'],
textStyle: {
color: "#fff",
},
left: 10
},
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: ['2012', '2013', '2014', '2015', '2016']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Forest',
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390]
},
{
name: 'Steppe',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290]
},
{
name: 'Desert',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190]
},
{
name: 'Wetland',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [98, 77, 101, 99, 40]
}
]
}
src/main/resources/static/js/utils/dateformat.js 0 → 100644
/**
* Date对象的补充函数，包括类似Python中的strftime()
* 阿债 https://gitee.com/azhai/datetime.js
*/
Date.prototype.toMidnight = function() {
this.setHours(0)
this.setMinutes(0)
this.setSeconds(0)
this.setMilliseconds(0)
return this
}
Date.prototype.daysAgo = function(days, midnight) {
days = days ? days - 0 : 0
const date = new Date(this.getTime() - days * 8.64E7)
return midnight ? date.toMidnight() : date
}
Date.prototype.monthBegin = function(offset) {
offset = offset ? offset - 0 : 0
const days = this.getDate() - 1 - offset
return this.daysAgo(days, true)
}
Date.prototype.quarterBegin = function() {
const month = this.getMonth() - this.getMonth() % 3
return new Date(this.getFullYear(), month, 1).toMidnight()
}
Date.prototype.yearBegin = function() {
return new Date(this.getFullYear(), 0, 1).toMidnight()
}
Date.prototype.strftime = function(format, local) {
if (!format) {
const str = new Date(this.getTime() + 2.88E7).toISOString()
return str.substr(0, 16).replace('T', ' ')
}
local = local && local.startsWith('zh') ? 'zh' : 'en'
const padZero = function(str, len) {
const pads = len - str.toString().length
return (pads && pads > 0 ? '0'.repeat(pads) : '') + str
}
format = format.replace('%F', '%Y-%m-%d')
format = format.replace(/%D|%x/, '%m/%d/%y')
format = format.replace(/%T|%X/, '%H:%M:%S')
format = format.replace('%R', '%H:%M')
format = format.replace('%r', '%H:%M:%S %p')
format = format.replace('%c', '%a %b %e %H:%M:%S %Y')
const _this = this
return format.replace(/%[A-Za-z%]/g, function(f) {
let ans = f
switch (f) {
case '%%':
ans = '%'
break
case '%Y':
case '%G':
ans = _this.getFullYear()
break
case '%y':
ans = _this.getFullYear() % 100
break
case '%C':
ans = _this.getFullYear() / 100
break
case '%m':
case '%n':
ans = _this.getMonth() + 1
break
case '%B':
local = local.startsWith('en') ? 'english' : local
case '%b':
const m = _this.getMonth()
ans = local_labels.monthes[local][m]
break
case '%d':
case '%e':
ans = _this.getDate()
break
case '%j':
ans = _this.getDaysOfYear()
break
case '%U':
case '%W':
const ws = _this.getWeeksOfYear(f === '%W')
ans = padZero(ws, 2)
break
case '%w':
ans = _this.getDay()
case '%u':
ans = ans === 0 ? 7 : ans
break
case '%A':
local = local.startsWith('en') ? 'english' : local
case '%a':
const d = _this.getDay()
ans = local_labels.weekdays[local][d]
break
case '%H':
case '%k':
ans = _this.getHours()
break
case '%I':
case '%l':
ans = _this.getHours()
ans = ans % 12
break
case '%M':
ans = _this.getMinutes()
break
case '%S':
ans = _this.getSeconds()
break
case '%s':
ans = parseInt(_this.getTime() / 1E3)
break
case '%f':
const ms = _this.getMilliseconds()
ans = padZero(ms * 1E3, 6)
break
case '%P':
local = local.startsWith('en') ? 'english' : local
case '%p':
const h = _this.getHours()
ans = local_labels.meridians[local][h < 12 ? 0 : 1]
break
case '%z':
let tzo = _this.getTimezoneOffset()
const sign = tzo < 0 ? '-' : '+'
tzo = Math.abs(tzo)
const ho = padZero(tzo / 60, 2)
const mo = padZero(tzo % 60, 2)
ans = sign + ho + mo
break
default:
break
}
if (f === '%C' || f === '%y' || f === '%m' || f === '%d' || f === '%H' || f === '%M' || f === '%S') {
ans = padZero(ans, 2)
}
return ans.toString()
})
}
Date.prototype.humanize = function(local) {
local = local && local.startsWith('zh') ? 'zh' : 'en'
const result = this.strftime('', local)
const days = (Date.today() - this.toMidnight().getTime()) / 8.64E7
if (days <= -10 || days >= 10) {
return result
}
const labels = local_labels.dayagos[local]
let lbl = ''
if (days === 0 || days === 1) {
lbl = labels[days]
} else if (days === -1) {
lbl = labels[2]
} else if (days >= 2) {
lbl = days + labels[3]
} else {
lbl = days + labels[4]
}
return lbl + result.substr(10, 6)
}
const local_labels = {
monthes: {
english: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
zh: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
weekdays: {
english: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
zh: ['日', '一', '二', '三', '四', '五', '六']
},
meridians: {
english: ['a.m.', 'p.m.'],
en: ['AM', 'PM'],
zh: ['上午', '下午']
},
dayagos: {
english: ['Today', 'Yesterday', 'Tomorrow', ' days ago', ' days late'],
en: ['Today', 'Yesterday', 'Tomorrow', ' days ago', ' days late'],
zh: ['今天', '昨天', '明天', '天前', '天后']
}
}
src/main/resources/static/js/utils/fileDownload.js 0 → 100644
// 后端传的是下载地址 =》 文件重命名
function getBlob(url, cb) {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
};
function saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement("a");
const body = document.querySelector("body");
let downloadUrl = window.URL.createObjectURL(blob);
link.href = downloadUrl;
link.download = filename;
link.style.display = "none";
document.body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(downloadUrl);
}
};
// 后端传的是文件流 =》 文件下载
function exportFile(obj, suffix, name) {
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
// 兼容IE/Edge
window.navigator.msSaveBlob(new Blob([obj]), name + '.' + suffix);
} else {
const url = window.URL.createObjectURL(new Blob([obj]));
const link = document.createElement("a");
link.style.display = "none";
link.href = url;
const fileName = name + "." + suffix;
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url); // 释放掉blob对象
}
}
// base64转blob
function base64_to_blob(data_base64) {
var arr = data_base64.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
// base64 转 file
function base64_to_file(data_base64, filename) {
let fileArray = data_base64.split(','),
// 过滤出文件类型
fileType = fileArray[0].match(/:(.*?);/)[1],
// atob 是对经过 base-64 编码的字符串进行解码
bstr = atob(fileArray[1]),
n = bstr.length,
//Uint8Array 数组类型表示一个 8 位无符号整型数组
u8arr = new Uint8Array(n)
while (n--) {
// 返回字符串n个字符的 Unicode 编码
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: fileType })
}
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