CN-651 feat: Dashboard - npm - 近期事件图开发
This commit is contained in:
@changcode
@@ -55,4 +55,8 @@
|
||||
@import './views/charts2/npmAppCategoryScore';
|
||||
@import './views/charts2/npmTabs';
|
||||
@import './views/charts2/npmMap';
|
||||
@import './views/charts2/npmLine';
|
||||
@import './views/charts2/npmEventsHeader';
|
||||
@import './views/charts2/npmEventsByType';
|
||||
@import './views/charts2/npmRecentEvents';
|
||||
//@import '../chart';
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
height: 100%;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
.app-table {
|
||||
.app-table.el-table {
|
||||
.el-table__header-wrapper {
|
||||
tr th {
|
||||
padding: 5px 0;
|
||||
|
||||
74
src/assets/css/components/views/charts2/npmEventsByType.scss
Normal file
74
src/assets/css/components/views/charts2/npmEventsByType.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
.npm-event {
|
||||
height: calc(100% - 24px);
|
||||
width: 100%;
|
||||
.npm-event-title {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.npm-event-pie {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.npm-event-pie-legends {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
justify-content: space-around;
|
||||
.npm-event-pie-legend {
|
||||
.npm-event-pie-legend-title {
|
||||
font-size: 12px;
|
||||
color: #575757;
|
||||
line-height: 12px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.npm-event-pie-legend-type {
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
line-height: 12px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 11px;
|
||||
.npm-event-pie-legend-type-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.critical {
|
||||
background: rgb(226,97,84);
|
||||
}
|
||||
.high {
|
||||
background: rgb(228,142,77);
|
||||
}
|
||||
.info {
|
||||
background: rgb(136,175,101);
|
||||
}
|
||||
.medium {
|
||||
background: rgb(231,179,78);
|
||||
}
|
||||
.low {
|
||||
background: rgb(218,199,75);
|
||||
}
|
||||
}
|
||||
.npm-event-pie-legend-total {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
line-height: 12px;
|
||||
font-weight: 540;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-drawing {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
56
src/assets/css/components/views/charts2/npmEventsHeader.scss
Normal file
56
src/assets/css/components/views/charts2/npmEventsHeader.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
.npm-header {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.npm-header-body:nth-of-type(5) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.npm-header-body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: rgba(113,113,113,0.06);
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
padding: 0 14px 0 16px;
|
||||
margin-right: 12px;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
.npm-header-body-severity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.npm-header-body-severity-icon {
|
||||
border-radius: 6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.critical {
|
||||
background: rgb(226,97,84);
|
||||
}
|
||||
.high {
|
||||
background: rgb(228,142,77);
|
||||
}
|
||||
.info {
|
||||
background: rgb(136,175,101);
|
||||
}
|
||||
.medium {
|
||||
background: rgb(231,179,78);
|
||||
}
|
||||
.low {
|
||||
background: rgb(218,199,75);
|
||||
}
|
||||
.npm-header-body-severity-value {
|
||||
font-family: NotoSansHans-Black;
|
||||
font-size: 12px;
|
||||
color: #575757;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
.npm-header-body-total {
|
||||
font-family: Helvetica-Bold;
|
||||
font-size: 16px;
|
||||
color: #353636;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
59
src/assets/css/components/views/charts2/npmLine.scss
Normal file
59
src/assets/css/components/views/charts2/npmLine.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
.npm-line {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid #f0f0f0;
|
||||
position: relative;
|
||||
.npm-line-header {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 21px;
|
||||
right: 23px;
|
||||
z-index: 1;
|
||||
.npm-line-header-right {
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.npm-line-header-icon {
|
||||
border-radius: 3px;
|
||||
width: 16px;
|
||||
height: 6px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.npm-line-header-icon.icon0 {
|
||||
background: #749F4D;
|
||||
}
|
||||
.npm-line-header-icon.icon1 {
|
||||
background: #98709B;
|
||||
}
|
||||
.npm-line-header-icon.icon2 {
|
||||
background: #E5A219;
|
||||
}
|
||||
.npm-line-header-value {
|
||||
font-size: 12px;
|
||||
color: #717171;
|
||||
line-height: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.npm-line-header-value.active {
|
||||
color: #717171;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.chart-drawing {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.echarts-tooltip.echarts-tooltip-dark {
|
||||
.cn-chart-tooltip {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.cn-chart-tooltip-value.cn-chart-tooltip__color {
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
line-height: 21px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
79
src/assets/css/components/views/charts2/npmRecentEvents.scss
Normal file
79
src/assets/css/components/views/charts2/npmRecentEvents.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
.npm-recent {
|
||||
height: calc(100% - 24px);
|
||||
.npm-recent-title {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.npm-recent-table {
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
.el-table__header-wrapper {
|
||||
tr th {
|
||||
padding: 5px 0;
|
||||
.data-column__span {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper.is-scrolling-none {
|
||||
tr td {
|
||||
padding: 7px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-recent-table{
|
||||
display: flex !important;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
.data-recent-table-severity {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.critical {
|
||||
color: #E26154;
|
||||
background: rgba(226,97,84, .18);
|
||||
}
|
||||
.high {
|
||||
color: #E48E4D;
|
||||
background: rgba(228,142,77, .18);
|
||||
}
|
||||
.info {
|
||||
color: #88AF65;
|
||||
background: rgba(136,175,101, .18);
|
||||
}
|
||||
.medium {
|
||||
color: #E7B34E;
|
||||
background: rgba(231,179,78, .18);
|
||||
}
|
||||
.low {
|
||||
color: #DAC74B;
|
||||
background: rgba(218,199,75, .18);
|
||||
}
|
||||
.data-recent-table-entity {
|
||||
font-size: 12px;
|
||||
color: #046ECA;
|
||||
font-weight: 400
|
||||
}
|
||||
.data-recent-table-eventType {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #046ECA;
|
||||
font-weight: 500;
|
||||
background: #EBF1F4;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
.el-table--group::after,.el-table--border::after, .el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user