gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: networkoverview app列表图

Browse Source
This commit is contained in:
chenjinsong
2022-07-19 10:16:44 +08:00
parent dd146ca55b
commit f007ee3d81
7 changed files with 125 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/css/components/index.scss
View File

@@ -51,5 +51,6 @@
@import './views/charts2/networkOverviewPerformanceEvent';
@import './views/charts2/networkOverviewTabs';
@import './views/charts2/npmNetworkQuantity';
@import './views/charts2/networkOverviewApps';
@import './views/charts2/npmTabs';
//@import '../chart';

76
src/assets/css/components/views/charts2/networkOverviewApps.scss Normal file
View File

@@ -0,0 +1,76 @@
.network-overview-apps {
height: 100%;
.line-select-metric {
display: flex;
justify-content: flex-end;
align-items: center;
&>span {
font-size: 12px;
color: #575757;
font-weight: 400;
margin-right: 3px;
}
.line-select__operation {
height: 24px;
margin-left: 3px;
box-shadow: none;
border-radius: 2px;
.option__select {
pointer-events:none;
.el-input__inner {
width: 80px;
height: 24px;
padding-left: 4px;
line-height: 24px;
font-size: 12px;
color: #2C72C6;
font-weight: 400;
}
.el-input__suffix {
display: flex;
.el-input__suffix-inner {
line-height: 24px;
.el-select__caret {
line-height: 24px;
width: 16px;
color: #575757;
}
}
}
}
.option__select.select-column {
.el-input__inner {
width: 86px;
padding-left: 8px;
}
}
.icon-group-divide {
height: 14px;
width: 1px;
background-color: $--color-primary;
}
i {
font-size: 12px;
}
}
}
.app-cards {
display: grid;
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-gap: 20px;
width: 100%;
padding-top: 10px;
height: calc(100% - 24px);
.app-card {
height: 100%;
border: 1px solid #E2E5EC;
border-radius: 4px;
}
}
}

1
src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
View File

@@ -54,7 +54,6 @@
border-radius: 4px;
padding: 8px 5px;
span {
font-family: NotoSansHans-Medium;
font-size: 12px;
color: #575757;
font-weight: 500;

7
src/assets/css/components/views/charts2/networkOverviewLine.scss
View File

@@ -12,7 +12,6 @@
display: flex;
justify-content: space-between;
.cn-chart-tooltip-value.cn-chart-tooltip__color {
font-family: NotoSansHans-Medium;
font-size: 12px;
color: #353636;
line-height: 12px;
@@ -29,7 +28,7 @@
position: absolute;
.line-select-metric,.line-select-reference-line {
display: flex;
span {
&>span {
font-size: 12px;
color: #575757;
font-weight: 400;
@@ -38,7 +37,7 @@
.line-select__operation {
height: 24px;
margin-left: 3px;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.10);
box-shadow: none;
border-radius: 2px;
.option__select {
pointer-events:none;
@@ -93,7 +92,7 @@
display: flex;
flex-direction: column;
span:nth-of-type(1) {
font-family: 'Helvetica-Bold';
font-family: Helvetica-Bold;
font-size: 28px;
color: #353636;
margin-right: 4px;

1
src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
View File

@@ -46,7 +46,6 @@
padding: 8px 5px;
margin-left: 30px;
span {
font-family: NotoSansHans-Medium;
font-size: 12px;
color: #575757;
font-weight: 500;

7
src/views/charts2/Chart.vue
View File

@@ -17,6 +17,11 @@
<network-overview-tabs
v-else-if="chart.type === typeMapping.networkOverview.table"
></network-overview-tabs>
<network-overview-apps
v-else-if="chart.type === typeMapping.networkOverview.appList"
:chart="chart"
>
</network-overview-apps>
<npm-tabs
v-else-if="chart.type === typeMapping.npm.npmTabs"
@tabChange="npmTabChange"
@@ -36,6 +41,7 @@ import NetworkOverviewLine from '@/views/charts2/charts/NetworkOverviewLine'
import NetworkOverviewDdosDetection from '@/views/charts2/charts/NetworkOverviewDdosDetection'
import NetworkOverviewPerformanceEvent from '@/views/charts2/charts/NetworkOverviewPerformanceEvent'
import NetworkOverviewTabs from '@/views/charts2/charts/NetworkOverviewTabs'
import NetworkOverviewApps from '@/views/charts2/charts/NetworkOverviewApps'
import NpmTabs from '@/views/charts2/charts/NpmTabs'
import NpmNetworkQuantity from '@/views/charts2/charts/NpmNetworkQuantity'
export default {
@@ -47,6 +53,7 @@ export default {
NetworkOverviewDdosDetection,
NetworkOverviewPerformanceEvent,
NetworkOverviewTabs,
NetworkOverviewApps,
NpmTabs,
NpmNetworkQuantity
},

38
src/views/charts2/charts/NetworkOverviewApps.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div class="network-overview-apps">
<div class="line-select-metric">
<span>{{$t('network.metric')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="metricFilter"
class="option__select select-topn"
placeholder=""
popper-class="option-popper"
>
<el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
<div class="app-cards">
<div class="app-card" v-for="(app, index) in chart.params.app" :key="index">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'NetworkOverviewApps',
props: {
chart: Object
},
data () {
return {
metricFilter: '',
metricOptions: []
}
}
}
</script>