Skip to content

O
ocrCloudPlatformAdmin
Commit 1fd2c863 by 杨琪琪
Options

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

parent 9339121c
Showing with 764 additions and 114 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], barCategoryGap: 30,
// barGap:'30px', barWidth: 10,
itemStyle: {
normal: {
// color: "#5AC3C3",
// barBorderRadius: 20,
}, },
],
}
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'
}, },
label: { grid: {
show: false, left: '3%',
right: '4%',
bottom: '5%',
containLabel: true
}, },
barCategoryGap: 30, legend: {
barWidth: 10, 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 })
}
src/main/resources/templates/callSupervision/index.html
...@@ -23,49 +23,90 @@ ...@@ -23,49 +23,90 @@
<div class="layui-layout"> <div class="layui-layout">
<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(50% - 20px)"> <div class="content-box box-border" style="width: calc(100% - 20px);height: calc(65% - 20px)">
<div class="box-title flex flex-align flex-justify"><span>各法院总调用统计</span></div> <div class="box-title flex flex-align flex-justify">
<div class="box-content" style="height: calc(100% - 15px);"> <div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportAll">
<i class="layui-icon layui-icon-download-circle"></i>
</button>
<button type="button" class="layui-btn layui-btn-xs" title="预览" id="previewAll">
<i class="layui-icon layui-icon-table"></i>
</button>
</div>
<span>各法院总调用统计</span>
</div>
<div class="box-content">
<div id="court-bar" style="width: 100%; height: 100%;"></div> <div id="court-bar" style="width: 100%; height: 100%;"></div>
</div> </div>
</div> </div>
<div style="width: 100%; height: 50%" class="flex-justify-between flex flex-row flex-align"> <div style="width: 100%; height: 35%" class="flex-justify-between flex flex-row flex-align">
<div class="content-box box-border" style="width: calc((100% - 20px) / 3);height: calc(100% - 20px)"> <div class="content-box box-border" style="width: calc((100% - 20px) / 3);height: calc(100% - 20px)">
<div class="box-title">年调用量（页）</div> <div class="box-title flex flex-align flex-justify">
<div class="box-content flex flex-align flex-justify"> <div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportYear">
<i class="layui-icon layui-icon-download-circle"></i>
</button>
<button type="button" class="layui-btn layui-btn-xs" title="预览" id="previewYear">
<i class="layui-icon layui-icon-table"></i>
</button>
</div>
<span>年调用量（页）</span>
</div>
<div class="box-content flex flex-align flex-justify num-box">
<span class="num-span" id="call-year-num"></span> <span class="num-span" id="call-year-num"></span>
</div> </div>
</div> </div>
<div class="content-box box-border" style="width: calc((100% - 20px) / 3 );height: calc(100% - 20px)"> <div class="content-box box-border" style="width: calc((100% - 20px) / 3 );height: calc(100% - 20px)">
<div class="box-title">月调用量（页）</div> <div class="box-title flex flex-align flex-justify">
<div class="box-content flex flex-align flex-justify"> <div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportMonth">
<i class="layui-icon layui-icon-download-circle"></i>
</button>
<button type="button" class="layui-btn layui-btn-xs" title="预览" id="previewMonth">
<i class="layui-icon layui-icon-table"></i>
</button>
</div>
<span>月调用量（页）</span>
</div>
<div class="box-content flex flex-align flex-justify num-box">
<span class="num-span" id="call-month-num"></span> <span class="num-span" id="call-month-num"></span>
</div> </div>
</div> </div>
<div class="content-box box-border" style="width: calc((100% - 20px) / 3 );height: calc(100% - 20px)"> <div class="content-box box-border" style="width: calc((100% - 20px) / 3 );height: calc(100% - 20px)">
<div class="box-title">日调用量（页）</div> <div class="box-title flex flex-align flex-justify">
<div class="box-content flex flex-align flex-justify"> <div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportDay">
<i class="layui-icon layui-icon-download-circle"></i>
</button>
<button type="button" class="layui-btn layui-btn-xs" title="预览" id="previewDay">
<i class="layui-icon layui-icon-table"></i>
</button>
</div>
<span>日调用量（页）</span>
</div>
<div class="box-content flex flex-align flex-justify num-box">
<span class="num-span" id="call-day-num"></span> <span class="num-span" id="call-day-num"></span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="layui-col-xs4" style="height: 100%"> <div class="layui-col-xs4" style="height: 100%">
<div class="content-box box-border" style="height: calc(100% - 20px)"> <div class="content-box box-border" id="tableContent" style="height: calc(100% - 20px)">
<table class="layui-hide" id="call-table" lay-filter="call-table"></table> <table class="layui-hide" id="call-table" lay-filter="call-table" style="height: 100%"></table>
</div> </div>
</div> </div>
</div> </div>
<div class="layui-row layui-col-space5"> <div class="layui-row layui-col-space5" style="height: 50vh">
<div class="layui-col-xs12"> <div class="layui-col-xs12" style="height: 100%">
<div class="chart-one content-box box-border"> <div 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="areaForm"> <form class="layui-form layui-row layui-col-space10" lay-filter="areaForm">
<div class="layui-form-item layui-col-xs1"> <div class="layui-form-item layui-col-xs1" style="text-align: center">
<input type="checkbox" name="isRegion" value="true" lay-skin="switch" lay-text="全区|地市" <input type="checkbox" name="isRegion" value="true" lay-skin="switch" lay-text="全区|地市"
lay-filter="area"> lay-filter="area">
</div> </div>
<div class="layui-col-xs7"> <div class="layui-col-xs5">
<div class="layui-row layui-col-space5" style="width: 100%"> <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"> <div class="layui-form-item layui-col-xs4">
<input type="text" class="layui-input" name="year" id="input-year" placeholder="请选择"> <input type="text" class="layui-input" name="year" id="input-year" placeholder="请选择">
</div> </div>
...@@ -77,15 +118,22 @@ ...@@ -77,15 +118,22 @@
</div> </div>
</div> </div>
</div> </div>
<div class="layui-form-item layui-col-xs4"> <div class="layui-form-item layui-col-xs4 interval-box">
<div class="layui-input-block"> <div class="layui-input-block">
<input type="radio" lay-filter="radio-time" name="time" value="hour" title="时"> <input type="radio" lay-filter="radio-time" name="interval" value="hour" title="时">
<input type="radio" lay-filter="radio-time" name="time" value="minute" title="分"> <input type="radio" lay-filter="radio-time" name="interval" value="minute" title="分">
<input type="radio" lay-filter="radio-time" name="time" value="second" title="秒"> <input type="radio" lay-filter="radio-time" name="interval" value="second" title="秒">
</div> </div>
</div> </div>
</form> </form>
<div id="ocr-call-chart" style="width: 100%; height: 370px;"></div> <div id="ocr-call-chart" style="width: 100%; height: calc(100% - 50px);"></div>
</div>
</div>
</div>
<div class="layui-row layui-col-space5" style="height: 40vh">
<div class="layui-col-xs12" style="height: 100%">
<div class="content-box box-border" style="width: calc(100% - 20px);height: calc(100% - 20px)">
<div id="ocr-hardware-chart" style="width: 100%;height: 100%"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -93,6 +141,9 @@ ...@@ -93,6 +141,9 @@
</body> </body>
<script src="js/callSupervision/callChartOptions.js"></script> <script src="js/callSupervision/callChartOptions.js"></script>
<script src="js/utils/dateformat.js"></script>
<script src="js/utils/axios.min.js"></script>
<script src="js/utils/fileDownload.js"></script>
<script src="js/jquery.min.js"></script> <script src="js/jquery.min.js"></script>
<script th:inline="javascript"> <script th:inline="javascript">
...@@ -102,7 +153,11 @@ ...@@ -102,7 +153,11 @@
<script> <script>
var timeLineChart = null; var timeLineChart = null;
var courtBarChart = null; var courtBarChart = null;
var hardwareBarChart = null;
var callYearNum = 1234, callMonthNum = 2345, callDayNum = 34234; var callYearNum = 1234, callMonthNum = 2345, callDayNum = 34234;
var currYear = new Date().strftime('%Y');
var currMonth = new Date().strftime('%m');
var currDate = new Date().strftime('%d');
// 确保layui和echarts已经加载 // 确保layui和echarts已经加载
layui.config({ layui.config({
...@@ -116,14 +171,22 @@ ...@@ -116,14 +171,22 @@
//图表初始 //图表初始
initChart('ocr-call-chart', 'line', 'timeLineChart'); initChart('ocr-call-chart', 'line', 'timeLineChart');
initChart('court-bar', 'bar', 'courtBarChart'); initChart('court-bar', 'Xbar', 'courtBarChart');
initChart('ocr-hardware-chart', 'Ybar', 'hardwareBarChart')
getCourtUseSum();
getCourtUseInYear();
getCourtUseInMonth();
getCourtUseInDay();
// 表单初始赋值 // 表单初始赋值
form.val('areaForm', { form.val('areaForm', {
isRegion: true, isRegion: true,
time: 'hour', interval: 'hour',
year: new Date().strftime('%Y'),
month: new Date().strftime('%m'),
day: new Date().strftime('%d')
}) })
getBrokenLineData();
// 全区/地市 切换监听 // 全区/地市 切换监听
form.on('switch(area)', function (data) { form.on('switch(area)', function (data) {
...@@ -140,7 +203,7 @@ ...@@ -140,7 +203,7 @@
// max: new Date(), // max: new Date(),
done: function (value, date, endDate) { done: function (value, date, endDate) {
console.log('选择了年份：', value, date, endDate); // 打印选择的日期值 console.log('选择了年份：', value, date, endDate); // 打印选择的日期值
getBrokenLineData();
} }
}); });
laydate.render({ laydate.render({
...@@ -149,8 +212,10 @@ ...@@ -149,8 +212,10 @@
value: new Date(), value: new Date(),
format: 'MM', format: 'MM',
// max: new Date(), // max: new Date(),
isPreview: false, //禁用面板左下角选择值的预览，默认 true
done: function (value, date, endDate) { done: function (value, date, endDate) {
console.log('选择了月份：', value, date, endDate); // 打印选择的日期值 console.log('选择了月份：', value, date, endDate); // 打印选择的日期值
getBrokenLineData();
} }
}); });
laydate.render({ laydate.render({
...@@ -159,8 +224,23 @@ ...@@ -159,8 +224,23 @@
value: new Date(), value: new Date(),
format: 'dd', format: 'dd',
// max: new Date(), // max: new Date(),
isPreview: false, //禁用面板左下角选择值的预览，默认 true
done: function (value, date, endDate) { done: function (value, date, endDate) {
console.log('选择了日期：', value, date, endDate); // 打印选择的日期值 console.log('选择了日期：', value, date, endDate); // 打印选择的日期值
if (value) {
form.val("areaForm", {
interval: "hour"
});
$('.interval-box').css('display', 'unset')
} else {
form.val("areaForm", {
interval: ""
});
// $('.interval-box').css('display', 'none')
}
let fData = form.val('areaForm');
console.log(' --- form 更新 --- ', fData)
getBrokenLineData();
} }
}); });
...@@ -170,77 +250,72 @@ ...@@ -170,77 +250,72 @@
console.log(' --- 当前选择值 --- ', val) console.log(' --- 当前选择值 --- ', val)
getBrokenLineData() getBrokenLineData()
}); });
getBrokenLineData();
// 表格初始 // 表格初始
table.render({ table.render({
elem: '#call-table', elem: '#call-table',
// url: gatewayUrl + '', url: gatewayUrl + '/server/getServerStatus',
// url: '/static/js/callSupervision/testData.json', // 此处为静态模拟数据，实际使用时需换成真实接口 // url: '/static/js/callSupervision/testData.json', // 此处为静态模拟数据，实际使用时需换成真实接口
height: 'full', // height: 300,
cellMinWidth: 80, cellMinWidth: 80,
data: [ parseData: function (res) { // res 即为原始返回的数据
{ return {
id: "1", "code": res.code, // 解析接口状态
name: "147.1.7.131", "msg": res.message, // 解析提示文本
state: true, "count": res.total, // 解析数据长度
callNum: "4" "data": res.data.serverStatus // 解析数据列表
};
}, },
{ response: {
id: "2", statusName: 'code', //规定数据状态的字段名称，默认：code
name: "147.1.7.132", statusCode: 200 //规定成功的状态码，默认：0
state: true,
callNum: "4"
}, },
{ page: false,
id: "3",
name: "147.1.7.133",
state: false,
callNum: "4"
}
],
cols: [ cols: [
[ [
{field: 'name', title: '服务器资源池', align: 'center', style: 'color: #3e63cc'}, {field: 'name', title: '服务器资源池', align: 'center', style: 'color: #3e63cc'},
{ {
field: 'state', field: 'active',
title: '活跃状态', title: '活跃状态',
align: 'center', align: 'center',
style: 'color: #3e63cc', style: 'color: #3e63cc',
templet: function (data) { templet: function (data) {
if (data.state) { if (data.active) {
return "<span style='color: #6aaf62;'>活跃</span>" return "<span style='color: #6aaf62;'>活跃</span>"
} else { } else {
return "<span style='color: #5b79d6;'>不活跃</span>" return "<span style='color: #5b79d6;'>不活跃</span>"
} }
} }
}, },
{field: 'callNum', title: 'OCR调用量', align: 'center', style: 'color: #3e63cc'} {field: 'ocrTask', title: 'OCR调用量', align: 'center', style: 'color: #3e63cc'}
]
] ]
],
// res: 返回信息 curr: 当前页码 count: 数据总量
done: function (res, curr, count) {
adjustTableHeight();
}
}) })
let len1 = $('#call-year-num').text(callYearNum).text().length; // 窗口大小变化监听
$('#call-year-num').data('numlen', len1); $(window).resize(function () {
let len2 = $('#call-month-num').text(callMonthNum).text().length; resizeText(); // 调整字体大小
$('#call-month-num').data('numlen', len2); adjustTableHeight(); // 调整table高度
let len3 = $('#call-day-num').text(callDayNum).text().length;
$('#call-day-num').data('numlen', len3);
$('.box-content > .num-span').each((index, element) => {
let len = $(element).data('numlen');
$(element).css('font-size', `calc(16px + 0.1vw * ${len});`);
// 16px + 0.5vw * (100 - 10 * ${len}));
}); });
function initChart(chartId, type, key) { function initChart(chartId, type, key) {
// console.log(' --- 图表初始化 --- ', chartId, defaultLineOptions)
window[key] = echarts.init(document.getElementById(chartId)) window[key] = echarts.init(document.getElementById(chartId))
var option = {}; var option = {};
switch (type) { switch (type) {
case 'line': case 'line':
option = defaultLineOptions; option = defaultLineOptions;
break; break;
case 'bar': case 'Xbar':
option = defaultBarOptions; option = defaultXBarOptions;
break;
case 'Ybar':
option = defaultYBarOptions;
break; break;
default: default:
break; break;
...@@ -269,59 +344,66 @@ ...@@ -269,59 +344,66 @@
legendData.push(k); legendData.push(k);
} }
} }
let options = showLegend ? { timeLineChart.clear();
...defaultLineOptions, let option = defaultLineOptions;
legend: { if (showLegend) {
data: legendData, option.legend.data = legendData;
textStyle: { }
color: "#fff", option.series = function () {
// fontSize: 13,
},
},
series: function () {
let data = JSON.parse(JSON.stringify(seriesData))
return data
}()
} : {
...defaultLineOptions,
series: function () {
let data = JSON.parse(JSON.stringify(seriesData)) let data = JSON.parse(JSON.stringify(seriesData))
return data return data
}() }()
let fData = form.val('areaForm');
console.log(' --- 当前刻度单位 --- ', fData.interval)
// 坐标轴最小间隔
switch (fData.interval) {
case 'hour':
option.xAxis.minInterval = 1000 * 3600;
break
case 'minute':
option.xAxis.minInterval = 1000 * 60;
break
case 'second':
option.xAxis.minInterval = 1000;
break
default:
option.xAxis.minInterval = 1000 * 3600 * 24;
break
} }
timeLineChart.setOption(options, true); timeLineChart.setOption(option, true);
} }
// 获取调用数据 // 获取调用数据
function getBrokenLineData() { function getBrokenLineData() {
var fData = form.val('areaForm'); let fData = form.val('areaForm');
console.log(' --- 表单数据 --- ', fData);
let displayType = "full" let displayType = "full"
if (!fData.isRegion) { if (!fData.isRegion) {
displayType = "detailed" displayType = "detailed"
} }
let startDate = fData.day ? `${fData.year}-${fData.month}-${fData.day}` : fData.month ? `${fData.year}-${fData.month}` : fData.year;
$.ajax({ $.ajax({
url: gatewayUrl + '/stat/getBrokenLineData', url: gatewayUrl + '/stat/getBrokenLineData',
type: 'get', type: 'get',
data: { data: {
displayType, displayType,
interval: fData.time startDate,
interval: fData.interval
}, },
success: function (res) { success: function (res) {
if (res.success) { if (res.success) {
var dataObj = JSON.parse(JSON.stringify(res.data)); let dataObj = JSON.parse(JSON.stringify(res.data));
var timeArr; let timeArr;
var YArrObject = {}; let YArrObject = {};
if (displayType == 'full') { if (displayType == 'full') {
timeArr = dataObj.map(function (item) { timeArr = dataObj.map(function (item) {
return [new Date(item['time']), item['value']] return [new Date(item['time']), item['value']]
}) })
YArrObject['fullDay'] = timeArr; YArrObject['当前'] = timeArr;
updateLineChart({dataObject: YArrObject, showLegend: false}); updateLineChart({dataObject: YArrObject, showLegend: false});
} else { } else {
if (dataObj && Object.keys(dataObj).length != 0) { if (dataObj && Object.keys(dataObj).length != 0) {
for (var k in dataObj) { for (let k in dataObj) {
var arr = dataObj[k]; let arr = dataObj[k];
timeArr = arr.map(function (item) { timeArr = arr.map(function (item) {
return [new Date(item['time']), item['value']] return [new Date(item['time']), item['value']]
}) })
...@@ -331,9 +413,188 @@ ...@@ -331,9 +413,188 @@
updateLineChart({dataObject: YArrObject, showLegend: true}); updateLineChart({dataObject: YArrObject, showLegend: true});
} }
} }
},
error: function (err) {
console.log(' --- 报错 --- ', err)
} }
}); });
} }
// 获取法院调用排名
function getCourtUseSum() {
$.ajax({
url: gatewayUrl + '/appAbilityRecordAll/getCourtUseSum',
type: 'get',
success: function (res) {
let arr = JSON.parse(JSON.stringify(res))
let yAxisData = arr.map(item => {
return item.sortName
})
let seriesData = arr.map(item => {
return item.sum
})
updateBarChart({yAxisData, seriesData});
},
error: function (err) {
console.log(' --- 报错 --- ', err)
}
})
}
function updateBarChart({yAxisData, seriesData}) {
let option = courtBarChart.getOption();
option.yAxis[0].data = yAxisData;
option.series[0].data = seriesData;
courtBarChart.setOption(option);
}
// 获取年调用量
function getCourtUseInYear() {
$.ajax({
url: gatewayUrl + '/appAbilityRecordAll/getCourtUseInYear',
type: 'get',
data: {
courtName: "全部",
year: currYear
},
success: function (res) {
callYearNum = res.count;
let len = $('#call-year-num').text(callYearNum).text().length;
resizeText();
},
error: function (err) {
console.log(' --- 报错 --- ', err)
}
})
}
// 获取月调用量
function getCourtUseInMonth() {
$.ajax({
url: gatewayUrl + '/appAbilityRecordAll/getCourtUseInMonth',
type: 'get',
data: {
courtName: "全部",
year: currYear,
month: currMonth
},
success: function (res) {
callMonthNum = res.count;
let len = $('#call-month-num').text(callMonthNum).text().length;
resizeText();
},
error: function (err) {
console.log(' --- 报错 --- ', err)
}
})
}
// 获取年调用量
function getCourtUseInDay() {
$.ajax({
url: gatewayUrl + '/appAbilityRecordAll/getCourtUseInDay',
type: 'get',
data: {
courtName: "全部",
year: currYear,
month: currMonth,
day: currDate
},
success: function (res) {
callDayNum = res.count;
$('#call-day-num').text(callDayNum);
resizeText();
},
error: function (err) {
console.log(' --- 报错 --- ', err)
}
})
}
function resizeText() {
$('.num-span').each(function (index, element) {
let len = $(element).text().length;
var containerWidth = $('.num-box').width(); // 获取容器宽度
var containerHeight = $('.num-box').height(); // 获取容器宽度
var fontSizeWidth = containerWidth / len; // 计算字体大小
var fontSizeHeight = containerHeight / len; // 根据高度计算字体大小
var finalFontSize;
if (len <= 3) {
finalFontSize = Math.min(fontSizeWidth, fontSizeHeight) * 0.8;
} else {
finalFontSize = fontSizeWidth
}
// 取宽度和高度计算出的字体大小中较小的一个
$(element).css('font-size', finalFontSize); // 设置字体大小
})
}
// table高度自适应
function adjustTableHeight() {
let tableHeight = $('#tableContent').height();
let headerHeight = $('.layui-table-header').height();
$(".layui-table-main").css("height", (tableHeight - headerHeight) + "px");
}
// 按钮点击事件
$("#exportAll").click(function () {
downloadFile('各法院调用统计.xlsx');
});
$('#previewAll').click(function () {
console.log(' --- 打开预览 --- ')
})
$("#exportYear").click(function () {
let date = `${currYear}`
downloadFile(`各法院${date}调用统计.xlsx`, {yearMonthDay: date});
});
$("#exportMonth").click(function () {
let date = `${currYear}-${currMonth}`
downloadFile(`各法院${date}调用统计.xlsx`, {yearMonthDay: date});
});
$("#exportDay").click(function () {
let date = `${currYear}-${currMonth}-${currDate}`
downloadFile(`各法院${date}调用统计.xlsx`, {yearMonthDay: date});
});
function downloadFile(filename, params) {
axios({
url: gatewayUrl + '/appAbilityRecordAll/deriveCallRecord',
method: 'get',
responseType: 'blob',
params: params ? params : {}
}).then(function (res) {
let data = res.data
if (data instanceof Blob) {
var blob = data;
//通过FileReader读取数据
var reader = new FileReader();
//以下这两种方式都可以解析出来，因为Blob对象的数据可以按文本或二进制的格式进行读取
// reader.readAsBinaryString(blob);
reader.readAsText(blob, "utf8");
reader.onload = (e) => {
var receive_data = e.target.result; //解析出来的数据
var responseData = {};
if (
receive_data.indexOf("success") != -1 &&
receive_data.indexOf("errCode") != -1
) {
responseData = JSON.parse(receive_data);
} else {
responseData.success = true;
}
if (responseData.success) {
saveAs(data, filename);
} else {
console.log(' --- 下载失败 --- ', responseData)
}
};
} else {
console.log(' --- 下载失败 --- ', data)
}
})
}
}); });
</script> </script>
</html> </html>
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