Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
O
ocrCloudPlatformAdmin
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
ocr-cloud-platform
ocrCloudPlatformAdmin
Commits
bbfbab20
Commit
bbfbab20
authored
Jun 06, 2024
by
杨琪琪
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
cor调用统计-图表添加单位,添加总负载仪表盘
parent
fc3df2cd
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
220 additions
and
30 deletions
+220
-30
src/main/resources/static/js/callSupervision/callChartOptions.js
+159
-13
src/main/resources/static/js/callSupervision/testData.json
+0
-0
src/main/resources/templates/callSupervision/index.html
+61
-17
No files found.
src/main/resources/static/js/callSupervision/callChartOptions.js
View file @
bbfbab20
var
defaultLineOptions
=
{
title
:
{
text
:
'OCR调用'
,
text
:
'OCR调用
量
'
,
textStyle
:
{
fontSize
:
'14px'
,
color
:
"#fff"
},
left
:
'center'
},
...
...
@@ -8,11 +8,12 @@ var defaultLineOptions = {
trigger
:
'axis'
,
axisPointer
:
{
animation
:
false
}
}
,
},
grid
:
{
left
:
'3%'
,
right
:
'4%'
,
top
:
'20%'
,
bottom
:
'15%'
,
containLabel
:
true
},
...
...
@@ -35,6 +36,7 @@ var defaultLineOptions = {
},
yAxis
:
{
type
:
'value'
,
name
:
"单位(页)"
,
min
:
0
,
minInterval
:
1
,
animation
:
false
...
...
@@ -70,7 +72,8 @@ var defaultXBarOptions = {
trigger
:
'axis'
,
axisPointer
:
{
animation
:
false
}
},
// formatter: "{b}: {c}页"
},
xAxis
:
{
show
:
false
,
...
...
@@ -112,11 +115,11 @@ var defaultXBarOptions = {
],
}
var
defaultYBarOptions
=
{
title
:
{
text
:
'OCR服务器资源实时监控'
,
textStyle
:
{
fontSize
:
'14px'
,
color
:
"#fff"
},
left
:
'center'
},
//
title: {
//
text: 'OCR服务器资源实时监控',
//
textStyle: {fontSize: '14px', color: "#fff"},
//
left: 'center'
//
},
tooltip
:
{
trigger
:
'axis'
,
axisPointer
:
{
...
...
@@ -147,11 +150,10 @@ var defaultYBarOptions = {
rotate
:
270
,
// 可选:旋转刻度标签,以免重叠
}
},
yAxis
:
[
{
type
:
'value'
}
],
yAxis
:
{
type
:
'value'
,
name
:
"单位(%)"
,
},
series
:
[],
dataZoom
:
[
// 数据区域缩放配置
{
...
...
@@ -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/static/js/callSupervision/testData.js
s
on
→
src/main/resources/static/js/callSupervision/testData.json
View file @
bbfbab20
File moved
src/main/resources/templates/callSupervision/index.html
View file @
bbfbab20
...
...
@@ -28,14 +28,14 @@
<div
class=
"box-title flex flex-align flex-justify"
>
<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>
<i
class=
"layui-icon layui-icon-download-circle"
></i>
导出
</button>
<button
type=
"button"
class=
"layui-btn layui-btn-xs"
lay-on=
"pre-all-page-wrap"
title=
"预览"
id=
"previewAll"
>
<i
class=
"layui-icon layui-icon-table"
></i>
<i
class=
"layui-icon layui-icon-table"
></i>
预览
</button>
</div>
<span>
各法院总调用统计
</span>
<span>
各法院总调用统计
(页)
</span>
</div>
<div
class=
"box-content"
>
<div
id=
"court-bar"
style=
"width: 100%; height: 100%;"
></div>
...
...
@@ -46,11 +46,11 @@
<div
class=
"box-title 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>
<i
class=
"layui-icon layui-icon-download-circle"
></i>
导出
</button>
<button
type=
"button"
class=
"layui-btn layui-btn-xs"
lay-on=
"pre-year-page-wrap"
title=
"预览"
id=
"previewYear"
>
<i
class=
"layui-icon layui-icon-table"
></i>
<i
class=
"layui-icon layui-icon-table"
></i>
预览
</button>
</div>
<span><span
id=
"year-text"
></span>
年调用量(页)
</span>
...
...
@@ -63,11 +63,11 @@
<div
class=
"box-title 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>
<i
class=
"layui-icon layui-icon-download-circle"
></i>
导出
</button>
<button
type=
"button"
class=
"layui-btn layui-btn-xs"
lay-on=
"pre-month-page-wrap"
title=
"预览"
id=
"previewMonth"
>
<i
class=
"layui-icon layui-icon-table"
></i>
<i
class=
"layui-icon layui-icon-table"
></i>
预览
</button>
</div>
<span><span
id=
"month-text"
></span>
月调用量(页)
</span>
...
...
@@ -80,11 +80,11 @@
<div
class=
"box-title 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>
<i
class=
"layui-icon layui-icon-download-circle"
></i>
导出
</button>
<button
type=
"button"
class=
"layui-btn layui-btn-xs"
lay-on=
"pre-day-page-wrap"
title=
"预览"
id=
"previewDay"
>
<i
class=
"layui-icon layui-icon-table"
></i>
<i
class=
"layui-icon layui-icon-table"
></i>
预览
</button>
</div>
<span><span
id=
"day-text"
></span>
日调用量(页)
</span>
...
...
@@ -101,7 +101,7 @@
</div>
</div>
</div>
<div
class=
"layui-row layui-col-space5"
style=
"height:
5
0vh"
>
<div
class=
"layui-row layui-col-space5"
style=
"height:
6
0vh"
>
<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)"
>
...
...
@@ -140,10 +140,21 @@
</div>
</div>
</div>
<div
class=
"layui-row layui-col-space5"
style=
"height:
5
0vh"
>
<div
class=
"layui-row layui-col-space5"
style=
"height:
10
0vh"
>
<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
class=
"content-box box-border"
style=
"width: calc(100% - 20px);height:calc(100% - 20px)"
>
<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>
...
...
@@ -174,6 +185,11 @@
var
timeLineChart
=
null
;
var
courtBarChart
=
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
currMonth
=
new
Date
().
strftime
(
'%m'
);
var
currDate
=
new
Date
().
strftime
(
'%d'
);
...
...
@@ -201,7 +217,12 @@
//图表初始
initChart
(
'ocr-call-chart'
,
'line'
,
'timeLineChart'
);
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'
,
{
...
...
@@ -326,11 +347,12 @@
page
:
false
,
cols
:
[
[
{
field
:
'name'
,
title
:
'服务器资源池'
,
align
:
'center'
,
style
:
'color: #3e63cc'
},
{
field
:
'name'
,
title
:
'服务器资源池'
,
align
:
'center'
,
style
:
'color: #3e63cc'
,
minWidth
:
"200"
},
{
field
:
'active'
,
title
:
'活跃状态'
,
align
:
'center'
,
width
:
'100'
,
style
:
'color: #3e63cc'
,
templet
:
function
(
data
)
{
if
(
data
.
active
)
{
...
...
@@ -342,9 +364,10 @@
},
{
field
:
'ocrTask'
,
title
:
'
当前识别数
'
,
title
:
'
正在排队识别任务数量(个)
'
,
align
:
'center'
,
style
:
'color: #3e63cc'
,
minWidth
:
"200"
,
templet
:
function
(
data
)
{
if
(
data
.
active
)
{
return
"<span style='color: #f2495c;'>"
+
data
.
ocrTask
+
"</span>"
;
...
...
@@ -386,7 +409,7 @@
table
.
resize
(
'callTable'
);
});
function
initChart
(
chartId
,
type
,
key
)
{
function
initChart
(
chartId
,
type
,
key
,
title
,
value
)
{
window
[
key
]
=
echarts
.
init
(
document
.
getElementById
(
chartId
))
var
option
=
{};
switch
(
type
)
{
...
...
@@ -399,9 +422,23 @@
case
'Ybar'
:
option
=
defaultYBarOptions
;
break
;
case
'gauge'
:
option
=
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事件
...
...
@@ -863,6 +900,13 @@
option
.
dataZoom
[
1
].
start
=
datazoom_start_n
;
option
.
dataZoom
[
1
].
end
=
datazoom_end_n
;
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
)
{
let
len
=
source
[
0
].
length
-
1
;
option
.
series
=
[];
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment