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

CN-333 feat : Dashboard--dns 实时告警信息图表开发 以及CN-332样式修改

Browse Source
This commit is contained in:
zhangxiaolong
2022-03-07 09:30:17 +08:00
parent 6e33638715
commit ef1686ce70
15 changed files with 672 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,6 +38,8 @@
@import './views/charts/chartEchartAppRelateDomain';
@import './views/charts/ChartOneSituationStatistics';
@import './views/charts/ChartTwoSituationStatistics';
@import './views/charts/chartAlarmInfo';
@import './views/chartHeader';
//@import '../chart';

42
src/assets/css/components/views/chartHeader.scss Normal file
View File

@@ -0,0 +1,42 @@
.cn-chart-header-button{
display: flex;
.cn-chart-header-button-all{
border: 1px solid #0091FF;
color: #0091FF;
background-color: #FFFFFF;
}
.cn-chart-header-button-critical{
border: 1px solid #0091FF;
color: #0091FF;
background-color: #FFFFFF;
}
.cn-chart-header-button-high{
border: 1px solid #0091FF;
background-color: #FFFFFF;
color: #0091FF;
}
.cn-chart-header-button-low{
border: 1px solid #0091FF;
background-color: #FFFFFF;
color: #0091FF;
}
.cn-chart-header-button-info{
border: 1px solid #0091FF;
background-color: #FFFFFF;
color: #0091FF;
}
.cn-chart-header-button-medium{
border: 1px solid #0091FF;
background-color: #FFFFFF;
color: #0091FF;
}
.el-button--default{
height: 24px;
border-radius: 2px 0 0 2px;
min-height:24px;
display: flex;
justify-content: center;
align-items: center;
}
}

38
src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
View File

@@ -1,10 +1,28 @@
.situation-statistics-main {
display: flex;
align-items: center;
margin-left: 50px;
margin-top: 20px;
.situation-statistics-main-right{
margin-left: 40px;
}
}
.chart-one-situation-statistics{
padding-top: 22px;
.situation-statistics-main {
display: flex;
align-items: center;
margin-left: 33px;
.situation-statistics-main-left{
display: block;
width: 76px;
height: 76px;
.el-progress__text span{
font-size: 16px;
}
}
.situation-statistics-main-right{
margin-left: 22px;
:first-child{
font-size: 18px;
color: #333;
}
:last-child{
margin-top: 5px;
font-size: 14px;
color: #666666;
}
}
}
}

29
src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
View File

@@ -1,19 +1,28 @@
.chart-two-situation-statistics{
padding-top: 22px;
.situation-statistics-top {
display: flex;
align-items: center;
.situation-statistics-main-right{
margin-left: 40px;
margin-left: 33px;
padding-top: 22px;
.situation-statistics-main-left{
display: block;
.el-progress__text span{
font-size: 16px;
}
}
}
.situation-statistics-bottom {
display: flex;
align-items: center;
.situation-statistics-main-right{
margin-left: 40px;
margin-left: 22px;
:first-child{
font-size: 18px;
color: #333;
}
:last-child{
margin-top: 5px;
font-size: 14px;
color: #666666;
}
}
}
}
}

98
src/assets/css/components/views/charts/chartAlarmInfo.scss Normal file
View File

@@ -0,0 +1,98 @@
.cn-chart-alarm-info {
width: 100%;
height: 100%;
margin-left: 30px;
position: relative;
.cn-chart-alarm-info-mainContent{
height: calc(100% - 40px) ;
width: 100%;
.cn-chart-alarm-content {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
height: calc(100% / 9);
border-bottom: 1px solid #E7EAED ;
.cn-alarm-info-main {
display: flex;
.cn-alarm-info-main-left{
position: relative;
display: flex;
justify-content: center;
align-items: center;
.cn-chart-alarm-info-icon {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.cn-icon-alert{
width: 12px;
position: absolute;
top: 13px;
left: 7px;
}
}
.cn-alarm-info-textContent{
margin-left: 17px;
.cn-alarm-info-main-title {
font-size: 19px;
line-height: 19px;
}
.cn-alarm-info-bottom {
display: flex;
font-size: 14px;
line-height: 14px;
text-align: center;
margin-top: 10px;
.cn-alarm-info-bottom-middle {
display: flex;
margin-left: 20px;
height: 14px;
.cn-alarm-info-bottom-time {
color: #999999;
line-height: 14px;
font-size: 12px;
}
}
.cn-alarm-info-bottom-right {
display: flex;
justify-content: center;
align-items: center;
margin-left: 17px;
.cn-alarm-info-bottom-time {
color: #999999;
}
}
.cn-alarm-info-bottom-type {
width: auto;
height: 16px;
font-size: 12px;
border: 1px solid;
font-weight: 400;
}
.cn-alarm-info-bottom-circle {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
}
}
}
}
}
}
.cn-chart-alarm-info-pagination{
height: 40px;
width: 100%;
}
}

1
src/assets/css/components/views/charts/panel.scss
View File

@@ -590,3 +590,4 @@
font-size: 12px;
}
}