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
76183631
Commit
76183631
authored
Jul 24, 2024
by
杨琪琪
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
ocr调用统计-折线图添加超量显示;授权管理-添加折线图;
parent
aef9242c
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
548 additions
and
23 deletions
+548
-23
src/main/resources/static/js/callSupervision/callChartOptions.js
+2
-1
src/main/resources/templates/authorization/list.html
+501
-5
src/main/resources/templates/callSupervision/index.html
+45
-17
No files found.
src/main/resources/static/js/callSupervision/callChartOptions.js
View file @
76183631
...
@@ -20,7 +20,7 @@ var defaultLineOptions = {
...
@@ -20,7 +20,7 @@ var defaultLineOptions = {
legend
:
{
legend
:
{
data
:
[],
data
:
[],
textStyle
:
{
textStyle
:
{
color
:
"#fff"
,
//
color: "#fff",
fontSize
:
13
,
fontSize
:
13
,
},
},
type
:
'scroll'
,
type
:
'scroll'
,
...
@@ -57,6 +57,7 @@ var defaultLineOptions = {
...
@@ -57,6 +57,7 @@ var defaultLineOptions = {
end
:
100
end
:
100
}
}
],
],
visualMap
:
null
,
series
:
[]
series
:
[]
}
}
var
defaultXBarOptions
=
{
var
defaultXBarOptions
=
{
...
...
src/main/resources/templates/authorization/list.html
View file @
76183631
...
@@ -4,7 +4,8 @@
...
@@ -4,7 +4,8 @@
<base
th:href=
"${#request.getContextPath()}+'/'"
>
<base
th:href=
"${#request.getContextPath()}+'/'"
>
<meta
charset=
"UTF-8"
>
<meta
charset=
"UTF-8"
>
<title>
角色管理列表
</title>
<title>
角色管理列表
</title>
<link
rel=
"stylesheet"
href=
"layui/css/layui.css"
media=
"all"
>
<!-- <link rel="stylesheet" href="layui/css/layui.css" media="all">-->
<link
rel=
"stylesheet"
href=
"layui2_9_8/css/layui.css"
media=
"all"
>
<style>
<style>
html
,
body
{
html
,
body
{
width
:
100%
;
width
:
100%
;
...
@@ -14,6 +15,82 @@
...
@@ -14,6 +15,82 @@
body
{
body
{
background-color
:
#fff
;
background-color
:
#fff
;
}
}
#row-form
>
.layui-form
{
width
:
100%
;
display
:
flex
;
flex-direction
:
row
;
align-items
:
center
;
}
#row-form
.layui-form-item
{
margin-bottom
:
0
!important
;
}
#row-form
.layui-input-block
{
margin-left
:
15px
;
}
#row-form
.layui-form-switch
{
margin-top
:
0
!important
;
}
.content-box
{
background-color
:
#b3b3b30
d
;
/*margin: 5px;*/
/*padding: 5px;*/
}
.box-title
{
text-align
:
center
;
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
;
}
.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
,
#layui-laydate2
.laydate-next-y
,
#layui-laydate2
.laydate-prev-m
,
#layui-laydate2
.laydate-next-m
{
display
:
none
!important
;
}
#layui-laydate3
.laydate-prev-y
,
#layui-laydate3
.laydate-next-y
,
#layui-laydate3
.laydate-prev-m
,
#layui-laydate3
.laydate-next-m
{
display
:
none
!important
;
}
</style>
</style>
</head>
</head>
<body>
<body>
...
@@ -32,7 +109,8 @@
...
@@ -32,7 +109,8 @@
<div
class=
"layui-form-item"
>
<div
class=
"layui-form-item"
>
<label
class=
"layui-form-label"
>
授权码
</label>
<label
class=
"layui-form-label"
>
授权码
</label>
<div
class=
"layui-input-block"
>
<div
class=
"layui-input-block"
>
<input
type=
"text"
name=
"authCode"
lay-verify=
"required"
lay-reqText=
"授权码不能为空"
autocomplete=
"off"
placeholder=
"授权码不能为空"
class=
"layui-input"
>
<input
type=
"text"
name=
"authCode"
lay-verify=
"required"
lay-reqText=
"授权码不能为空"
autocomplete=
"off"
placeholder=
"授权码不能为空"
class=
"layui-input"
>
</div>
</div>
</div>
</div>
<div
class=
"layui-form-item"
>
<div
class=
"layui-form-item"
>
...
@@ -52,19 +130,87 @@
...
@@ -52,19 +130,87 @@
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"layui-layout"
style=
"margin-top: 10px"
>
<div
class=
"layui-row"
style=
"height: 60vh"
>
<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)"
>
<form
class=
"layui-form layui-row layui-col-space10"
lay-filter=
"intervalForm"
autocomplete=
"off"
>
<div
class=
"layui-form-item layui-col-xs1"
style=
"text-align: center"
>
<input
type=
"checkbox"
name=
"isRegion"
value=
"true"
lay-skin=
"switch"
lay-text=
"全区|地市"
lay-filter=
"area"
>
</div>
<div
class=
"layui-col-xs5"
>
<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"
>
<input
type=
"text"
class=
"layui-input"
name=
"year"
id=
"interval-year"
placeholder=
"请选择"
>
</div>
<div
class=
"layui-form-item layui-col-xs4"
>
<input
type=
"text"
class=
"layui-input"
name=
"month"
id=
"interval-month"
placeholder=
"请选择"
>
</div>
<div
class=
"layui-form-item layui-col-xs4"
>
<input
type=
"text"
class=
"layui-input"
name=
"day"
id=
"interval-day"
placeholder=
"请选择"
>
</div>
</div>
</div>
<div
class=
"layui-form-item layui-col-xs4 interval-box"
>
<div
class=
"layui-input-block flex flex-row flex-align"
>
<input
type=
"radio"
lay-filter=
"radio-time"
name=
"interval"
value=
"hour"
title=
"时"
>
<input
type=
"radio"
lay-filter=
"radio-time"
name=
"interval"
value=
"minute"
title=
"分"
>
<div
id=
"radio-second"
style=
"width: fit-content"
>
<input
type=
"radio"
lay-filter=
"radio-time"
name=
"interval"
value=
"second"
title=
"秒"
>
</div>
</div>
</div>
</form>
<div
id=
"ocr-call-chart"
style=
"width: 100%; height: calc(100% - 50px);"
></div>
</div>
</div>
</div>
</div>
</body>
</body>
<script
src=
"layui/layui.all.js"
></script>
<!--<script src="layui/layui.all.js"></script>-->
<script
src=
"layui2_9_8/layui.js"
></script>
<script
src=
"js/jquery.min.js"
></script>
<script
src=
"js/jquery.min.js"
></script>
<script
src=
"layui/xmSelect/xm-select.js"
></script>
<script
src=
"layui/xmSelect/xm-select.js"
></script>
<script
src=
"js/utils/axios.min.js"
></script>
<script
src=
"js/echarts/echarts.js"
></script>
<script
src=
"js/utils/dateformat.js"
></script>
<script
src=
"js/callSupervision/callChartOptions.js"
></script>
<script
type=
"text/html"
id=
"toolbar"
>
<script
type=
"text/html"
id=
"toolbar"
>
<
div
class
=
"layui-btn-container"
>
<
div
class
=
"layui-btn-container"
>
<
input
type
=
"button"
lay
-
event
=
"add"
value
=
"添加授权"
class
=
"layui-btn layui-btn-sm layui-btn-normal"
>
<
input
type
=
"button"
lay
-
event
=
"add"
value
=
"添加授权"
class
=
"layui-btn layui-btn-sm layui-btn-normal"
>
<
/div
>
<
/div
>
</script>
</script>
<script
th:inline=
"javascript"
>
var
gatewayUrl
=
[[
$
{
gatewayUrl
}]];
</script>
<script>
<script>
var
list
,
authorizationList
,
table
,
form
;
// 添加响应拦截器
layui
.
use
([
"table"
,
"form"
,
'laydate'
],
function
()
{
axios
.
interceptors
.
response
.
use
(
function
(
response
)
{
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return
response
.
data
;
},
function
(
error
)
{
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return
Promise
.
reject
(
error
);
});
</script>
<script>
var
list
,
authorizationList
,
table
,
form
,
timeLineChart
,
brokenLineInterval
;
var
currYear
=
new
Date
().
strftime
(
'%Y'
);
var
currMonth
=
new
Date
().
strftime
(
'%m'
);
var
currDate
=
new
Date
().
strftime
(
'%d'
);
var
datazoom_broken_start_n
=
0
;
var
datazoom_broken_end_n
=
100
;
var
isLineRestart
=
false
;
layui
.
use
([
"table"
,
"form"
,
'laydate'
,
'element'
],
function
()
{
var
laydate
=
layui
.
laydate
;
var
laydate
=
layui
.
laydate
;
laydate
.
render
({
laydate
.
render
({
elem
:
'#stime'
elem
:
'#stime'
...
@@ -219,6 +365,356 @@
...
@@ -219,6 +365,356 @@
});
});
}
}
});
});
//图表初始
initChart
(
'ocr-call-chart'
,
'line'
,
'timeLineChart'
);
function
initChart
(
chartId
,
type
,
key
,
title
,
value
)
{
window
[
key
]
=
echarts
.
init
(
document
.
getElementById
(
chartId
))
var
option
=
{};
switch
(
type
)
{
case
'line'
:
option
=
JSON
.
parse
(
JSON
.
stringify
(
defaultLineOptions
));
break
;
case
'Xbar'
:
option
=
JSON
.
parse
(
JSON
.
stringify
(
defaultXBarOptions
));
break
;
case
'Ybar'
:
option
=
JSON
.
parse
(
JSON
.
stringify
(
defaultYBarOptions
));
break
;
case
'gauge'
:
option
=
JSON
.
parse
(
JSON
.
stringify
(
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事件
window
.
addEventListener
(
"resize"
,
function
()
{
if
(
currChart
&&
currChart
.
resize
)
{
currChart
.
resize
();
}
});
}
// 表单初始赋值
form
.
val
(
'intervalForm'
,
{
isRegion
:
true
,
interval
:
'hour'
,
year
:
currYear
,
month
:
currMonth
,
day
:
currDate
})
// 全区/地市 切换监听
form
.
on
(
'switch(area)'
,
function
(
data
)
{
let
checked
=
data
.
elem
.
checked
;
if
(
checked
)
{
$
(
"#radio-second"
).
show
();
}
else
{
$
(
"#radio-second"
).
hide
();
}
if
(
timeLineChart
)
{
timeLineChart
.
clear
();
}
restartBrokenLineInterval
(
true
);
});
// 时间选择器初始
laydate
.
render
({
elem
:
'#interval-year'
,
type
:
'year'
,
value
:
new
Date
(),
isInitValue
:
true
,
// showBottom: false,
isPreview
:
false
,
btns
:
[
'now'
],
max
:
new
Date
().
strftime
(
'%Y'
),
done
:
function
(
value
,
date
,
endDate
)
{
if
(
timeLineChart
)
{
timeLineChart
.
clear
();
}
restartBrokenLineInterval
(
true
);
}
});
laydate
.
render
({
elem
:
'#interval-month'
,
type
:
'month'
,
value
:
new
Date
(),
format
:
'MM'
,
// max: new Date(),
isPreview
:
false
,
//禁用面板左下角选择值的预览,默认 true
done
:
function
(
value
,
date
,
endDate
)
{
if
(
!
value
)
{
form
.
val
(
"intervalForm"
,
{
day
:
""
});
$
(
'.interval-box'
).
css
(
'display'
,
'none'
)
}
if
(
timeLineChart
)
{
timeLineChart
.
clear
();
}
restartBrokenLineInterval
(
true
);
}
});
laydate
.
render
({
elem
:
'#interval-day'
,
type
:
'date'
,
value
:
new
Date
(),
format
:
'dd'
,
// max: new Date(),
isPreview
:
false
,
//禁用面板左下角选择值的预览,默认 true
done
:
function
(
value
,
date
,
endDate
)
{
if
(
value
)
{
form
.
val
(
"intervalForm"
,
{
interval
:
"hour"
});
$
(
'.interval-box'
).
css
(
'display'
,
'unset'
)
}
else
{
form
.
val
(
"intervalForm"
,
{
interval
:
""
});
$
(
'.interval-box'
).
css
(
'display'
,
'none'
)
}
if
(
timeLineChart
)
{
timeLineChart
.
clear
();
}
restartBrokenLineInterval
(
true
);
}
});
//时分秒选择框
form
.
on
(
'radio(radio-time)'
,
function
(
data
)
{
if
(
timeLineChart
)
{
timeLineChart
.
clear
();
}
restartBrokenLineInterval
(
true
);
});
// 开启定时器
function
startInterval
()
{
restartBrokenLineInterval
(
true
);
}
startInterval
();
// 重新计时
function
restartBrokenLineInterval
(
isNotMerge
)
{
datazoom_broken_start_n
=
0
;
datazoom_broken_end_n
=
100
;
getBrokenLineData
(
isNotMerge
);
if
(
brokenLineInterval
)
{
clearInterval
(
brokenLineInterval
)
brokenLineInterval
=
null
;
}
brokenLineInterval
=
setInterval
(
function
()
{
if
(
isLineRestart
)
{
getBrokenLineData
();
}
},
5000
)
}
// 获取调用数据
function
getBrokenLineData
(
isNotMerge
)
{
let
fData
=
form
.
val
(
'intervalForm'
);
let
displayType
=
"full"
if
(
!
fData
.
isRegion
)
{
displayType
=
"detailed"
}
isLineRestart
=
false
;
let
startDate
=
fData
.
day
?
`
${
fData
.
year
}
-
${
fData
.
month
}
-
${
fData
.
day
}
`
:
fData
.
month
?
`
${
fData
.
year
}
-
${
fData
.
month
}
`
:
fData
.
year
;
axios
({
url
:
gatewayUrl
+
'/stat/getBrokenLineData'
,
method
:
'get'
,
params
:
{
displayType
,
startDate
,
interval
:
fData
.
interval
}
}).
then
(
function
(
res
)
{
if
(
res
.
success
)
{
let
dataObj
=
JSON
.
parse
(
JSON
.
stringify
(
res
.
data
));
let
timeArr
;
let
YArrObject
=
{};
if
(
displayType
==
'full'
)
{
timeArr
=
dataObj
.
map
(
function
(
item
)
{
return
[
new
Date
(
item
[
'time'
]),
item
[
'value'
]]
})
YArrObject
[
'当前'
]
=
timeArr
;
updateLineChart
({
dataObject
:
YArrObject
,
showLegend
:
false
},
isNotMerge
);
}
else
{
if
(
dataObj
&&
Object
.
keys
(
dataObj
).
length
!=
0
)
{
for
(
let
k
in
dataObj
)
{
let
arr
=
dataObj
[
k
];
timeArr
=
arr
.
map
(
function
(
item
)
{
return
[
new
Date
(
item
[
'time'
]),
item
[
'value'
]]
})
YArrObject
[
k
]
=
timeArr
;
}
}
updateLineChart
({
dataObject
:
YArrObject
,
showLegend
:
true
},
isNotMerge
);
}
}
isLineRestart
=
true
}).
catch
(
function
(
err
)
{
console
.
log
(
' --- 接口请求失败,抛出异常 --- '
,
err
)
isLineRestart
=
true
})
}
// 时间轴折线图
function
updateLineChart
({
dataObject
,
showLegend
},
isNotMerge
)
{
// 基于准备好的dom,初始化echarts实例
var
seriesData
=
[];
var
legendData
=
[];
if
(
dataObject
&&
Object
.
keys
(
dataObject
).
length
!=
0
)
{
let
i
=
0
;
for
(
var
k
in
dataObject
)
{
let
obj
=
{};
obj
[
'id'
]
=
`line
${
i
++
}
`
;
obj
[
'type'
]
=
'line'
;
obj
[
'name'
]
=
k
;
obj
[
'data'
]
=
JSON
.
parse
(
JSON
.
stringify
(
dataObject
[
k
]));
// 对应曲线数据
obj
[
'showSymbol'
]
=
false
;
obj
[
'sampling'
]
=
'lttb'
;
obj
[
'large'
]
=
true
;
seriesData
.
push
(
obj
);
legendData
.
push
(
k
);
}
}
timeLineChart
.
on
(
'dataZoom'
,
function
(
event
)
{
if
(
event
.
batch
)
{
datazoom_broken_start_n
=
event
.
batch
[
0
].
start
datazoom_broken_end_n
=
event
.
batch
[
0
].
end
}
else
{
datazoom_broken_start_n
=
event
.
start
datazoom_broken_end_n
=
event
.
end
}
})
let
option
=
{};
if
(
isNotMerge
)
{
option
=
JSON
.
parse
(
JSON
.
stringify
(
defaultLineOptions
));
if
(
showLegend
)
{
option
.
legend
.
data
=
legendData
;
}
else
{
option
.
legend
.
data
=
[];
}
let
fData
=
form
.
val
(
'intervalForm'
);
// 坐标轴最小间隔
switch
(
fData
.
interval
)
{
case
'hour'
:
option
.
xAxis
.
minInterval
=
1000
*
3600
;
break
case
'minute'
:
option
.
xAxis
.
minInterval
=
1000
*
60
;
break
case
'second'
:
option
.
visualMap
=
[{
show
:
true
,
top
:
30
,
right
:
10
,
pieces
:
[
{
gt
:
0
,
lt
:
195
,
color
:
'#5470c6'
},
{
gte
:
195
,
color
:
'#AC3B2A'
}
],
outOfRange
:
{
color
:
'#999'
},
orient
:
"horizontal"
,
}]
option
.
xAxis
.
minInterval
=
1000
;
break
default
:
option
.
xAxis
.
minInterval
=
1000
*
3600
*
24
;
break
}
}
else
{
option
.
dataZoom
=
[
{
id
:
'inside'
,
type
:
'inside'
,
start
:
datazoom_broken_start_n
,
end
:
datazoom_broken_end_n
},
{
id
:
'slide'
,
start
:
datazoom_broken_start_n
,
end
:
datazoom_broken_end_n
}
]
}
option
.
series
=
seriesData
;
if
(
isNotMerge
)
{
timeLineChart
.
setOption
(
option
,
true
);
}
else
{
// 替换合并
timeLineChart
.
setOption
(
option
,
{
notMerge
:
false
,
replaceMerge
:
[
'dataZoom'
,
'series'
]});
}
}
// 清空定时器
function
stopInterval
()
{
if
(
brokenLineInterval
)
{
clearInterval
(
brokenLineInterval
)
}
}
// 移除监听器
function
stopListener
()
{
window
.
removeEventListener
(
'resize'
,
function
()
{
if
(
timeLineChart
&&
timeLineChart
.
resize
)
{
timeLineChart
.
resize
();
}
})
}
// 图表销毁
function
chartsDestroy
()
{
if
(
timeLineChart
)
{
timeLineChart
.
dispose
();
timeLineChart
=
null
;
}
}
// 页面销毁前
$
(
window
).
on
(
'beforeunload'
,
function
()
{
console
.
log
(
' --- 页面即将销毁 --- '
)
stopInterval
();
chartsDestroy
();
stopListener
();
});
document
.
addEventListener
(
"visibilitychange"
,
destroyObject
);
// 页面隐藏销毁图表和定时器
function
destroyObject
(
e
)
{
if
(
document
.
hidden
)
{
// 清除定时任务
stopInterval
();
}
else
{
// 开启定时任务
startInterval
();
}
}
});
});
</script>
</script>
...
...
src/main/resources/templates/callSupervision/index.html
View file @
76183631
...
@@ -21,7 +21,7 @@
...
@@ -21,7 +21,7 @@
</style>
</style>
</head>
</head>
<body>
<body>
<div
class=
"layui-layout"
>
<div
class=
"layui-layout"
id=
"charts-content"
>
<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(65% - 20px)"
>
<div
class=
"content-box box-border"
style=
"width: calc(100% - 20px);height: calc(65% - 20px)"
>
...
@@ -165,7 +165,6 @@
...
@@ -165,7 +165,6 @@
<script
src=
"js/utils/dateformat.js"
></script>
<script
src=
"js/utils/dateformat.js"
></script>
<script
src=
"js/utils/fileDownload.js"
></script>
<script
src=
"js/utils/fileDownload.js"
></script>
<script
th:inline=
"javascript"
>
<script
th:inline=
"javascript"
>
var
gatewayUrl
=
[[
$
{
gatewayUrl
}]];
var
gatewayUrl
=
[[
$
{
gatewayUrl
}]];
</script>
</script>
...
@@ -348,12 +347,12 @@
...
@@ -348,12 +347,12 @@
page
:
false
,
page
:
false
,
cols
:
[
cols
:
[
[
[
{
field
:
'name'
,
title
:
'服务器资源池'
,
align
:
'center'
,
style
:
'color: #3e63cc'
,
minWidth
:
"200"
},
{
field
:
'name'
,
title
:
'服务器资源池'
,
align
:
'center'
,
style
:
'color: #3e63cc'
,
minWidth
:
"200"
},
{
{
field
:
'active'
,
field
:
'active'
,
title
:
'活跃状态'
,
title
:
'活跃状态'
,
align
:
'center'
,
align
:
'center'
,
width
:
'100'
,
width
:
'100'
,
style
:
'color: #3e63cc'
,
style
:
'color: #3e63cc'
,
templet
:
function
(
data
)
{
templet
:
function
(
data
)
{
if
(
data
.
active
)
{
if
(
data
.
active
)
{
...
@@ -416,16 +415,16 @@
...
@@ -416,16 +415,16 @@
var
option
=
{};
var
option
=
{};
switch
(
type
)
{
switch
(
type
)
{
case
'line'
:
case
'line'
:
option
=
defaultLineOptions
;
option
=
JSON
.
parse
(
JSON
.
stringify
(
defaultLineOptions
))
;
break
;
break
;
case
'Xbar'
:
case
'Xbar'
:
option
=
defaultXBarOptions
;
option
=
JSON
.
parse
(
JSON
.
stringify
(
defaultXBarOptions
))
;
break
;
break
;
case
'Ybar'
:
case
'Ybar'
:
option
=
defaultYBarOptions
;
option
=
JSON
.
parse
(
JSON
.
stringify
(
defaultYBarOptions
))
;
break
;
break
;
case
'gauge'
:
case
'gauge'
:
option
=
defaultGaugeOptions
;
option
=
JSON
.
parse
(
JSON
.
stringify
(
defaultGaugeOptions
))
;
break
;
break
;
default
:
default
:
break
;
break
;
...
@@ -482,9 +481,10 @@
...
@@ -482,9 +481,10 @@
})
})
let
option
=
{};
let
option
=
{};
if
(
isNotMerge
)
{
if
(
isNotMerge
)
{
option
=
defaultLineOptions
;
option
=
JSON
.
parse
(
JSON
.
stringify
(
defaultLineOptions
))
;
if
(
showLegend
)
{
if
(
showLegend
)
{
option
.
legend
.
data
=
legendData
;
option
.
legend
.
data
=
legendData
;
option
.
legend
.
textStyle
.
color
=
'#fff'
;
}
else
{
}
else
{
option
.
legend
.
data
=
[];
option
.
legend
.
data
=
[];
}
}
...
@@ -498,6 +498,29 @@
...
@@ -498,6 +498,29 @@
option
.
xAxis
.
minInterval
=
1000
*
60
;
option
.
xAxis
.
minInterval
=
1000
*
60
;
break
break
case
'second'
:
case
'second'
:
option
.
visualMap
=
[{
show
:
true
,
top
:
30
,
right
:
10
,
pieces
:
[
{
gt
:
0
,
lt
:
195
,
color
:
'#5470c6'
},
{
gte
:
195
,
color
:
'#AC3B2A'
}
],
outOfRange
:
{
color
:
'#999'
},
orient
:
"horizontal"
,
textStyle
:
{
color
:
"#fff"
}
}]
option
.
xAxis
.
minInterval
=
1000
;
option
.
xAxis
.
minInterval
=
1000
;
break
break
default
:
default
:
...
@@ -525,6 +548,7 @@
...
@@ -525,6 +548,7 @@
}
else
{
}
else
{
// 替换合并
// 替换合并
timeLineChart
.
setOption
(
option
,
{
notMerge
:
false
,
replaceMerge
:
[
'dataZoom'
,
'series'
]});
timeLineChart
.
setOption
(
option
,
{
notMerge
:
false
,
replaceMerge
:
[
'dataZoom'
,
'series'
]});
let
op
=
timeLineChart
.
getOption
();
}
}
}
}
...
@@ -908,7 +932,7 @@
...
@@ -908,7 +932,7 @@
datazoom_end_n
=
event
.
end
datazoom_end_n
=
event
.
end
}
}
})
})
let
option
=
defaultYBarOptions
;
let
option
=
JSON
.
parse
(
JSON
.
stringify
(
defaultYBarOptions
))
;
option
.
dataZoom
[
0
].
start
=
datazoom_start_n
;
option
.
dataZoom
[
0
].
start
=
datazoom_start_n
;
option
.
dataZoom
[
0
].
end
=
datazoom_end_n
;
option
.
dataZoom
[
0
].
end
=
datazoom_end_n
;
option
.
dataZoom
[
1
].
start
=
datazoom_start_n
;
option
.
dataZoom
[
1
].
start
=
datazoom_start_n
;
...
@@ -949,12 +973,12 @@
...
@@ -949,12 +973,12 @@
method
:
'get'
,
method
:
'get'
,
}).
then
(
function
(
res
)
{
}).
then
(
function
(
res
)
{
if
(
res
.
success
)
{
if
(
res
.
success
)
{
let
{
cpu
,
disk
,
gpu
,
load
,
memory
}
=
res
.
data
let
{
cpu
,
disk
,
gpu
,
load
,
memory
}
=
res
.
data
updateGauge
(
'cpuGaugeChart'
,
cpu
);
updateGauge
(
'cpuGaugeChart'
,
cpu
);
updateGauge
(
'hardDiskGaugeChart'
,
disk
);
updateGauge
(
'hardDiskGaugeChart'
,
disk
);
updateGauge
(
'gpuGaugeChart'
,
gpu
);
updateGauge
(
'gpuGaugeChart'
,
gpu
);
updateGauge
(
'sysLoadGaugeChart'
,
load
);
updateGauge
(
'sysLoadGaugeChart'
,
load
);
updateGauge
(
'memoryGaugeChart'
,
memory
);
updateGauge
(
'memoryGaugeChart'
,
memory
);
}
else
{
}
else
{
console
.
log
(
' --- 获取服务器总资源实时监控数据失败 --- '
,
res
)
console
.
log
(
' --- 获取服务器总资源实时监控数据失败 --- '
,
res
)
}
}
...
@@ -963,7 +987,7 @@
...
@@ -963,7 +987,7 @@
})
})
}
}
function
updateGauge
(
key
,
value
)
{
function
updateGauge
(
key
,
value
)
{
let
option
=
window
[
key
].
getOption
();
let
option
=
window
[
key
].
getOption
();
option
.
series
[
1
].
data
[
0
]
=
value
;
option
.
series
[
1
].
data
[
0
]
=
value
;
let
color
=
"#58D9F9"
;
let
color
=
"#58D9F9"
;
...
@@ -1003,6 +1027,9 @@
...
@@ -1003,6 +1027,9 @@
if
(
gaugeInterval
)
{
if
(
gaugeInterval
)
{
clearInterval
(
gaugeInterval
)
clearInterval
(
gaugeInterval
)
}
}
if
(
tableInterval
)
{
clearInterval
(
tableInterval
)
}
}
}
// 移除监听器
// 移除监听器
...
@@ -1051,6 +1078,7 @@
...
@@ -1051,6 +1078,7 @@
// 页面销毁前
// 页面销毁前
$
(
window
).
on
(
'beforeunload'
,
function
()
{
$
(
window
).
on
(
'beforeunload'
,
function
()
{
console
.
log
(
' --- 页面即将销毁 --- '
)
stopInterval
();
stopInterval
();
chartsDestroy
();
chartsDestroy
();
stopListener
();
stopListener
();
...
...
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