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

fix: 修复部分 echart 图表bug，样式调整

Browse Source
This commit is contained in:
@changcode
2022-07-14 17:07:07 +08:00
parent eca3878819
commit c367966e04
9 changed files with 342 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,50 +1,64 @@
.ddos-detection {
display: flex;
height: 100%;
padding: 0 20px;
border: 1px solid #E2E5EC;
border-radius: 4px;
flex-direction: column;
justify-content: space-evenly;
.ddos-detection-type {
display: flex;
justify-content: space-between;
.ddos-detection-type-value {
display: flex;
flex-direction: column;
.ddos-detection-type-value-name {
font-size: 12px;
color: #575757;
line-height: 12px;
font-weight: 400;
margin-bottom: 12px;
}
.ddos-detection-type-value-number {
font-size: 18px;
color: #E26154;
line-height: 12px;
font-weight: 500;
}
.ddos-detection-title {
margin-top: 15px;
i {
font-size: 16px;
width: 16px;
height: 16px;
color: #38ACD2;
margin:0 8px 0 10px;
}
}
.el-button {
width: 117px;
min-height: 28px;
background: #FBFBFB;
border: 1px solid #C5C5C5;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 4px;
padding: 8px 5px;
span {
font-family: NotoSansHans-Medium;
font-size: 12px;
color: #575757;
font-weight: 500;
i {
transform: rotate(-90deg);
color: #575757;
.ddos-detection-value {
height: calc(100% - 36px);
padding: 0 20px;
display: flex;
flex-direction: column;
.ddos-detection-type {
display: flex;
justify-content: space-between;
margin: 20px 0;
.ddos-detection-type-value {
display: flex;
flex-direction: column;
.ddos-detection-type-value-name {
font-size: 12px;
color: #575757;
line-height: 12px;
font-weight: 400;
margin-bottom: 12px;
}
.ddos-detection-type-value-number {
font-size: 18px;
color: #E26154;
line-height: 12px;
font-weight: 500;
}
}
}
.el-button {
margin-right: 20px;
width: 117px;
min-height: 28px;
background: #FBFBFB;
border: 1px solid #C5C5C5;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 4px;
padding: 8px 5px;
span {
font-family: NotoSansHans-Medium;
font-size: 12px;
margin-left: 4px;
color: #575757;
font-weight: 500;
i {
transform: rotate(-90deg);
color: #575757;
font-size: 12px;
margin-left: 4px;
}
}
}
}

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

@@ -5,6 +5,8 @@
border: 1px solid #E2E5EC;
border-radius: 4px;
.chart-drawing {
height: 100%;
width: 100%;
div:nth-of-type(2) {
.cn-chart-tooltip {
display: flex;
@@ -21,13 +23,9 @@
}
}
}
#chart {
width: 1288px;
height: 340px;
}
.line-select {
line-height: 24px;
top: 10px;
top: 20px;
right: 20px;
display: flex;
position: absolute;
@@ -89,16 +87,16 @@
}
.line-value {
position: absolute;
top: 30px;
top: 20px;
left: 27px;
height: 34px;
line-height: 34px;
display: flex;
.line-value-mpackets {
margin-right: 30px;
display: flex;
flex-direction: column;
span:nth-of-type(1) {
font-family: 'Helvetica-Bold';
font-size: 20px;
font-size: 28px;
color: #353636;
margin-right: 4px;
}
@@ -107,6 +105,43 @@
color: #575757;
font-weight: 400;
}
.table-below-box--inactivated.line-value-mpackets-name {
color: #ccc;
div:nth-of-type(1) {
background-color: #ccc !important;
}
}
.line-value-mpackets-name {
position: relative;
display: flex;
.mpackets-name {
flex: 1;
padding-left: 17px;
}
.total,.inbound,.outbound,.internal,.other {
width: 14px;
height: 14px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-top: -7px;
}
.total {
background: #00A7AB;
}
.inbound {
background: #7FA054;
}
.outbound {
background: #35ADDA;
}
.internal {
background: #E48F3E;
}
.other {
background: #98709B;
}
}
}
}
}

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

@@ -2,42 +2,58 @@
height: 100%;
border: 1px solid #E2E5EC;
border-radius: 4px;
.performance-event-pie {
.performance-event-title {
margin-top: 15px;
i {
font-size: 16px;
width: 16px;
height: 16px;
color: #38ACD2;
margin:0 8px 0 10px;
}
}
.performance-event-value {
width: 100%;
div {
height: 165px;
width: 324px;
height: calc(100% - 36px);
.performance-event-pie {
height: calc(100% - 47px);
width: 100%;
.chart-drawing {
height: 50%;
width: 100%;
}
.performance-event-pie-hr {
height: 1px;
width: 310px;
margin: auto;
background: #E2E5EC;
}
}
.performance-event-pie-hr {
height: 1px;
width: 310px;
margin: auto;
background: #E2E5EC;
.pie-button.el-button {
width: 96px;
}
}
.pie-button.el-button {
width: 96px;
}
.el-button {
width: 117px;
min-height: 28px;
background: #FBFBFB;
border: 1px solid #C5C5C5;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 4px;
padding: 8px 5px;
margin-left: 30px;
span {
font-family: NotoSansHans-Medium;
font-size: 12px;
color: #575757;
font-weight: 500;
i {
transform: rotate(-90deg);
color: #575757;
.el-button {
width: 117px;
min-height: 28px;
background: #FBFBFB;
border: 1px solid #C5C5C5;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 4px;
padding: 8px 5px;
margin-left: 30px;
span {
font-family: NotoSansHans-Medium;
font-size: 12px;
margin-left: 4px;
color: #575757;
font-weight: 500;
i {
transform: rotate(-90deg);
color: #575757;
font-size: 12px;
margin-left: 4px;
}
}
}
}
}