Skip to content

O
ocrCloudPlatformAdmin
Commit 9339121c by 杨琪琪
Options

添加ocr调用统计页

parent 912d1bba
Showing with 527 additions and 121 deletions
src/main/resources/application.yml
spring:
profiles:
active: prod
active: local
jackson:
time-zone: GMT+8
date-format: yyyy-MM-dd HH:mm:ss
......@@ -17,6 +17,7 @@ eureka:
client:
service-url:
defaultZone: http://localhost:9000/eureka
enabled: false
instance:
prefer-ip-address: true
instance-id: ${spring.cloud.client.ip-address}:${spring.application.name}:${server.port}
......
src/main/resources/static/css/callSupervision.css 0 → 100644
.layui-form {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.layui-form-item {
margin-bottom: 0 !important;
}
.layui-input-block {
margin-left: 15px;
}
.layui-form-switch {
margin-top: 0 !important;
}
.layui-input-block {
color: #fff !important;
}
.content-box {
color: #fff;
background-color: #b3b3b30d;
margin: 5px;
padding: 5px;
}
.box-border {
border: 1px solid #323232;
}
.box-title {
color: #fff;
text-align: center;
height: 15px;
}
.box-content {
color: #fff;
}
.box-content .num {
font-width: bolder;
}
.time-select-box {
width: 100%;
}
.layui-table {
background-color: #b3b3b30d;
color: #2d6aea;
}
.layui-table-view {
border-color: #323232;
margin: 0;
}
.layui-table thead tr {
background-color: #a1b9fd24;
border-color: #323232;
}
.layui-table tbody tr:hover {
background-color: #a1b9fd24;
}
.layui-table-header {
background-color: #b3b3b30d;
}
.layui-table td, .layui-table th, .layui-table-header {
border-color: #323232;
}
.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,.laydate-next-y, .laydate-prev-m, .laydate-next-m {
display: none !important;
}
#layui-laydate3 .laydate-prev-y,.laydate-next-y .laydate-prev-m, .laydate-next-m {
display: none !important;
}
src/main/resources/static/js/callSupervision/callChartOptions.js 0 → 100644
var defaultLineOptions = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '12%',
containLabel: true
},
legend: {
data: [],
textStyle: {
color: "#fff",
fontSize: 13,
},
},
xAxis: {
type: 'time',
boundaryGap: false,
},
yAxis: {
type: 'value',
min: 0,
minInterval: 1,
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 20
},
{
start: 0,
end: 20
}
],
series: [
{
type: "line",
data: []
}
]
}
var defaultBarOptions = {
grid: {
left: 5,
right: 5,
top: 10,
bottom: 10,
containLabel: true,
show: false,
},
tooltip: {
show: false,
},
xAxis: {
show: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
yAxis: [
{
show: true,
type: "category",
inverse: true,
data: ['广西高院', '玉林中院', '桂林中院', '贵港中院', '南宁中院', '来宾中院', '贺州中院'],
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
},
],
series: [
{
type: "bar",
hoverAnimation: false,
data: [1233, 23423, 4323, 12121, 5234, 4234, 234234],
// barGap:'30px',
itemStyle: {
normal: {
// color: "#5AC3C3",
// barBorderRadius: 20,
},
},
label: {
show: false,
},
barCategoryGap: 30,
barWidth: 10,
},
],
}
src/main/resources/static/js/callSupervision/testData.jsson 0 → 100644
[
{
id: "1",
name: "147.1.7.131",
state: 1,
callNum: "4"
},
{
id: "2",
name: "147.1.7.132",
state: 1,
callNum: "4"
},
{
id: "3",
name: "147.1.7.133",
state: 1,
callNum: "4"
},
{
id: "4",
name: "147.1.7.134",
state: 2,
callNum: "4"
},
]
src/main/resources/templates/callSupervision/index.html
......@@ -6,169 +6,334 @@
<title>testUrl</title>
<link rel="stylesheet" href="newLayui/css/layui.css" media="all">
<link rel="stylesheet" href="css/callSupervision.css" media="all">
<script src="newLayui/layui.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/echarts/echarts.js"></script>
<style>
body {
width: 100%;
padding: 10px;
width: calc(100% - 20px);
height: 100%;
background: #fff;
}
.layui-form {
display: flex;
flex-direction: row;
align-items: center;
}
.layui-form-item {
margin-bottom: 0 !important;
}
.layui-input-block {
margin-left: 15px;
}
.layui-form-switch {
margin-top: 0 !important;
background: #111217;
}
</style>
</head>
<body>
<div class="layui-layout">
<div class="chart-one">
<form class="layui-form" lay-filter="areaForm">
<div class="layui-form-item">
<input type="checkbox" name="isRegion" value="isRegion" lay-skin="switch" lay-text="全区|地市"
lay-filter="area">
<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(50% - 20px)">
<div class="box-title flex flex-align flex-justify"><span>各法院总调用统计</span></div>
<div class="box-content" style="height: calc(100% - 15px);">
<div id="court-bar" style="width: 100%; height: 100%;"></div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="radio" lay-filter="time" name="time" value="hh" title="时">
<input type="radio" lay-filter="time" name="time" value="mm" title="分" checked>
<!-- <input type="radio" lay-filter="time" name="time" value="ss" title="秒">-->
<div style="width: 100%; height: 50%" 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="box-title">年调用量（页）</div>
<div class="box-content flex flex-align flex-justify">
<span class="num-span" id="call-year-num"></span>
</div>
</div>
<div class="content-box box-border" style="width: calc((100% - 20px) / 3 );height: calc(100% - 20px)">
<div class="box-title">月调用量（页）</div>
<div class="box-content flex flex-align flex-justify">
<span class="num-span" id="call-month-num"></span>
</div>
</div>
<div class="content-box box-border" style="width: calc((100% - 20px) / 3 );height: calc(100% - 20px)">
<div class="box-title">日调用量（页）</div>
<div class="box-content flex flex-align flex-justify">
<span class="num-span" id="call-day-num"></span>
</div>
</div>
</div>
</div>
<div class="layui-col-xs4" style="height: 100%">
<div class="content-box box-border" style="height: calc(100% - 20px)">
<table class="layui-hide" id="call-table" lay-filter="call-table"></table>
</div>
</form>
<div id="first-chart" style="width: 100%; height: 400px;"></div>
</div>
</div>
<div class="layui-row layui-col-space5">
<div class="layui-col-xs12">
<div class="chart-one content-box box-border">
<form class="layui-form layui-row layui-col-space10" lay-filter="areaForm">
<div class="layui-form-item layui-col-xs1">
<input type="checkbox" name="isRegion" value="true" lay-skin="switch" lay-text="全区|地市"
lay-filter="area">
</div>
<div class="layui-col-xs7">
<div class="layui-row layui-col-space5" style="width: 100%">
<div class="layui-form-item layui-col-xs4">
<input type="text" class="layui-input" name="year" id="input-year" placeholder="请选择">
</div>
<div class="layui-form-item layui-col-xs4">
<input type="text" class="layui-input" name="month" id="input-month" placeholder="请选择">
</div>
<div class="layui-form-item layui-col-xs4">
<input type="text" class="layui-input" name="day" id="input-day" placeholder="请选择">
</div>
</div>
</div>
<div class="layui-form-item layui-col-xs4">
<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="time" value="minute" title="分">
<input type="radio" lay-filter="radio-time" name="time" value="second" title="秒">
</div>
</div>
</form>
<div id="ocr-call-chart" style="width: 100%; height: 370px;"></div>
</div>
</div>
</div>
</div>
</body>
<script src="js/callSupervision/callChartOptions.js"></script>
<script src="js/jquery.min.js"></script>
<script th:inline="javascript">
var gatewayUrl = [[${gatewayUrl}]];
</script>
<script>
var regionLegend = ['昨日', '今日']
var areaLegend = ['南宁', '柳州', '玉林', '桂林']
var timeLineChart = null;
var courtBarChart = null;
var callYearNum = 1234, callMonthNum = 2345, callDayNum = 34234;
// 确保layui和echarts已经加载
layui.config({
base: '/js/echarts/' //假设这是你存放拓展模块的根目录
}).use(['echarts', 'form'], function () {
}).use(['echarts', 'form', 'laydate', 'table'], function () {
var echarts = layui.echarts;
var form = layui.form;
var laydate = layui.laydate;
var table = layui.table;
var $ = layui.jquery;
getCorrelationData();
//图表初始
initChart('ocr-call-chart', 'line', 'timeLineChart');
initChart('court-bar', 'bar', 'courtBarChart');
// 表单初始赋值
form.val('areaForm', {
isRegion: true
isRegion: true,
time: 'hour',
})
getBrokenLineData();
// 全区/地市 切换监听
form.on('switch(area)', function (data) {
console.log(' --- 是否切换全区数据 --- ', data.elem.checked)
// initLineChart(dataList,xLine,chartLegend);
getBrokenLineData();
});
});
function initLineChart(dataObject, xLine, legend) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('first-chart'));
var series = [];
console.log(' --- 当前Y轴数据 --- ', dataObject)
if (dataObject && Object.keys(dataObject).length != 0) {
for (var k in dataObject) {
var obj = {};
obj['type'] = 'line';
obj['name'] = k;
obj['data'] = dataObject[k]
series.push(obj)
// 时间选择器初始
laydate.render({
elem: '#input-year',
type: 'year',
value: new Date(),
isInitValue: true,
showBottom: false,
// max: new Date(),
done: function (value, date, endDate) {
console.log('选择了年份：', value, date, endDate); // 打印选择的日期值
}
}
console.log(' --- series --- ', series);
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xLine
},
yAxis: {
type: 'value',
min: 0,
minInterval: 1,
},
dataZoom: [
});
laydate.render({
elem: '#input-month',
type: 'month',
value: new Date(),
format: 'MM',
// max: new Date(),
done: function (value, date, endDate) {
console.log('选择了月份：', value, date, endDate); // 打印选择的日期值
}
});
laydate.render({
elem: '#input-day',
type: 'date',
value: new Date(),
format: 'dd',
// max: new Date(),
done: function (value, date, endDate) {
console.log('选择了日期：', value, date, endDate); // 打印选择的日期值
}
});
//时分秒选择框
form.on('radio(radio-time)', function (data) {
let val = data.value;
console.log(' --- 当前选择值 --- ', val)
getBrokenLineData()
});
// 表格初始
table.render({
elem: '#call-table',
// url: gatewayUrl + '',
// url: '/static/js/callSupervision/testData.json', // 此处为静态模拟数据，实际使用时需换成真实接口
height: 'full',
cellMinWidth: 80,
data: [
{
id: "1",
name: "147.1.7.131",
state: true,
callNum: "4"
},
{
type: 'inside',
start: 0,
end: 20
id: "2",
name: "147.1.7.132",
state: true,
callNum: "4"
},
{
start: 0,
end: 20
id: "3",
name: "147.1.7.133",
state: false,
callNum: "4"
}
],
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 如果需要在layui的事件中响应，比如窗口大小改变，可以绑定resize事件
window.onresize = function () {
myChart.resize();
cols: [
[
{field: 'name', title: '服务器资源池', align: 'center', style: 'color: #3e63cc'},
{
field: 'state',
title: '活跃状态',
align: 'center',
style: 'color: #3e63cc',
templet: function (data) {
if (data.state) {
return "<span style='color: #6aaf62;'>活跃</span>"
} else {
return "<span style='color: #5b79d6;'>不活跃</span>"
}
}
},
{field: 'callNum', title: 'OCR调用量', align: 'center', style: 'color: #3e63cc'}
]
]
})
let len1 = $('#call-year-num').text(callYearNum).text().length;
$('#call-year-num').data('numlen', len1);
let len2 = $('#call-month-num').text(callMonthNum).text().length;
$('#call-month-num').data('numlen', len2);
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) {
// console.log(' --- 图表初始化 --- ', chartId, defaultLineOptions)
window[key] = echarts.init(document.getElementById(chartId))
var option = {};
switch (type) {
case 'line':
option = defaultLineOptions;
break;
case 'bar':
option = defaultBarOptions;
break;
default:
break;
}
var currChart = window[key];
option && currChart.setOption(option, true)
// 如果需要在layui的事件中响应，比如窗口大小改变，可以绑定resize事件
window.onresize = function () {
currChart.resize();
}
}
}
// 获取全区数据
function getCorrelationData() {
$.ajax({
url: gatewayUrl + '/appAbilityRecordAll/getCorrelationData?day1=2024-01-23&day2=2024-01-24',
type: 'get',
success: function (res) {
if (res.success) {
var nDay = JSON.parse(JSON.stringify(res.data.day1));
var timeArr = [];
var YArrObject = {};
for (var i = 0; i < nDay.length; i++) {
timeArr = nDay.map(function (item) {
return item['time']
})
YArrObject['今日'] = nDay.map(function (item) {
return item['value']
})
}
initLineChart(YArrObject, timeArr);
// 时间轴折线图
function updateLineChart({dataObject, showLegend}) {
// 基于准备好的dom，初始化echarts实例
var seriesData = [];
var legendData = [];
if (dataObject && Object.keys(dataObject).length != 0) {
for (var k in dataObject) {
var obj = {};
obj['type'] = 'line';
obj['name'] = k;
obj['data'] = dataObject[k];
obj['showSymbol'] = false;
seriesData.push(obj);
legendData.push(k);
}
}
});
}
let options = showLegend ? {
...defaultLineOptions,
legend: {
data: legendData,
textStyle: {
color: "#fff",
// fontSize: 13,
},
},
series: function () {
let data = JSON.parse(JSON.stringify(seriesData))
return data
}()
} : {
...defaultLineOptions,
series: function () {
let data = JSON.parse(JSON.stringify(seriesData))
return data
}()
}
timeLineChart.setOption(options, true);
}
// 获取地市数据
function getAreaData() {
initLineChart(YArr, timeArr);
}
// 获取调用数据
function getBrokenLineData() {
var fData = form.val('areaForm');
console.log(' --- 表单数据 --- ', fData);
let displayType = "full"
if (!fData.isRegion) {
displayType = "detailed"
}
$.ajax({
url: gatewayUrl + '/stat/getBrokenLineData',
type: 'get',
data: {
displayType,
interval: fData.time
},
success: function (res) {
if (res.success) {
var dataObj = JSON.parse(JSON.stringify(res.data));
var timeArr;
var YArrObject = {};
if (displayType == 'full') {
timeArr = dataObj.map(function (item) {
return [new Date(item['time']), item['value']]
})
YArrObject['fullDay'] = timeArr;
updateLineChart({dataObject: YArrObject, showLegend: false});
} else {
if (dataObj && Object.keys(dataObj).length != 0) {
for (var k in dataObj) {
var arr = dataObj[k];
timeArr = arr.map(function (item) {
return [new Date(item['time']), item['value']]
})
YArrObject[k] = timeArr;
}
}
updateLineChart({dataObject: YArrObject, showLegend: true});
}
}
}
});
}
});
</script>
</html>
src/main/resources/templates/home/console.html
......@@ -27,8 +27,8 @@
const year = d.getFullYear();
const month = d.getMonth() + 1;
const day = d.getDate();
// let url = "http://192.168.1.230:9300/d/Ews-KJ84z/ge-yuan-ocrdiao-yong-qing-kuang?orgId=1&var-server=192.168.1.230&var-year=" + year + "&var-month=" + month + "&var-day=" + day + "&var-job=os-node&var-node=192.168.1.230:9100&from=now-5m&to=now&refresh=5s&kiosk";
let url = "http://147.1.5.77:3000/d/Ews-KJ84z/ge-yuan-ocrdiao-yong-qing-kuang?orgId=1&var-server=147.1.5.77&var-year=" + year + "&var-month=" + month + "&var-day=" + day + "&var-job=os-node&var-node=147.1.5.77:9100&from=now-5m&to=now&refresh=5s&kiosk";
let url = "http://192.168.1.230:9300/d/Ews-KJ84z/ge-yuan-ocrdiao-yong-qing-kuang?orgId=1&var-server=192.168.1.230&var-year=" + year + "&var-month=" + month + "&var-day=" + day + "&var-job=os-node&var-node=192.168.1.230:9100&from=now-5m&to=now&refresh=5s&kiosk";
// let url = "http://147.1.5.77:3000/d/Ews-KJ84z/ge-yuan-ocrdiao-yong-qing-kuang?orgId=1&var-server=147.1.5.77&var-year=" + year + "&var-month=" + month + "&var-day=" + day + "&var-job=os-node&var-node=147.1.5.77:9100&from=now-5m&to=now&refresh=5s&kiosk";
document.getElementById("consolePage").src = url;
</script>
</html>
src/main/resources/templates/server/serverList.html
......@@ -109,6 +109,7 @@
{field: 'createdBy', title: '创建者', align: 'center', width: 180, sort: true},
{field: 'updatedTime', title: '修改时间', align: 'center', width: 180, sort: true},
{field: 'updatedBy', title: '更新者', align: 'center', width: 180, sort: true},
{field: 'network', title: '局域网', align: 'center', width: 180, sort: true},
{
fixed: 'right',
field: 'accessService',
......@@ -310,4 +311,4 @@
</script>
</body>
</html>
\ No newline at end of file
</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