Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
A
apaas-ui
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
gzga-jzapi
apaas-ui
Commits
3cab9fe3
Commit
3cab9fe3
authored
Jul 15, 2020
by
张俊
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'dev' of
https://cloud.wodcloud.com/git/apaas/apaas-v3-ui
into dev
parents
fe16a102
9d64c73f
Changes
8
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
1127 additions
and
144 deletions
+1127
-144
src/components/apass-table.vue
src/components/apass-table.vue
+151
-43
src/components/e-charts/bar-chart.vue
src/components/e-charts/bar-chart.vue
+9
-5
src/components/e-charts/dashboard.vue
src/components/e-charts/dashboard.vue
+1
-3
src/components/e-charts/graph.vue
src/components/e-charts/graph.vue
+131
-0
src/components/e-charts/starlist.vue
src/components/e-charts/starlist.vue
+22
-24
src/components/e-charts/toplist.vue
src/components/e-charts/toplist.vue
+1
-1
src/pages/data-analysis/my-application.vue
src/pages/data-analysis/my-application.vue
+556
-4
src/pages/data-analysis/my-service.vue
src/pages/data-analysis/my-service.vue
+256
-64
No files found.
src/components/apass-table.vue
View file @
3cab9fe3
<
template
>
<
template
>
<div
class=
"apass_table"
>
<div
class=
"apass_table"
>
<el-table
:data=
"data"
>
<el-table
:data=
"data"
@
sort-change=
"sortChange"
>
<el-table-column
v-if=
"paddingLeft > 10"
:width=
"paddingLeft - 10"
></el-table-column>
<el-table-column
v-if=
"paddingLeft > 10"
:width=
"paddingLeft - 10"
></el-table-column>
<el-table-column
<el-table-column
v-for=
"(item, index) in header"
v-for=
"(item, index) in header"
:label=
"item.label"
:label=
"item.label"
:align=
"item.align || 'left'"
:align=
"item.align || 'left'"
:width=
"item.width"
:width=
"item.width"
:key=
"'head_' + index"
:key=
"'head_' + index"
:prop=
"item.prop"
:sortable=
"item.sortable ? 'custom' : false"
>
>
<template
slot-scope=
"scope"
>
<template
slot-scope=
"scope"
>
<div
v-if=
"item.type === 'buttons'"
class=
"row_action"
>
<div
v-if=
"item.type === 'buttons'"
class=
"row_action"
>
...
@@ -44,26 +49,72 @@
...
@@ -44,26 +49,72 @@
></a>
></a>
</div>
</div>
<div
v-else-if=
"item.type === 'icon'"
>
<div
v-else-if=
"item.type === 'icon'"
>
<img
src=
"../assets/imgs/ic_true.png"
alt=
""
v-if=
"scope.row[item.prop]==1"
style=
"width:100%;height:100%;"
>
<img
<img
src=
"../assets/imgs/ic_yiwancheng.png"
alt=
""
v-if=
"scope.row[item.prop]==2"
style=
"width:100%;height:100%;"
>
src=
"../assets/imgs/ic_true.png"
<img
src=
"../assets/imgs/ic_restart.png"
alt=
""
v-if=
"scope.row[item.prop]==3"
style=
"width:100%;height:100%;"
>
alt=
""
<img
src=
"../assets/imgs/ic_failed.png"
alt=
""
v-if=
"scope.row[item.prop]==4"
style=
"width:100%;height:100%;"
>
v-if=
"scope.row[item.prop] == 1"
style=
"width:100%;height:100%;"
/>
<img
src=
"../assets/imgs/ic_yiwancheng.png"
alt=
""
v-if=
"scope.row[item.prop] == 2"
style=
"width:100%;height:100%;"
/>
<img
src=
"../assets/imgs/ic_restart.png"
alt=
""
v-if=
"scope.row[item.prop] == 3"
style=
"width:100%;height:100%;"
/>
<img
src=
"../assets/imgs/ic_failed.png"
alt=
""
v-if=
"scope.row[item.prop] == 4"
style=
"width:100%;height:100%;"
/>
</div>
</div>
<div
v-else-if=
"item.type === 'tag'"
class=
"table_tag"
>
<div
v-else-if=
"item.type === 'tag'"
class=
"table_tag"
>
<el-tag
<el-tag
v-for=
"(item,index) in scope.row[item.prop]"
v-if=
"index<=1||tag_flag_arr[scope.$index]==1"
v-for=
"(item, index) in scope.row[item.prop]"
:key=
"index+5515"
>
v-if=
"index <= 1 || tag_flag_arr[scope.$index] == 1"
:key=
"index + 5515"
>
{{ item }}
{{ item }}
</el-tag>
</el-tag>
<div
class=
"tagclo btn_down"
v-if=
"tag_flag_arr[scope.$index]==0&&scope.row[item.prop].length>2"
@
click=
"change_tag(scope.$index,1)"
></div>
<div
<div
class=
"tagclo btn_up"
v-if=
"tag_flag_arr[scope.$index]==1&&scope.row[item.prop].length>2"
@
click=
"change_tag(scope.$index,0)"
></div>
class=
"tagclo btn_down"
v-if=
"
tag_flag_arr[scope.$index] == 0 &&
scope.row[item.prop].length > 2
"
@
click=
"change_tag(scope.$index, 1)"
></div>
<div
class=
"tagclo btn_up"
v-if=
"
tag_flag_arr[scope.$index] == 1 &&
scope.row[item.prop].length > 2
"
@
click=
"change_tag(scope.$index, 0)"
></div>
</div>
</div>
<div
v-else-if=
"item.type === 'chart'"
class=
"charts"
>
<div
v-else-if=
"item.type === 'chart'"
class=
"charts"
>
<sparkline
:indicatorStyles=
"spIndicatorStyles1"
>
<sparkline
:indicatorStyles=
"spIndicatorStyles1"
>
<sparklineCurve
:refLineStyles=
"spRefLineStyles3"
:refLineType=
"false"
:data=
"scope.row[item.prop]"
:limit=
"scope.row[item.prop].length"
:styles=
"item.prop=='cpu'?spCurveStyles2:spCurveStyles3"
/>
<sparklineCurve
:refLineStyles=
"spRefLineStyles3"
:refLineType=
"false"
:data=
"scope.row[item.prop]"
:limit=
"scope.row[item.prop].length"
:styles=
"item.prop == 'cpu' ? spCurveStyles2 : spCurveStyles3"
/>
</sparkline>
</sparkline>
<span
class=
"use"
v-if=
"item.prop=='cpu'"
>
{{scope.row['cpu_use']}}.00mm
</span>
<span
class=
"use"
v-if=
"item.prop == 'cpu'"
<span
class=
"use"
v-if=
"item.prop=='mermoy'"
>
{{scope.row['memory_use']}}Mi
</span>
>
{{ scope.row["cpu_use"] }}.00mm
</span
>
<span
class=
"use"
v-if=
"item.prop == 'mermoy'"
>
{{ scope.row["memory_use"] }}Mi
</span
>
</div>
</div>
<div
v-else-if=
"item.type === 'image'"
class=
"img_content"
>
<div
v-else-if=
"item.type === 'image'"
class=
"img_content"
>
<img
<img
...
@@ -92,6 +143,22 @@
...
@@ -92,6 +143,22 @@
></span>
></span>
</el-tooltip>
</el-tooltip>
</div>
</div>
<span
v-else-if=
"item.type === 'hot-index'"
class=
"hot_index"
:class=
"'index_' + scope.row.hotIndex"
v-text=
"'TOP' + scope.row.hotIndex"
></span>
<span
class=
"sort_table"
v-else-if=
"item.sortable"
>
<span>
{{ getPercent(scope.row[item.prop]) }}
</span>
<span>
<img
v-if=
"scope.row[item.prop] >= 0"
:src=
"require('../assets/imgs/icon_up.png')"
/>
<img
v-else
:src=
"require('../assets/imgs/icon_down.png')"
/>
</span>
</span>
<span
<span
v-else
v-else
v-text=
"
v-text=
"
...
@@ -119,47 +186,55 @@ export default {
...
@@ -119,47 +186,55 @@ export default {
type
:
[
Number
,
String
],
type
:
[
Number
,
String
],
default
:
()
=>
50
,
default
:
()
=>
50
,
},
},
height
:{
height
:
{
type
:
Number
,
type
:
Number
,
default
:
null
,
default
:
null
,
},
},
},
},
data
(){
data
()
{
return
{
return
{
tag_flag_arr
:[],
tag_flag_arr
:
[],
spCurveStyles2
:
{
spCurveStyles2
:
{
stroke
:
'
#515fe7
'
,
stroke
:
"
#515fe7
"
,
fill
:
'
#515fe7
'
fill
:
"
#515fe7
"
,
// fill: '#d2d6f8'
// fill: '#d2d6f8'
},
},
spCurveStyles3
:
{
spCurveStyles3
:
{
stroke
:
'
#37c299
'
,
stroke
:
"
#37c299
"
,
fill
:
'
#37c299
'
fill
:
"
#37c299
"
,
// fill: '#c8ebe4'
// fill: '#c8ebe4'
},
},
// 指示器样式
// 指示器样式
spIndicatorStyles1
:
false
,
spIndicatorStyles1
:
false
,
spRefLineStyles3
:{
spRefLineStyles3
:
{
stroke
:
'
#d14
'
,
stroke
:
"
#d14
"
,
strokeOpacity
:
0
,
strokeOpacity
:
0
,
strokeDasharray
:
'
2, 2
'
strokeDasharray
:
"
2, 2
"
,
},
},
}
};
},
mounted
()
{
this
.
tag_flag_arr
=
Array
.
from
(
{
length
:
this
.
data
.
length
},
(
item
,
index
)
=>
(
item
=
0
)
);
},
methods
:
{
change_tag
(
index
,
val
)
{
this
.
$set
(
this
.
tag_flag_arr
,
index
,
val
);
},
sortChange
(
value
)
{
this
.
$emit
(
"
sort-change
"
,
value
);
},
getPercent
(
num
)
{
return
Math
.
round
(
num
*
100
)
+
"
%
"
;
},
},
mounted
(){
this
.
tag_flag_arr
=
Array
.
from
({
length
:
this
.
data
.
length
},(
item
,
index
)
=>
item
=
0
)
},
},
methods
:{
change_tag
(
index
,
val
){
this
.
$set
(
this
.
tag_flag_arr
,
index
,
val
)
}
}
};
};
</
script
>
</
script
>
<
style
>
<
style
>
.table_tag
.el-tag
{
.table_tag
.el-tag
{
background-color
:
#58617a
;
background-color
:
#58617a
;
color
:
#fff
;
color
:
#fff
;
display
:
inline-block
;
display
:
inline-block
;
...
@@ -171,7 +246,7 @@ export default {
...
@@ -171,7 +246,7 @@ export default {
margin-right
:
3px
;
margin-right
:
3px
;
margin-bottom
:
3px
;
margin-bottom
:
3px
;
}
}
.tagclo
{
.tagclo
{
display
:
inline-block
;
display
:
inline-block
;
width
:
22px
;
width
:
22px
;
height
:
22px
;
height
:
22px
;
...
@@ -182,18 +257,18 @@ export default {
...
@@ -182,18 +257,18 @@ export default {
background-size
:
contain
;
background-size
:
contain
;
margin-top
:
-3px
;
margin-top
:
-3px
;
}
}
.btn_down
{
.btn_down
{
background-image
:
url(
'../assets/imgs/btn_expand.png'
)
;
background-image
:
url(
"../assets/imgs/btn_expand.png"
)
;
}
}
.btn_up
{
.btn_up
{
background-image
:
url(
'../assets/imgs/btn_fold.png'
)
;
background-image
:
url(
"../assets/imgs/btn_fold.png"
)
;
}
}
.charts
{
.charts
{
position
:
relative
;
position
:
relative
;
}
}
.charts
.use
{
.charts
.use
{
position
:
absolute
;
position
:
absolute
;
bottom
:
0
;
bottom
:
0
;
right
:
-10px
;
right
:
-10px
;
font-size
:
12px
;
font-size
:
12px
;
color
:
rgba
(
26
,
34
,
54
,
1
);
color
:
rgba
(
26
,
34
,
54
,
1
);
...
@@ -202,6 +277,39 @@ export default {
...
@@ -202,6 +277,39 @@ export default {
font-size
:
12px
;
font-size
:
12px
;
line-height
:
20px
;
line-height
:
20px
;
}
}
.hot_index
{
font-family
:
"Arial"
;
font-style
:
italic
;
font-weight
:
800
;
font-size
:
16px
;
color
:
#b9bab5
;
}
.hot_index.index_1
{
color
:
#d9ac64
;
}
.hot_index.index_2
{
color
:
#c3c4c0
;
}
.hot_index.index_3
{
color
:
#ba6e40
;
}
.sort_table
{
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
}
.sort_table
>
span
{
flex-shrink
:
0
;
}
.sort_table
>
span
:nth-child
(
1
)
{
flex-grow
:
1
;
text-align
:
right
;
}
.sort_table
>
span
:nth-child
(
2
)
{
width
:
30%
;
margin-left
:
5px
;
text-align
:
left
;
}
</
style
>
</
style
>
<
style
scoped
>
<
style
scoped
>
...
...
src/components/e-charts/bar-chart.vue
View file @
3cab9fe3
...
@@ -12,7 +12,6 @@ export default {
...
@@ -12,7 +12,6 @@ export default {
return
{
return
{
xaxis
:
[],
xaxis
:
[],
data
:
[]
data
:
[]
};
};
}
}
},
},
...
@@ -37,14 +36,19 @@ export default {
...
@@ -37,14 +36,19 @@ export default {
default
:
false
default
:
false
}
}
},
},
data
:
()
=>
({
data
:
()
=>
({}),
navList
:
[]
}),
mounted
()
{},
mounted
()
{},
methods
:
{
methods
:
{
bar
()
{
bar
()
{
let
self
=
this
;
let
self
=
this
;
return
{
return
{
grid
:
{
left
:
10
,
right
:
10
,
bottom
:
25
,
top
:
25
,
containLabel
:
true
},
xAxis
:
[
xAxis
:
[
{
{
type
:
"
category
"
,
type
:
"
category
"
,
...
...
src/components/e-charts/dashboard.vue
View file @
3cab9fe3
...
@@ -24,9 +24,7 @@ export default {
...
@@ -24,9 +24,7 @@ export default {
default
:
false
default
:
false
}
}
},
},
data
:
()
=>
({
data
:
()
=>
({}),
navList
:
[]
}),
mounted
()
{},
mounted
()
{},
methods
:
{
methods
:
{
dashboard
()
{
dashboard
()
{
...
...
src/components/e-charts/graph.vue
0 → 100644
View file @
3cab9fe3
<
template
>
<chart
:options=
"graph()"
class=
"graph"
/>
</
template
>
<
script
>
import
{
graphic
}
from
"
echarts/lib/export
"
;
export
default
{
props
:
{
data
:
{
type
:
Object
,
default
:
()
=>
{
return
{
xaxis
:
[],
data
:
[],
legend
:
[]
};
}
}
},
data
:
()
=>
({
navList
:
[]
}),
mounted
()
{},
methods
:
{
graph
()
{
let
self
=
this
;
return
{
color
:
[
"
#274fee
"
,
"
#ef9433
"
],
legend
:
{
bottom
:
0
,
left
:
"
center
"
,
icon
:
"
roundRect
"
,
itemWidth
:
10
,
itemHeight
:
10
,
data
:
self
.
data
.
legend
,
orient
:
"
horizontal
"
,
backgroundColor
:
"
#f4f7fc
"
},
grid
:
{
left
:
10
,
right
:
10
,
bottom
:
25
,
top
:
25
,
containLabel
:
true
},
xAxis
:
[
{
type
:
"
category
"
,
data
:
self
.
data
.
xaxis
,
axisLine
:
{
lineStyle
:
{
color
:
"
#f2f2f2
"
}
},
axisLabel
:
{
margin
:
20
,
color
:
"
#0d1847
"
,
textStyle
:
{
fontSize
:
12
},
interval
:
0
},
boundaryGap
:
false
}
],
yAxis
:
[
{
type
:
"
value
"
,
axisTick
:
{
show
:
false
},
axisLine
:
{
lineStyle
:
{
color
:
"
rgba(0, 0, 0, 0)
"
}
},
axisLabel
:
{
color
:
"
#a9aec0
"
,
textStyle
:
{
fontSize
:
12
}
}
}
],
series
:
[
{
name
:
self
.
data
.
legend
[
0
],
type
:
"
line
"
,
data
:
self
.
data
.
data
[
0
],
symbolSize
:
1
,
symbol
:
"
circle
"
,
smooth
:
true
,
yAxisIndex
:
0
,
showSymbol
:
false
,
lineStyle
:
{
width
:
2
,
color
:
"
#274fee
"
,
shadowColor
:
"
rgb(39, 79, 238, 0.3)
"
,
shadowBlur
:
5
,
shadowOffsetY
:
8
}
},
{
name
:
self
.
data
.
legend
[
1
],
type
:
"
line
"
,
data
:
self
.
data
.
data
[
1
],
symbolSize
:
1
,
symbol
:
"
circle
"
,
smooth
:
true
,
yAxisIndex
:
0
,
showSymbol
:
false
,
lineStyle
:
{
width
:
2
,
color
:
"
#ef9433
"
,
shadowColor
:
"
rgb(239, 148, 51, 0.3)
"
,
shadowBlur
:
5
,
shadowOffsetY
:
8
}
}
]
};
}
}
};
</
script
>
<
style
scoped
>
.graph
{
width
:
100%
;
height
:
calc
(
100%
-
20px
);
}
</
style
>
\ No newline at end of file
src/components/e-charts/starlist.vue
View file @
3cab9fe3
<
template
>
<
template
>
<div>
<ul
class=
"star_list"
>
<ul
class=
"star_list"
>
<li
<li
class=
"item_list"
class=
"item_list"
...
@@ -23,7 +22,6 @@
...
@@ -23,7 +22,6 @@
<span
class=
"item-text"
v-text=
"option.count + '个'"
></span>
<span
class=
"item-text"
v-text=
"option.count + '个'"
></span>
</li>
</li>
</ul>
</ul>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
...
...
src/components/e-charts/toplist.vue
View file @
3cab9fe3
...
@@ -37,7 +37,7 @@ export default {
...
@@ -37,7 +37,7 @@ export default {
},
},
targetValue
:
{
targetValue
:
{
type
:
Number
,
type
:
Number
,
default
:
()
=>
24
00
,
default
:
()
=>
10
00
,
},
},
},
},
methods
:
{
methods
:
{
...
...
src/pages/data-analysis/my-application.vue
View file @
3cab9fe3
This diff is collapsed.
Click to expand it.
src/pages/data-analysis/my-service.vue
View file @
3cab9fe3
This diff is collapsed.
Click to expand it.
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