Skip to content

O
ocrCloudPlatformAdmin
Commit bbfbab20 by 杨琪琪
Options

cor调用统计-图表添加单位，添加总负载仪表盘

parent fc3df2cd
Showing with 220 additions and 30 deletions
src/main/resources/static/js/callSupervision/callChartOptions.js
var defaultLineOptions = { var defaultLineOptions = {
title: { title: {
text: 'OCR调用', text: 'OCR调用量',
textStyle: {fontSize: '14px', color: "#fff"}, textStyle: {fontSize: '14px', color: "#fff"},
left: 'center' left: 'center'
}, },
...@@ -8,11 +8,12 @@ var defaultLineOptions = { ...@@ -8,11 +8,12 @@ var defaultLineOptions = {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
animation: false animation: false
} },
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
top: '20%',
bottom: '15%', bottom: '15%',
containLabel: true containLabel: true
}, },
...@@ -35,6 +36,7 @@ var defaultLineOptions = { ...@@ -35,6 +36,7 @@ var defaultLineOptions = {
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name: "单位（页）",
min: 0, min: 0,
minInterval: 1, minInterval: 1,
animation: false animation: false
...@@ -70,7 +72,8 @@ var defaultXBarOptions = { ...@@ -70,7 +72,8 @@ var defaultXBarOptions = {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
animation: false animation: false
} },
// formatter: "{b}: {c}页"
}, },
xAxis: { xAxis: {
show: false, show: false,
...@@ -112,11 +115,11 @@ var defaultXBarOptions = { ...@@ -112,11 +115,11 @@ var defaultXBarOptions = {
], ],
} }
var defaultYBarOptions = { var defaultYBarOptions = {
title: { // title: {
text: 'OCR服务器资源实时监控', // text: 'OCR服务器资源实时监控',
textStyle: {fontSize: '14px', color: "#fff"}, // textStyle: {fontSize: '14px', color: "#fff"},
left: 'center' // left: 'center'
}, // },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -147,11 +150,10 @@ var defaultYBarOptions = { ...@@ -147,11 +150,10 @@ var defaultYBarOptions = {
rotate: 270, // 可选：旋转刻度标签，以免重叠 rotate: 270, // 可选：旋转刻度标签，以免重叠
} }
}, },
yAxis: [ yAxis: {
{ type: 'value',
type: 'value' name: "单位（%）",
} },
],
series: [], series: [],
dataZoom: [ // 数据区域缩放配置 dataZoom: [ // 数据区域缩放配置
{ {
...@@ -166,3 +168,147 @@ var defaultYBarOptions = { ...@@ -166,3 +168,147 @@ var defaultYBarOptions = {
} }
] ]
} }
var defaultGaugeOptions = {
title: {
text: '',
textStyle: {fontSize: '17px', color: "#fff"},
left: 'center',
bottom:'5%'
},
series: [
{
// 第一个刻度盘
type: 'gauge',
// radius: '75%',
center: ['50%', '50%'],
// startAngle: 180,
// endAngle: 0,
min: 0,
max: 100,
progress: {
show: false,
width: 8
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
width: 3,
color: [
[0.7, '#58D9F9'],
[0.9, '#ff9b3d'],
[1, '#e82c06']
]
}
},
axisTick: {
// 刻度线
distance: 0,
splitNumber: 3,
lineStyle: {
width: 1,
color: 'auto'
},
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
{
// 进度条仪表盘
type: 'gauge',
radius: '65%',
center: ['50%', '50%'],
// startAngle: 180,
// endAngle: 0,
min: 0,
max: 100,
splitNumber: 12,
progress: {
// 进度条
show: true,
roundCap: false, // 设置平角: false,圆角: true
width: 20,
itemStyle: {
color: "#58D9F9"
// color: {
// type: 'linear',
// x: 1,
// y: 0,
// x2: 0,
// y2: 0,
// colorStops: [
// {
// offset: 1,
// color: '#00acfc' // 0% 处的颜色
// },
// {
// offset: 0,
// color: '#00f8d9' // 100% 处的颜色
// }
// ],
// global: false // 缺省为 false
// }
}
},
pointer: {
//仪表盘指针
show: true,
showAbove: true,
length: '50%',
width: 20,
icon: 'arrow',
offsetCenter: [0, -10],
itemStyle: {
color: '#19ebff'
}
},
axisLine: {
roundCap: false,
lineStyle: {
width: 20,
color: [[1, '#00ffff30']] // 圆环底色
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
width: '60%',
borderRadius: 8,
offsetCenter: [0, '70%'],
fontSize: 16,
fontWeight: 'bold',
formatter: '{value}%', // %文字大小调整
color: '#fff'
},
data: [
{
value: 100
}
]
},
]
};
src/main/resources/templates/callSupervision/index.html
...@@ -28,14 +28,14 @@ ...@@ -28,14 +28,14 @@
<div class="box-title flex flex-align flex-justify"> <div class="box-title flex flex-align flex-justify">
<div class="layui-btn-group"> <div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportAll"> <button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportAll">
<i class="layui-icon layui-icon-download-circle"></i> <i class="layui-icon layui-icon-download-circle"></i>导出
</button> </button>
<button type="button" class="layui-btn layui-btn-xs" lay-on="pre-all-page-wrap" title="预览" <button type="button" class="layui-btn layui-btn-xs" lay-on="pre-all-page-wrap" title="预览"
id="previewAll"> id="previewAll">
<i class="layui-icon layui-icon-table"></i> <i class="layui-icon layui-icon-table"></i>预览
</button> </button>
</div> </div>
<span>各法院总调用统计</span> <span>各法院总调用统计（页）</span>
</div> </div>
<div class="box-content"> <div class="box-content">
<div id="court-bar" style="width: 100%; height: 100%;"></div> <div id="court-bar" style="width: 100%; height: 100%;"></div>
...@@ -46,11 +46,11 @@ ...@@ -46,11 +46,11 @@
<div class="box-title flex flex-align flex-justify"> <div class="box-title flex flex-align flex-justify">
<div class="layui-btn-group"> <div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportYear"> <button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportYear">
<i class="layui-icon layui-icon-download-circle"></i> <i class="layui-icon layui-icon-download-circle"></i>导出
</button> </button>
<button type="button" class="layui-btn layui-btn-xs" lay-on="pre-year-page-wrap" title="预览" <button type="button" class="layui-btn layui-btn-xs" lay-on="pre-year-page-wrap" title="预览"
id="previewYear"> id="previewYear">
<i class="layui-icon layui-icon-table"></i> <i class="layui-icon layui-icon-table"></i>预览
</button> </button>
</div> </div>
<span><span id="year-text"></span>年调用量（页）</span> <span><span id="year-text"></span>年调用量（页）</span>
...@@ -63,11 +63,11 @@ ...@@ -63,11 +63,11 @@
<div class="box-title flex flex-align flex-justify"> <div class="box-title flex flex-align flex-justify">
<div class="layui-btn-group"> <div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportMonth"> <button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportMonth">
<i class="layui-icon layui-icon-download-circle"></i> <i class="layui-icon layui-icon-download-circle"></i>导出
</button> </button>
<button type="button" class="layui-btn layui-btn-xs" lay-on="pre-month-page-wrap" title="预览" <button type="button" class="layui-btn layui-btn-xs" lay-on="pre-month-page-wrap" title="预览"
id="previewMonth"> id="previewMonth">
<i class="layui-icon layui-icon-table"></i> <i class="layui-icon layui-icon-table"></i>预览
</button> </button>
</div> </div>
<span><span id="month-text"></span>月调用量（页）</span> <span><span id="month-text"></span>月调用量（页）</span>
...@@ -80,11 +80,11 @@ ...@@ -80,11 +80,11 @@
<div class="box-title flex flex-align flex-justify"> <div class="box-title flex flex-align flex-justify">
<div class="layui-btn-group"> <div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportDay"> <button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportDay">
<i class="layui-icon layui-icon-download-circle"></i> <i class="layui-icon layui-icon-download-circle"></i>导出
</button> </button>
<button type="button" class="layui-btn layui-btn-xs" lay-on="pre-day-page-wrap" title="预览" <button type="button" class="layui-btn layui-btn-xs" lay-on="pre-day-page-wrap" title="预览"
id="previewDay"> id="previewDay">
<i class="layui-icon layui-icon-table"></i> <i class="layui-icon layui-icon-table"></i>预览
</button> </button>
</div> </div>
<span><span id="day-text"></span>日调用量（页）</span> <span><span id="day-text"></span>日调用量（页）</span>
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="layui-row layui-col-space5" style="height: 50vh"> <div class="layui-row layui-col-space5" style="height: 60vh">
<div class="layui-col-xs12" style="height: 100%"> <div class="layui-col-xs12" style="height: 100%">
<div id="row-form" class="content-box box-border" <div id="row-form" class="content-box box-border"
style="width: calc(100% - 20px);height: calc(100% - 20px)"> style="width: calc(100% - 20px);height: calc(100% - 20px)">
...@@ -140,10 +140,21 @@ ...@@ -140,10 +140,21 @@
</div> </div>
</div> </div>
</div> </div>
<div class="layui-row layui-col-space5" style="height: 50vh"> <div class="layui-row layui-col-space5" style="height: 100vh">
<div class="layui-col-xs12" style="height: 100%"> <div class="layui-col-xs12" style="height: 100%">
<div class="content-box box-border" style="width: calc(100% - 20px);height: calc(100% - 20px)"> <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 style="height: 20px;line-height: 20px;text-align: center;">OCR服务器资源实时监控</div>
<div class="flex flex-row flex-align flex-justify"
style="width: 100%;height: calc((100% - 20px) / 4);flex-wrap: wrap">
<div id="ocr-harddisk-gauge-chart" style="width: 20%;height: 100%"></div>
<div id="ocr-cpu-gauge-chart" style="width: 20%;height: 100%"></div>
<div id="ocr-memory-gauge-chart" style="width: 20%;height: 100%"></div>
<div id="ocr-gpu-gauge-chart" style="width: 20%;height: 100%"></div>
<div id="ocr-sysload-gauge-chart" style="width: 20%;height: 100%"></div>
</div>
<div style="width: 100%;height: calc((100% - 20px) / 1.4)">
<div id="ocr-hardware-bar-chart" style="width: 100%;height: 100%"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -174,6 +185,11 @@ ...@@ -174,6 +185,11 @@
var timeLineChart = null; var timeLineChart = null;
var courtBarChart = null; var courtBarChart = null;
var hardwareBarChart = null; var hardwareBarChart = null;
var hardDiskGaugeChart = null;
var cpuGaugeChart = null;
var memoryGaugeChart = null;
var gpuGaugeChart = null;
var sysLoadGaugeChart = null;
var currYear = new Date().strftime('%Y'); var currYear = new Date().strftime('%Y');
var currMonth = new Date().strftime('%m'); var currMonth = new Date().strftime('%m');
var currDate = new Date().strftime('%d'); var currDate = new Date().strftime('%d');
...@@ -201,7 +217,12 @@ ...@@ -201,7 +217,12 @@
//图表初始 //图表初始
initChart('ocr-call-chart', 'line', 'timeLineChart'); initChart('ocr-call-chart', 'line', 'timeLineChart');
initChart('court-bar', 'Xbar', 'courtBarChart'); initChart('court-bar', 'Xbar', 'courtBarChart');
initChart('ocr-hardware-chart', 'Ybar', 'hardwareBarChart') initChart('ocr-hardware-bar-chart', 'Ybar', 'hardwareBarChart')
initChart('ocr-harddisk-gauge-chart', 'gauge', 'hardDiskGaugeChart', '硬盘', 50)
initChart('ocr-cpu-gauge-chart', 'gauge', 'cpuGaugeChart', 'CPU', 50.45)
initChart('ocr-memory-gauge-chart', 'gauge', 'memoryGaugeChart', '内存', 80)
initChart('ocr-gpu-gauge-chart', 'gauge', 'gpuGaugeChart', 'GPU', 100)
initChart('ocr-sysload-gauge-chart', 'gauge', 'sysLoadGaugeChart', '近5分钟平均系统负载', 100)
// 表单初始赋值 // 表单初始赋值
form.val('areaForm', { form.val('areaForm', {
...@@ -326,11 +347,12 @@ ...@@ -326,11 +347,12 @@
page: false, page: false,
cols: [ cols: [
[ [
{field: 'name', title: '服务器资源池', align: 'center', style: 'color: #3e63cc'}, {field: 'name', title: '服务器资源池', align: 'center', style: 'color: #3e63cc',minWidth: "200"},
{ {
field: 'active', field: 'active',
title: '活跃状态', title: '活跃状态',
align: 'center', align: 'center',
width:'100',
style: 'color: #3e63cc', style: 'color: #3e63cc',
templet: function (data) { templet: function (data) {
if (data.active) { if (data.active) {
...@@ -342,9 +364,10 @@ ...@@ -342,9 +364,10 @@
}, },
{ {
field: 'ocrTask', field: 'ocrTask',
title: '当前识别数', title: '正在排队识别任务数量(个)',
align: 'center', align: 'center',
style: 'color: #3e63cc', style: 'color: #3e63cc',
minWidth: "200",
templet: function (data) { templet: function (data) {
if (data.active) { if (data.active) {
return "<span style='color: #f2495c;'>" + data.ocrTask + "</span>"; return "<span style='color: #f2495c;'>" + data.ocrTask + "</span>";
...@@ -386,7 +409,7 @@ ...@@ -386,7 +409,7 @@
table.resize('callTable'); table.resize('callTable');
}); });
function initChart(chartId, type, key) { function initChart(chartId, type, key, title, value) {
window[key] = echarts.init(document.getElementById(chartId)) window[key] = echarts.init(document.getElementById(chartId))
var option = {}; var option = {};
switch (type) { switch (type) {
...@@ -399,9 +422,23 @@ ...@@ -399,9 +422,23 @@
case 'Ybar': case 'Ybar':
option = defaultYBarOptions; option = defaultYBarOptions;
break; break;
case 'gauge':
option = defaultGaugeOptions;
break;
default: default:
break; 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]; var currChart = window[key];
option && currChart.setOption(option, true) option && currChart.setOption(option, true)
// 如果需要在layui的事件中响应，比如窗口大小改变，可以绑定resize事件 // 如果需要在layui的事件中响应，比如窗口大小改变，可以绑定resize事件
...@@ -863,6 +900,13 @@ ...@@ -863,6 +900,13 @@
option.dataZoom[1].start = datazoom_start_n; option.dataZoom[1].start = datazoom_start_n;
option.dataZoom[1].end = datazoom_end_n; option.dataZoom[1].end = datazoom_end_n;
option.dataset.source = source; option.dataset.source = source;
option.tooltip.formatter = (params) => {
let relVal = params[0].name;
for (let i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' + params[i].marker + ' ' + params[i].seriesName + ' ' + params[i].value[i + 1] + ' %'
}
return relVal
}
if (flag) { if (flag) {
let len = source[0].length - 1; let len = source[0].length - 1;
option.series = []; option.series = [];
......
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