CN-1594 feat: 清理过时scss文件
This commit is contained in:
chenjinsong
@@ -1,6 +1,5 @@
|
||||
@import 'right-box-common';
|
||||
@import 'table-common';
|
||||
@import 'part-select';
|
||||
|
||||
/* 通用css */
|
||||
.panel-chart__no-data {
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
/* 部分 select 通用样式 */
|
||||
// small下拉框的输入框中字体大小
|
||||
/*.el-select--small .el-select__wrapper {
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-select-dropdown {
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view.el-select-dropdown__list {
|
||||
.el-select-dropdown__item {
|
||||
padding: 0 8px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
@@ -1,8 +0,0 @@
|
||||
.my-editor {
|
||||
margin-top: 4px;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
|
||||
.prism-editor__textarea {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@@ -1,233 +0,0 @@
|
||||
.proxy-debug__dialog {
|
||||
height: 90vh;
|
||||
overflow: hidden;
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
.el-dialog__body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.debug-wrapper{
|
||||
width: 100%;
|
||||
height:100%;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 25% auto;
|
||||
grid-template-rows: 60px auto;
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
padding:25px;
|
||||
|
||||
.item{
|
||||
border:1px solid #bbbbbb;
|
||||
color: #000C18;
|
||||
line-height: 60px;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.item-1 {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.item-2 {
|
||||
background-color: #ffffff;
|
||||
border: 0;
|
||||
.el-input__inner {
|
||||
border-radius: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0;
|
||||
border-top: 1px solid #bbbbbb;
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
color: #606266;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-grid-send{
|
||||
width: 100%;
|
||||
height:100%;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 100px auto 80px;
|
||||
grid-template-rows: 60px;
|
||||
grid-row-gap: 0px;
|
||||
grid-column-gap: 0px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item-3 {
|
||||
background-color: #ffffff;
|
||||
.el-input__inner{
|
||||
border: 0px;
|
||||
}
|
||||
.el-input__inner:hover {
|
||||
border: 0px;
|
||||
}
|
||||
.el-input__inner:focus {
|
||||
border: 1px solid #bbbbbb;
|
||||
}
|
||||
|
||||
.el-table__header, .el-table__body{
|
||||
witdh:100% !important;
|
||||
}
|
||||
|
||||
.el-table__header-wrapper{
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.el-table__empty-block{
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.el-table th.is-leaf, .el-table td {
|
||||
border-top: 1px solid #bbbbbb;
|
||||
border-left: 1px solid #bbbbbb;
|
||||
border-right: 0px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.el-table{
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
border-right: 0px solid #bbbbbb;
|
||||
border-left: 0px solid #bbbbbb;
|
||||
}
|
||||
|
||||
.el-table .cell {
|
||||
line-height: 23px;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-table__body tr:hover >td {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.el-table__body tr:focus >td {
|
||||
background-color: cadetblue;
|
||||
}
|
||||
.debug__params-delete:hover{
|
||||
color:#0091FF;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.item-4 {
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
background-color: #ffffff;
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 60px minmax(100px, 1fr) 60px minmax(100px, 2fr);
|
||||
grid-row-gap: 0px;
|
||||
grid-column-gap: 0px;
|
||||
|
||||
pre {outline: 0px; padding: 0px; margin: 0px;height:360px;line-height: 20px; font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;}
|
||||
.color-pre__style{
|
||||
height: 95%;
|
||||
width: 95%;
|
||||
}
|
||||
.request-header {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
border-bottom:1px solid #bbbbbb;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.request-header-content{
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
border-bottom:1px solid #bbbbbb;
|
||||
padding-left: 0px;
|
||||
overflow:scroll;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.response-header {
|
||||
border-right:1px solid #bbbbbb;
|
||||
border-bottom:1px solid #bbbbbb;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.response-header-content {
|
||||
border-right:1px solid #bbbbbb;
|
||||
padding-left: 0px;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
overflow:scroll;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.response-body {
|
||||
border-bottom:1px solid #bbbbbb;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.response-body-content {
|
||||
padding-left: 5px;
|
||||
height:100%;
|
||||
width:100%;
|
||||
overflow:scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-grid-params{
|
||||
width: 100%;
|
||||
height:100%;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 60px auto;
|
||||
grid-row-gap: 0px;
|
||||
grid-column-gap: 0px;
|
||||
padding: 0;
|
||||
justify-items: center;
|
||||
|
||||
}
|
||||
|
||||
.sub-grid-params-add{
|
||||
width: 96%;
|
||||
height:100%;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
display: grid;
|
||||
grid-template-columns: 70% 30%;
|
||||
grid-template-rows:100%;
|
||||
grid-row-gap: 0;
|
||||
grid-column-gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-select .el-input .el-input__inner{
|
||||
height: 60px;
|
||||
border-radius: 0;
|
||||
border:1px solid #bbbbbb;
|
||||
}
|
||||
.el-select .el-input .el-select__caret {
|
||||
line-height:60px;
|
||||
font-weight: bolder;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-color: #bbbbbb;
|
||||
}
|
||||
|
||||
.sub-grid-params-add .el-button {
|
||||
height: 38px;
|
||||
margin-top: 11px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
.galaxy-proxy-table {
|
||||
.js-code-highlight {
|
||||
height: 250px;
|
||||
|
||||
.highlight-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.highlight-box__copy-btn {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
pre code.hljs {
|
||||
overflow-x: visible;
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,9 @@
|
||||
@import './components/advancedSearch/advanced-search2';
|
||||
@import './components/advancedSearch/codemirror';
|
||||
// @import './components/charts/panel';
|
||||
@import './components/common/TimeRange/date-time-range';
|
||||
@import './components/common/TimeRange/time-refresh';
|
||||
@import './components/common/pagination';
|
||||
// @import './components/entities/entities';
|
||||
@import './components/layout/layout';
|
||||
@import 'components/rightBox/administration/chart-box';
|
||||
@import 'components/setting/galaxy-proxy-debug';
|
||||
@import 'components/table/administration/galaxy-proxy-table';
|
||||
@import './components/table/common';
|
||||
@import './views/charts/chart';
|
||||
@import 'views/entityExplorer/entity-explorer';
|
||||
@@ -25,24 +20,9 @@
|
||||
@import './views/detections/detection-list/detection-list';
|
||||
@import './views/detections/detection-list/row';
|
||||
@import './views/detections/detection-overview';
|
||||
@import './views/charts/chartSingleValue';
|
||||
@import './views/charts/panel';
|
||||
@import 'views/charts/chartIpOpenPortBar';
|
||||
@import './views/charts/chartTable';
|
||||
@import './views/charts/chartCryptocurrencyEventList';
|
||||
@import './views/charts/chartAppBasicInfo';
|
||||
@import './views/charts/chartDomainDnsRecord';
|
||||
@import './views/charts/chartDomainWhois';
|
||||
@import './views/charts/chartEchartWithTable';
|
||||
@import './views/charts/ipBasicInfo';
|
||||
@import './views/charts/chartEchartIpHostedDomain';
|
||||
@import './views/charts/chartEchartAppRelateDomain';
|
||||
@import './views/charts/ChartOneSituationStatistics';
|
||||
@import './views/charts/ChartTwoSituationStatistics';
|
||||
@import './views/charts/chartAlarmInfo';
|
||||
@import './views/chartHeader';
|
||||
@import './views/charts/chartMap';
|
||||
@import 'views/charts/chartRelationShipList';
|
||||
@import 'views/report/report';
|
||||
@import 'components/rightBox/report/reportBox';
|
||||
|
||||
@@ -69,11 +49,6 @@
|
||||
@import './views/charts2/domainNameResolution.scss';
|
||||
@import './views/charts2/informationAggregation.scss';
|
||||
@import 'views/charts2/linkTrafficLine';
|
||||
@import 'views/charts2/dnsTrafficLine';
|
||||
@import 'views/charts2/dnsRecentEvents';
|
||||
@import 'views/charts2/dnsActiveMaliciousDomain';
|
||||
@import 'views/charts2/dnsEventChart';
|
||||
@import './views/charts2/dnsEventChartByPie';
|
||||
//@import '../chart';
|
||||
@import './components/common/chart-error';
|
||||
@import './components/common/chart-tab';
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
.cn-chart__one-situation-statistics{
|
||||
height: 100%;
|
||||
.one-situation-statistics__box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 33px;
|
||||
height: 100%;
|
||||
.box__progress {
|
||||
display: block;
|
||||
.el-progress-circle {
|
||||
height: 80px !important;
|
||||
width: 80px !important;
|
||||
}
|
||||
.el-progress__text span{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.box__count{
|
||||
margin-left: 22px;
|
||||
:first-child{
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
:last-child{
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
|
||||
.cn-chart__two-situation-statistics{
|
||||
padding-top: 22px;
|
||||
.box__body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 33px;
|
||||
padding-top: 22px;
|
||||
.body__progress{
|
||||
display: block;
|
||||
.el-progress__text span{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.body__count{
|
||||
margin-left: 22px;
|
||||
:first-child{
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
:last-child{
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
.cn-chart__alarm-info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.alarm-info__box {
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.box__body {
|
||||
display: flex;
|
||||
margin-left: 30px;
|
||||
margin-right: 30px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
//height: calc(100% / 9);
|
||||
min-height: 78px;
|
||||
border-bottom: 1px solid #E7EAED;
|
||||
|
||||
.body__content {
|
||||
display: flex;
|
||||
|
||||
.content__icon-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon-box__icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cn-icon-alert {
|
||||
width: 12px;
|
||||
position: absolute;
|
||||
top: calc(50% - 8px);
|
||||
left: calc(50% - 8px);
|
||||
}
|
||||
}
|
||||
|
||||
.content__text-box {
|
||||
margin: 2px 0 2px 17px;
|
||||
|
||||
.text-box__title {
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
div {
|
||||
max-width: 300px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.text-box__text {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&>div {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text__time-box {
|
||||
display: flex;
|
||||
margin-right: 8px;
|
||||
|
||||
.cn-icon-time2 {
|
||||
color: #8FA1BE;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.time-box__start-time {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
line-height: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.text__duration-box {
|
||||
height: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.cn-icon-time2 {
|
||||
color: #8FA1BE;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.time-box__start-time {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.text__type {
|
||||
width: auto;
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
border: 1px solid;
|
||||
font-weight: 400;
|
||||
max-width: 150px;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
margin-right: 8px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.duration-box__circle {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
line-height: 17px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alarm-info__pagination {
|
||||
height: 40px !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
.cn-chart__app-basic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.cn-chart__body {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
.el-descriptions {
|
||||
padding-top: 30px;
|
||||
}
|
||||
&>.el-descriptions {
|
||||
flex: 0 0 350px;
|
||||
padding: 30px 36px;
|
||||
}
|
||||
.chart-location {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
.el-descriptions__content {
|
||||
color: #3976CB;
|
||||
}
|
||||
.cn-chart__body-single {
|
||||
display: flex;
|
||||
.cn-chart__body-single-table {
|
||||
display: flex;
|
||||
width: 250px;
|
||||
align-items: center;
|
||||
}
|
||||
.cn-chart__body-single-table:nth-of-type(3) {
|
||||
margin-right: 126px;
|
||||
}
|
||||
.single-value-icon__box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 40%;
|
||||
}
|
||||
.single-value__icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background-color: $--chart-single-value-icon-background-color;
|
||||
border-radius: 50%;
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
.single-value-color-g.single-value__icon {
|
||||
background-color: #E2FCEF;
|
||||
i {
|
||||
color: #41D389;
|
||||
}
|
||||
}
|
||||
.single-value-color-y.single-value__icon {
|
||||
background-color: #FFF0DA;
|
||||
i {
|
||||
color: #FA901C;
|
||||
}
|
||||
}
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 60%;
|
||||
padding-left: 10px;
|
||||
|
||||
div:nth-of-type(1) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content__data {
|
||||
padding-bottom: 7%;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content__title {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
&.single-value__content--with-chart {
|
||||
.content__title {
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
}
|
||||
}
|
||||
.single-value__unit {
|
||||
font-weight: normal;
|
||||
padding-left: 10px;
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
.cn-chart__table.eventList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.cn-chart__body {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.el-descriptions {
|
||||
padding-top: 30px;
|
||||
}
|
||||
&>.el-descriptions {
|
||||
flex: 0 0 350px;
|
||||
padding: 30px 36px;
|
||||
}
|
||||
.chart-location {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
.el-descriptions__content {
|
||||
color: #3976CB;
|
||||
}
|
||||
.crypto-eventList__record {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.record__table {
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.record__table-row {
|
||||
display: table-row;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.record__table-row.record__table-row--header {
|
||||
padding: 13px 30px 0;
|
||||
height: 40px;
|
||||
color: #6B717B;
|
||||
}
|
||||
.record__table-cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 15px 10px;
|
||||
.record_second{
|
||||
color:#7e8088;
|
||||
font-size:12px;
|
||||
}
|
||||
.circle-red {
|
||||
color: #EC7F66;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.record__table-cell:first-of-type {
|
||||
padding-left:30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
.cn-chart__dns-record {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.cn-chart__body {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.el-descriptions {
|
||||
padding-top: 30px;
|
||||
}
|
||||
&>.el-descriptions {
|
||||
flex: 0 0 350px;
|
||||
padding: 30px 36px;
|
||||
}
|
||||
.chart-location {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
.el-descriptions__content {
|
||||
color: #3976CB;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
.cn-chart__whois {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
.cn-panel2 {
|
||||
position: relative;
|
||||
.chart-list {
|
||||
.vue-grid-layout > .vue-grid-item {
|
||||
.cn-chart {
|
||||
.app-detail__related-domain {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.related-domain__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 25%;
|
||||
overflow: auto;
|
||||
padding-bottom: 20px;
|
||||
//border-bottom: 1px solid $--right-box-border-color;
|
||||
|
||||
.related-domain__list-title {
|
||||
padding: 13px 30px 0;
|
||||
height: 40px;
|
||||
color: #6B717B;
|
||||
}
|
||||
|
||||
.related-domain__list-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.related-domain__list-row {
|
||||
padding: 5px 30px;
|
||||
color: #3976CB;
|
||||
|
||||
i {
|
||||
color: #B8C1D1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.related-domain__chart {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
|
||||
& > div {
|
||||
flex: 0 0 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.related-domain__chart-title {
|
||||
padding-left: 20px;
|
||||
line-height: 50px;
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
.chart-drawing {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header,.cn-panel2 .chart-list > .dns-screen> .panel-chart .chart-header {
|
||||
border-bottom: 1px solid $--right-box-border-color;
|
||||
}
|
||||
.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header.is-group-collapse {
|
||||
border-bottom: none;
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
.cn-panel2 {
|
||||
position: relative;
|
||||
.chart-list {
|
||||
.vue-grid-layout > .vue-grid-item {
|
||||
.cn-chart {
|
||||
.ip-detail__hosted-domain {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.hosted-domain__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 25%;
|
||||
overflow: auto;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid $--right-box-border-color;
|
||||
|
||||
.hosted-domain__list-title {
|
||||
padding: 13px 30px 0;
|
||||
height: 40px;
|
||||
color: #6B717B;
|
||||
}
|
||||
|
||||
.hosted-domain__list-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.hosted-domain__list-row {
|
||||
padding: 5px 30px;
|
||||
color: #3976CB;
|
||||
|
||||
i {
|
||||
color: #B8C1D1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hosted-domain__chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
& > div {
|
||||
flex: 0 0 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.hosted-domain__chart-title {
|
||||
padding-left: 20px;
|
||||
line-height: 50px;
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
.chart-drawing {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
.cn-panel2 {
|
||||
position: relative;
|
||||
.chart-list {
|
||||
.vue-grid-layout>.vue-grid-item {
|
||||
.cn-chart {
|
||||
.cn-chart__echarts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height:100%;
|
||||
.cn-chart__body {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
|
||||
.el-table {
|
||||
padding: 0 10px;
|
||||
|
||||
&:before {
|
||||
height: 0;
|
||||
}
|
||||
thead {
|
||||
color: #333;
|
||||
}
|
||||
th.is-leaf, td {
|
||||
border-bottom: none;
|
||||
}
|
||||
th {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
td {
|
||||
padding: 4px 0;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
/*.chart-drawing{
|
||||
height: calc(100% - 36px) !important;
|
||||
}*/
|
||||
}
|
||||
//.cn-chart__body.pie-with-table {
|
||||
// flex-basis: 60%;
|
||||
//}
|
||||
.cn-chart__footer.pie-with-table {
|
||||
padding: 10px 30px 30px;
|
||||
overflow: auto;
|
||||
.pie-table .el-table__body-wrapper {
|
||||
height: calc(100% - 40px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pie-table {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
border-bottom: none !important;
|
||||
|
||||
.el-table__header-wrapper {
|
||||
.cell {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.el-table__expanded-cell[class*=cell] {
|
||||
padding: 0;
|
||||
}
|
||||
.el-table__expanded-cell[class*=cell]:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.expand-table .el-table__body .el-table__row:last-of-type td {
|
||||
border: none;
|
||||
}
|
||||
.expand-table {
|
||||
font-weight: 400;
|
||||
color: #606266;
|
||||
|
||||
.el-table__body-wrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
.chart-ip-open-port-bar {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.el-table--border {
|
||||
border: none;
|
||||
.el-table__body-wrapper {
|
||||
overflow-y: auto;
|
||||
height: 261px !important;
|
||||
.el-table__body {
|
||||
tr td:nth-of-type(1) {
|
||||
padding-left: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table__header-wrapper {
|
||||
.has-gutter {
|
||||
tr th:nth-of-type(1) {
|
||||
padding-left: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table--border td{
|
||||
border: none !important;
|
||||
}
|
||||
.el-table--border th{
|
||||
border-right: none !important;
|
||||
}
|
||||
.chart-box{
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
>.title{
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.chart-drawing{
|
||||
height: calc(100% - 36px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,187 +0,0 @@
|
||||
$text-color-primary: var(--el-text-color-primary);
|
||||
.ship--show.ship {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.chart-drawing-ship__width {
|
||||
width: 1542px !important;
|
||||
}
|
||||
|
||||
.ship {
|
||||
width: 320px;
|
||||
background: var(--el-fill-color-blank);
|
||||
border: 1px solid rgba(119, 131, 145, 0.60);
|
||||
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08);
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
flex-direction: column;
|
||||
|
||||
.ship-title {
|
||||
display: flex;
|
||||
height: 49px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
padding-left: 10px;
|
||||
|
||||
.ship-title-name {
|
||||
line-height: 49px;
|
||||
font-size: 16px;
|
||||
color: $text-color-primary;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ship-title-symbol {
|
||||
padding-right: 5px;
|
||||
line-height: 65px;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ship-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 7px;
|
||||
|
||||
.ship-body-basicInfo {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ship-body-list.ship-body-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.ship-body-list-child {
|
||||
position: relative;
|
||||
|
||||
.ship-body-list-child-left {
|
||||
margin: 3px 0 3px 10px;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-info);
|
||||
font-weight: 400;
|
||||
|
||||
.ship-body-list-child-title {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.ship-body-list-child-trip {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.ship-body-list-child-value {
|
||||
display: flex;
|
||||
|
||||
.ship-body-list-child-msg {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.ship-body-list-child-loading {
|
||||
.ship-body-list-child-charts {
|
||||
width: 38px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ship-body-list {
|
||||
margin: 0 0 5px 20px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: calc(100% - 20px);
|
||||
position: relative;
|
||||
|
||||
.ship-body-list-title {
|
||||
width: 130px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.security.ship-body-list-security-length {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.ship-body-list-value {
|
||||
font-size: 14px;
|
||||
color: $text-color-primary;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ship-body-list-value.security {
|
||||
font-size: 12px;
|
||||
color: var(--el-fill-color-blank);
|
||||
font-weight: 400;
|
||||
border-radius: 2px;
|
||||
margin: 0 3px;
|
||||
width: 200px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.ship-severity {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.ship-body-list-security-alert {
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ship-body-list-security-length {
|
||||
margin: 0 10px 0 3px;
|
||||
font-size: 14px;
|
||||
color: $text-color-primary;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.no-recent-alerts {
|
||||
font-size: 12px;
|
||||
color: $text-color-primary;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
|
||||
i {
|
||||
color: var(--el-color-success);
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.ship-body-list-security-alert.critical {
|
||||
background-color: var(--cn-color-critical);
|
||||
}
|
||||
|
||||
.ship-body-list-security-alert.high {
|
||||
background-color: var(--cn-color-high);
|
||||
}
|
||||
|
||||
.ship-body-list-security-alert.info {
|
||||
background-color: var(--cn-color-info);
|
||||
}
|
||||
|
||||
.ship-body-list-security-alert.medium {
|
||||
background-color: var(--cn-color-medium);
|
||||
}
|
||||
|
||||
.ship-body-list-security-alert.low {
|
||||
background-color: var(--cn-color-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,670 +0,0 @@
|
||||
.cn-chart__single-value {
|
||||
.single-value__unit {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
&.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
|
||||
width: unset;
|
||||
flex: 0 0 240px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.single-value__icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
|
||||
i {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__content {
|
||||
.content__data {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
|
||||
.single-value__unit {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.content__title {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cn-chart__single-value--icon-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.single-value-icon__box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 100px;
|
||||
}
|
||||
|
||||
.single-value__icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background-color: $--chart-single-value-icon-background-color;
|
||||
border-radius: 50%;
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 10px;
|
||||
|
||||
.content__data {
|
||||
padding-bottom: 10px;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content__title {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
&.single-value__content--with-chart {
|
||||
.content__title {
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__unit {
|
||||
font-weight: normal;
|
||||
padding-left: 10px;
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cn-chart__single-value--icon-right {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
|
||||
.single-value-icon__box {
|
||||
flex: 0 0 74px;
|
||||
}
|
||||
|
||||
.single-value__icon {
|
||||
background-color: $--chart-single-value-icon-background-color;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 24px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
padding: 0 10px;
|
||||
|
||||
.content__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50%;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.content__data {
|
||||
display: flex;
|
||||
padding-top: 5%;
|
||||
height: 50%;
|
||||
flex: auto;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cn-chart__single-value--icon-right--color {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.single-value-icon__box {
|
||||
padding-right: 30px;
|
||||
|
||||
.single-value__icon {
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 7.5%;
|
||||
margin-top: 30%;
|
||||
|
||||
.cn-icon-svg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__data {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
padding-left: 20px;
|
||||
|
||||
.content__title {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 50%;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.content__data {
|
||||
display: flex;
|
||||
padding-top: 5%;
|
||||
height: 50%;
|
||||
flex: auto;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cn-chart__single-value--chart {
|
||||
display: flex;
|
||||
padding: 13px 20px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.content__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30%;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.content__data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 25%;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content__chart {
|
||||
flex: auto
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cn-chart__single-value--icon-doh {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
|
||||
border-radius: 2px;
|
||||
|
||||
.single-value-icon__box {
|
||||
flex: 0 0 80px;
|
||||
}
|
||||
|
||||
.single-value__icon {
|
||||
background-color: $--chart-single-value-icon-background-color;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 24px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
margin-left: 20px;
|
||||
|
||||
.content__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 16px 0 27px 0;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.content__data {
|
||||
display: flex;
|
||||
padding-top: 5%;
|
||||
height: 50%;
|
||||
flex: auto;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
|
||||
.content__data__doh {
|
||||
.content__data__doh__count {
|
||||
font-size: 30px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.content__data__doh__percent {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #FC8157;
|
||||
font-weight: 500;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cn-chart__single-value--protocol {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
.single-value__data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 20px 10px 18px;
|
||||
.content__title {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.content__data {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.content__data-protocol:nth-of-type(1) {
|
||||
margin-bottom: 50px;
|
||||
span:nth-of-type(2) {
|
||||
font-size: 12px;
|
||||
color: #FC8157;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.content__data-protocol:nth-of-type(2) {
|
||||
span:nth-of-type(2) {
|
||||
font-size: 12px;
|
||||
color: #FBA342;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.content__data-protocol {
|
||||
display: flex;
|
||||
height: 68px;
|
||||
text-align: left;
|
||||
.content__data-protocol-all {
|
||||
flex: 1.5;
|
||||
}
|
||||
.content__data-protocol-icon {
|
||||
display: flex;
|
||||
width: 68px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
line-height: 68px;
|
||||
border-radius: 100%;
|
||||
justify-content: center;
|
||||
i {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
.content__data-protocol-value {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
.content__data-protocol-value-title {
|
||||
margin-bottom: 7px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
}
|
||||
.content__data-protocol-value-num {
|
||||
font-size: 26px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.content__data-protocol-percent {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 68px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
line-height: 95px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cn-chart__single-value--percentile-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.single-value-icon__box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
margin-right: 5px;
|
||||
flex: 0 0 80;
|
||||
}
|
||||
|
||||
.single-value__icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: $--chart-single-value-icon-background-color;
|
||||
border-radius: 50%;
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 60%;
|
||||
padding-right: 10px;
|
||||
|
||||
.data__title-in-one {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content__data {
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content__title {
|
||||
white-space: nowrap;
|
||||
font-size: 12px !important;
|
||||
color: #7e8081;
|
||||
margin-bottom: 5px;
|
||||
padding: 3px 4px 3px 3px;
|
||||
}
|
||||
|
||||
.title-background-color {
|
||||
background-color: #EFF6FE;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.content__percentile {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
|
||||
.circle__content {
|
||||
display:flex;
|
||||
flex-display:row;
|
||||
margin-right:4px;
|
||||
|
||||
.percentile__title-color {
|
||||
color:#9b9b9b
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: relative;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
line-height: 6px;
|
||||
border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
margin: auto;
|
||||
margin-right: 4px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.circle.circle-p50 {
|
||||
background: #ffa200;
|
||||
|
||||
}
|
||||
.circle.circle-p90 {
|
||||
background: #23bf9a;
|
||||
}
|
||||
|
||||
&.single-value__content--with-chart {
|
||||
.content__title {
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__unit {
|
||||
padding-left:0px;
|
||||
padding-right: 5px;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cn-chart__single-value--percentile-left {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: unset;
|
||||
|
||||
.single-value-icon__box {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: right;
|
||||
margin: 0 22px 22px 0;
|
||||
flex: 0 0 80;
|
||||
}
|
||||
|
||||
.single-value__icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: $--chart-single-value-icon-background-color;
|
||||
border-radius: 50%;
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 60%;
|
||||
padding-right: 10px;
|
||||
margin-left:25px;
|
||||
|
||||
.content__data {
|
||||
margin-bottom: 5%;
|
||||
font-size: 22px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content__title {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px !important;
|
||||
color: #7e8081;
|
||||
margin-bottom: 7%;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
.content__percentile {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
font-weight: bold;
|
||||
|
||||
.circle__content {
|
||||
display:flex;
|
||||
flex-display:row;
|
||||
margin-right:15px;
|
||||
|
||||
.percentile__title-color {
|
||||
color:#9b9b9b;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: relative;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
line-height: 7px;
|
||||
border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
margin: auto;
|
||||
margin-right: 4px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.circle.circle-p50 {
|
||||
background: #ffa200;
|
||||
|
||||
}
|
||||
.circle.circle-p90 {
|
||||
background: #23bf9a;
|
||||
}
|
||||
|
||||
&.single-value__content--with-chart {
|
||||
.content__title {
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__unit {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
.active-ip.cn-chart__table {
|
||||
height: calc(100% - 47px) !important;
|
||||
}
|
||||
.cn-chart__table{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.cn-chart__body {
|
||||
flex: auto;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.el-table {
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
.el-table__body-wrapper.is-scrolling-none {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&:before {
|
||||
height: 0;
|
||||
}
|
||||
thead {
|
||||
color: #333;
|
||||
}
|
||||
th.is-leaf, td {
|
||||
border-bottom: none;
|
||||
}
|
||||
th {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
td {
|
||||
padding: 4px 0;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.active-ip__icon {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
border-radius: 50%;
|
||||
background: #e8fbf9;
|
||||
border: 2px solid #e8fbf9;
|
||||
}
|
||||
.ip-green {
|
||||
color: #23BF9A;
|
||||
}
|
||||
.active-ip__content {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 35px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.chart-table-pagination.el-pagination {
|
||||
padding: 12px 0 9px 0;
|
||||
text-align: center;
|
||||
|
||||
.el-pagination__jump {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
.cn-chart__ip-basic {
|
||||
display: flex;
|
||||
padding: 30px 60px 0 30px;
|
||||
.cn-chart__ip-basic-info {
|
||||
padding-right: 80px;
|
||||
}
|
||||
&>.el-descriptions {
|
||||
flex: 0 0 350px;
|
||||
}
|
||||
.chart-location {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
.el-descriptions :not(.is-bordered) td {
|
||||
padding-bottom: 5px !important;
|
||||
}
|
||||
.el-descriptions__content {
|
||||
color: #3976CB;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
.dns-mailcious-domain {
|
||||
$blue: #046ECA;
|
||||
$fontFamily: NotoSansHans-Medium;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.dns-mailcious-domain-title {
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dns-mailcious-domain-table {
|
||||
height: calc(100% - 30px) !important;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
padding: 1px;
|
||||
|
||||
.el-table__header-wrapper {
|
||||
tr th {
|
||||
padding: 4px 0;
|
||||
|
||||
.dns-column__span {
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper.is-scrolling-none {
|
||||
tr td {
|
||||
padding: 6.49px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-mailcious-domain-table {
|
||||
display: flex !important;
|
||||
height: auto;
|
||||
line-height: 20.4px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.data-column-domain, .data-column-ips {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
width: 210px;
|
||||
font-size: 12px;
|
||||
color: $blue;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.data-column-ips-hover-block {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
color: #046ECA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-table--group::after, .el-table--border::after, .el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
.dns-event-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid $--border-color;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.dns-event-chart-pie {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dns-event-chart-bar {
|
||||
width: 67%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
.dns-event {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
|
||||
.dns-event-pie {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
border: none;
|
||||
|
||||
.dns-event-pies {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.chart-drawing {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.color-block {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
.dns-recent-event.npm-app-event {
|
||||
.npm-app-event-table.dns-recent-event-table {
|
||||
.el-table__body-wrapper.is-scrolling-none {
|
||||
tr td {
|
||||
padding: 6.49px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-applications {
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
.cn-icon-events-type {
|
||||
font-size: 12px;
|
||||
}
|
||||
.cn-icon-events-type.performance {
|
||||
color: #D9C74B;
|
||||
}
|
||||
.cn-icon-events-type.security {
|
||||
color: #E99F67;
|
||||
}
|
||||
}
|
||||
.dns-recent-event-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.dns-recent-event-title {
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.dns-recent-event-select {
|
||||
display: flex;
|
||||
.metric-select:nth-of-type(2) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.metric-select:nth-of-type(1) {
|
||||
.option__select.select-column {
|
||||
.el-input__inner {
|
||||
width: 155px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-eventType {
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.line.network.dns-traffic-line {
|
||||
|
||||
}
|
||||
@@ -11,6 +11,7 @@
|
||||
}
|
||||
.panel-box2 {
|
||||
height: calc(100% - 20px);
|
||||
|
||||
.panel__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -20,10 +21,10 @@
|
||||
.panel__title {
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
font-weight: 900;
|
||||
//color: #353636;
|
||||
color: $--text-color-1;
|
||||
display:flex;
|
||||
font-weight: bold;
|
||||
color: var(--el-text-color-primary);
|
||||
display: flex;
|
||||
|
||||
.score {
|
||||
.circle-icon {
|
||||
border-radius: 3px;
|
||||
@@ -33,25 +34,23 @@
|
||||
margin-right: 4px;
|
||||
}
|
||||
.data-score-red {
|
||||
background: #E26154;
|
||||
background: var(--el-color-error);
|
||||
}
|
||||
.data-score-yellow {
|
||||
background: #E5A219;
|
||||
background: var(--el-color-warning);
|
||||
}
|
||||
.data-score-green {
|
||||
background: #749F4D;
|
||||
background: var(--el-color-success);
|
||||
}
|
||||
height:24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
margin-left:8px;
|
||||
padding-right:13px;
|
||||
background: #F7F7F7;
|
||||
border: 1px solid #E2E5EC;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
color: var(--el-text-color-primary);
|
||||
margin-left: 8px;
|
||||
padding-right: 13px;
|
||||
background: var(--el-fill-color-light);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 4px;
|
||||
display:flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -68,8 +67,7 @@
|
||||
i {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
color: #626262;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -82,13 +80,13 @@
|
||||
|
||||
.select-prefix {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 0 6px 0 3px;
|
||||
}
|
||||
.el-input__inner {
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
background-color: #FFFFFF;
|
||||
color: var(--el-text-color-primary);
|
||||
background-color: var(--el-fill-color-blank);
|
||||
}
|
||||
}
|
||||
.panel__time {
|
||||
@@ -102,21 +100,22 @@
|
||||
.chart-list {
|
||||
height: calc(100% - 68px);
|
||||
overflow: auto;
|
||||
|
||||
&>.vue-grid-layout {
|
||||
margin-top: -20px;
|
||||
.header__operation--cancel:hover,.el-button:hover,.app-card-title-more-delete:hover {
|
||||
background: #EBF1F4;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
background: var(--cn-bg-color-light);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
.header__operation--cancel:active,.el-button:active,.app-card-title-more-delete:active {
|
||||
background: #E0E7EA;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
background: var(--el-fill-color-darker);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
.header__operation--save:hover {
|
||||
background: #57B8D9;
|
||||
background: var(--el-color-business-light-1);
|
||||
}
|
||||
.header__operation--save:active {
|
||||
background: #31A5CD;
|
||||
background: var(--el-color-business);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -136,24 +136,6 @@
|
||||
:chart="chart"
|
||||
@toggleLoading="toggleLoading"
|
||||
></link-direction-grid>
|
||||
<dns-active-malicious-domain
|
||||
v-else-if="chart.type === typeMapping.dnsInsight.dnsActiveMaliciousDomain"
|
||||
:time-filter="timeFilter"
|
||||
:chart="chart"
|
||||
@toggleLoading="toggleLoading"
|
||||
></dns-active-malicious-domain>
|
||||
<dns-event-chart
|
||||
v-else-if="chart.type === typeMapping.dnsInsight.dnsEventChart"
|
||||
:time-filter="timeFilter"
|
||||
:chart="chart"
|
||||
@toggleLoading="toggleLoading"
|
||||
></dns-event-chart>
|
||||
<dns-recent-events
|
||||
v-else-if="chart.type === typeMapping.dnsInsight.dnsRecentEvents"
|
||||
:time-filter="timeFilter"
|
||||
:chart="chart"
|
||||
@toggleLoading="toggleLoading"
|
||||
></dns-recent-events>
|
||||
<dns-traffic-line
|
||||
v-else-if="chart.type === typeMapping.dnsInsight.dnsTrafficLine"
|
||||
:time-filter="timeFilter"
|
||||
@@ -228,9 +210,6 @@ import NpmTrafficLine from '@/views/charts2/charts/npm/NpmTrafficLine'
|
||||
import LinkBlock from '@/views/charts2/charts/linkMonitor/LinkBlock'
|
||||
import LinkTrafficSankey from '@/views/charts2/charts/linkMonitor/LinkTrafficSankey'
|
||||
import LinkTrafficLine from '@/views/charts2/charts/linkMonitor/LinkTrafficLine'
|
||||
import DnsActiveMaliciousDomain from '@/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain'
|
||||
import DnsEventChart from '@/views/charts2/charts/dnsInsight/DnsEventChart'
|
||||
import DnsRecentEvents from '@/views/charts2/charts/dnsInsight/DnsRecentEvents'
|
||||
import DnsTrafficLine from '@/views/charts2/charts/dnsInsight/DnsTrafficLine'
|
||||
import EntityDetailBasicInfo from '@/views/charts2/charts/entityDetail/EntityDetailBasicInfo'
|
||||
import EntityDetailLine from '@/views/charts2/charts/entityDetail/EntityDetailLine'
|
||||
@@ -268,9 +247,6 @@ export default {
|
||||
LinkBlock,
|
||||
LinkTrafficSankey,
|
||||
LinkTrafficLine,
|
||||
DnsActiveMaliciousDomain,
|
||||
DnsEventChart,
|
||||
DnsRecentEvents,
|
||||
DnsTrafficLine,
|
||||
EntityDetailBasicInfo,
|
||||
EntityDetailSubscriberKpi,
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<div class="dns-mailcious-domain">
|
||||
<div class="dns-mailcious-domain-title">
|
||||
{{ $t('dns.activeMaliciousDomains') }}
|
||||
</div>
|
||||
<el-table :data="tableData" class="dns-mailcious-domain-table" height="100%">
|
||||
<template v-for="(item, index) in customTableTitles" :key="index">
|
||||
<el-table-column class="data-column">
|
||||
<!--表头-->
|
||||
<template #header>
|
||||
<span class="dns-column__span">{{ $t(item.label) }}</span>
|
||||
</template>
|
||||
<!--表格内容-->
|
||||
<template #default="scope" :column="item">
|
||||
<div class="data-mailcious-domain-table">
|
||||
<template v-if="item.prop === 'domain'">
|
||||
<span class="data-column-domain">{{ $t(scope.row[item.prop]) }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.prop === 'ips'">
|
||||
<el-popover placement="right" :width="126" trigger="hover" v-if="scope.row['ips'].split(',').length >=3">
|
||||
<template #reference>
|
||||
<span class="data-column-ips">{{ $t(scope.row[item.prop]) }}</span>
|
||||
</template>
|
||||
<!--超过3个ip就省略号显示，移动鼠标block块展示，并换行-->
|
||||
<pre style="max-height: 152px;margin: 0 -10px -15px 0;overflow: scroll;"><span style="height: 24px;line-height: 24px;color: #046ECA;">{{scope.row[item.prop].replace(/,/g, '\n')}}</span></pre>
|
||||
</el-popover>
|
||||
<span v-else class="data-column-ips">{{ $t(scope.row[item.prop]) }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.prop === 'numberOfIPs'">
|
||||
<span>{{ scope.row['ips'].split(',').length }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.prop === 'queries'">
|
||||
<span>{{ scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.prop === 'firstSeenTime'">
|
||||
<span>{{ dateFormatByAppearance(scope.row[item.prop]) }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.prop === 'lastSeenTime'">
|
||||
<span>{{ dateFormatByAppearance(scope.row[item.prop]) }}</span>
|
||||
</template>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
|
||||
<template v-slot:empty>
|
||||
<div class="table-no-data" v-show="isNoData">
|
||||
<div class="table-no-data__title">{{ $t('npm.noData') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/utils/api'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import axios from 'axios'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
|
||||
export default {
|
||||
name: 'DnsActiveMaliciousDomain',
|
||||
data () {
|
||||
return {
|
||||
tableData: [], // 表格数据
|
||||
// 表头数据
|
||||
customTableTitles: [
|
||||
{
|
||||
label: 'dns.domain',
|
||||
prop: 'domain'
|
||||
},
|
||||
{
|
||||
label: 'dns.IPs',
|
||||
prop: 'ips'
|
||||
},
|
||||
{
|
||||
label: 'dns.numberOfIPs',
|
||||
prop: 'numberOfIPs'
|
||||
},
|
||||
{
|
||||
label: 'dns.queries',
|
||||
prop: 'queries'
|
||||
},
|
||||
{
|
||||
label: 'dns.firstSeenTime',
|
||||
prop: 'firstSeenTime'
|
||||
},
|
||||
{
|
||||
label: 'dns.lastSeenTime',
|
||||
prop: 'lastSeenTime'
|
||||
}
|
||||
],
|
||||
isNoData: false // 无数据标识，true为无数据，false有数据
|
||||
}
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
watch: {
|
||||
timeFilter: {
|
||||
handler (n) {
|
||||
if (n) {
|
||||
this.initData()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
initData () {
|
||||
this.toggleLoading(true)
|
||||
|
||||
this.tableData = []
|
||||
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime)
|
||||
}
|
||||
this.toggleLoading(true)
|
||||
axios.get(api.dnsInsight.activeMaliciousDomain, { params: params }).then(response => {
|
||||
const res = response.data
|
||||
if (response.status === 200) {
|
||||
this.isNoData = res.data.result.length === 0
|
||||
this.tableData = res.data.result
|
||||
} else {
|
||||
this.isNoData = true
|
||||
this.tableData = []
|
||||
}
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<div class="dns-event-chart">
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
<template v-else>
|
||||
<div class="dns-event-chart-pie">
|
||||
<dns-event-chart-by-pie :timeFilter="timeFilter" :pieData="pieData"/>
|
||||
</div>
|
||||
<div class="dns-event-chart-bar">
|
||||
<dns-event-chart-by-bar :timeFilter="timeFilter" :series="series"/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shallowRef } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { api } from '@/utils/api'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
import dnsEventChartByPie from './DnsEventChartByPie'
|
||||
import dnsEventChartByBar from './DnsEventChartByBar'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
|
||||
export default {
|
||||
name: 'DnsEventChart',
|
||||
props: {
|
||||
type: String
|
||||
},
|
||||
components: {
|
||||
ChartNoData,
|
||||
dnsEventChartByPie,
|
||||
dnsEventChartByBar
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef(null)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
pieData: [], // 饼状图数据
|
||||
series: [], // 柱状图的series数据
|
||||
isNoData: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timeFilter: {
|
||||
handler (n) {
|
||||
this.initData()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
initData () {
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime)
|
||||
}
|
||||
this.toggleLoading(true)
|
||||
axios.get(api.dnsInsight.eventChart, { params }).then(res => {
|
||||
const data = res.data.data.result
|
||||
this.pieData = []
|
||||
|
||||
if (data !== undefined && data.length > 0) {
|
||||
this.isNoData = false
|
||||
const series = []
|
||||
data.forEach((item, index) => {
|
||||
this.pieData.push({
|
||||
name: item.type,
|
||||
value: item.analysis.sum
|
||||
})
|
||||
|
||||
const tempArr = []
|
||||
tempArr.push(item.values)
|
||||
series.push({
|
||||
data: item.values,
|
||||
stack: 'total',
|
||||
name: item.type,
|
||||
barWidth: 26,
|
||||
type: 'bar',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
}
|
||||
})
|
||||
})
|
||||
this.series = series
|
||||
} else {
|
||||
this.isNoData = true
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
this.isNoData = true
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
},
|
||||
resize () {
|
||||
this.myChart.resize()
|
||||
}
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('resize', this.resize)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<div class="npm-event dns-event">
|
||||
<div class="npm-event-pie dns-event-pie">
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
|
||||
<div class="npm-event-pies dns-event-pies" v-else>
|
||||
<!--堆叠柱状图-->
|
||||
<div style="width: 100%;height: 100%" id="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shallowRef } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { stackedBarChartOption } from '@/views/charts2/charts/options/echartOption'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
|
||||
export default {
|
||||
name: 'DnsEventChartByPie',
|
||||
props: {
|
||||
type: String,
|
||||
timeFilter: Object,
|
||||
series: Array
|
||||
},
|
||||
components: {
|
||||
ChartNoData
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef(null)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartData: [],
|
||||
timer: null,
|
||||
isNoData: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timeFilter: {
|
||||
handler (n) {
|
||||
this.eventsByTypeData()
|
||||
}
|
||||
},
|
||||
series: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.eventsByTypeData()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.eventsByTypeData()
|
||||
})
|
||||
window.addEventListener('resize', this.resize)
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const _this = this
|
||||
const dom = document.getElementById('chart')
|
||||
if (!this.myChart) {
|
||||
this.myChart = echarts.init(dom)
|
||||
this.chartOption = stackedBarChartOption
|
||||
this.chartOption.series = this.series
|
||||
|
||||
this.myChart.on('mouseover', function (params) {
|
||||
_this.myChart.setOption(_this.chartOption)
|
||||
})
|
||||
this.myChart.on('mouseout', function (params) {
|
||||
_this.myChart.setOption(_this.chartOption)
|
||||
})
|
||||
|
||||
this.myChart.setOption(this.chartOption)
|
||||
} else {
|
||||
this.chartOption.series = this.series
|
||||
this.myChart.setOption(this.chartOption)
|
||||
}
|
||||
},
|
||||
eventsByTypeData () {
|
||||
this.toggleLoading(false)
|
||||
if (this.series.length > 0) {
|
||||
this.init()
|
||||
this.toggleLoading(true)
|
||||
}
|
||||
},
|
||||
resize () {
|
||||
this.myChart.resize()
|
||||
}
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('resize', this.resize)
|
||||
if (this.myChart) {
|
||||
echarts.dispose(this.myChart)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<div class="npm-event dns-event">
|
||||
<div class="npm-event-pie dns-event-pie">
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
|
||||
<div class="npm-event-pies dns-event-pies" v-else>
|
||||
<!--pie图-->
|
||||
<div class="chart-drawing" id="chart1"></div>
|
||||
|
||||
<div class="npm-event-pie-legends">
|
||||
<div class="npm-event-pie-legend">
|
||||
<div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
|
||||
<template v-for="(legend, index) in chartData" :key="index">
|
||||
<div class="npm-event-pie-legend-type">
|
||||
<span class="color-block" :style="{background: chartColor6[index]}"></span>
|
||||
<div class="npm-event-pie-legend-type-severity">{{ legend.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="npm-event-pie-legend">
|
||||
<div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
|
||||
<template v-for="(legend, index) in chartData" :key="index">
|
||||
<div class="npm-event-pie-legend-total">{{ legend.value }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shallowRef } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
import { chartColor6 } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: 'DnsEventChartByPie',
|
||||
props: {
|
||||
type: String,
|
||||
timeFilter: Object,
|
||||
pieData: Array
|
||||
},
|
||||
components: {
|
||||
ChartNoData
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef(null)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartData: [],
|
||||
timer: null,
|
||||
isNoData: false,
|
||||
chartColor6: chartColor6
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timeFilter: {
|
||||
handler (n) {
|
||||
this.eventsByTypeData()
|
||||
}
|
||||
},
|
||||
pieData: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.eventsByTypeData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const _this = this
|
||||
const dom = document.getElementById('chart1')
|
||||
if (!this.myChart) {
|
||||
this.myChart = echarts.init(dom)
|
||||
this.chartOption = pieChartOption3
|
||||
this.chartOption.color = chartColor6
|
||||
this.chartOption.series[0].data = this.chartData
|
||||
this.chartOption.series[0].label = {
|
||||
show: true,
|
||||
position: 'center',
|
||||
fontFamily: 'NotoSansHans-Medium',
|
||||
fontSize: 20,
|
||||
fontWeight: 500,
|
||||
formatter: function () {
|
||||
let num = 0
|
||||
_this.chartData.forEach(t => {
|
||||
num += t.value
|
||||
})
|
||||
return num
|
||||
}
|
||||
}
|
||||
this.myChart.on('mouseover', function (params) {
|
||||
_this.chartOption.series[0].label.show = false
|
||||
_this.myChart.setOption(_this.chartOption)
|
||||
})
|
||||
this.myChart.on('mouseout', function (params) {
|
||||
_this.chartOption.series[0].label.show = true
|
||||
_this.myChart.setOption(_this.chartOption)
|
||||
})
|
||||
this.myChart.setOption(this.chartOption)
|
||||
} else {
|
||||
this.chartOption.color = chartColor6
|
||||
this.chartOption.series[0].data = this.chartData
|
||||
this.chartOption.series[0].label = {
|
||||
show: true,
|
||||
position: 'center',
|
||||
fontFamily: 'NotoSansHans-Medium',
|
||||
fontSize: 20,
|
||||
fontWeight: 500,
|
||||
formatter: function () {
|
||||
let num = 0
|
||||
_this.chartData.forEach(t => {
|
||||
num += t.value
|
||||
})
|
||||
return num
|
||||
}
|
||||
}
|
||||
this.myChart.setOption(this.chartOption)
|
||||
}
|
||||
},
|
||||
eventsByTypeData () {
|
||||
this.toggleLoading(false)
|
||||
if (this.pieData.length > 0) {
|
||||
this.chartData = this.pieData
|
||||
this.init()
|
||||
this.toggleLoading(true)
|
||||
}
|
||||
},
|
||||
resize () {
|
||||
this.myChart.resize()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.eventsByTypeData()
|
||||
})
|
||||
window.addEventListener('resize', this.resize)
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('resize', this.resize)
|
||||
if (this.myChart) {
|
||||
echarts.dispose(this.myChart)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,244 +0,0 @@
|
||||
<template>
|
||||
<div class="dns-recent-event npm-app-event">
|
||||
<div class="dns-recent-event-header">
|
||||
<div class="dns-recent-event-title">{{ $t('network.recentEvents') }}</div>
|
||||
<div class="dns-recent-event-select">
|
||||
<div class="metric-select">
|
||||
<el-select v-model="tableType"
|
||||
class="option__select select-column"
|
||||
popper-class="option-popper common-select"
|
||||
:teleported="false"
|
||||
key="tabMetric"
|
||||
:placeholder="$t('overall.select')"
|
||||
@change="changeMetric"
|
||||
size="small"
|
||||
width="100">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<span>{{$t('overall.type')}}：</span>
|
||||
</div>
|
||||
<div class="metric-select">
|
||||
<el-select v-model="tableSeverity"
|
||||
class="option__select select-column"
|
||||
popper-class="option-popper common-select"
|
||||
:teleported="false"
|
||||
key="tabMetric"
|
||||
:placeholder="$t('overall.select')"
|
||||
@change="changeMetric"
|
||||
size="small"
|
||||
width="100">
|
||||
<el-option
|
||||
v-for="item in severityOption"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<span>{{$t('network.severity')}}：</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
id="tabTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
class="npm-app-event-table dns-recent-event-table"
|
||||
height="100%"
|
||||
empty-text=""
|
||||
>
|
||||
<template v-for="(item, index) in customTableTitles" :key="index">
|
||||
<el-table-column class="data-column" :min-width="columnWidth(index)">
|
||||
<template #header>
|
||||
<span class="data-column__span">{{$t(item.label)}}</span>
|
||||
</template>
|
||||
<template #default="scope" :column="item">
|
||||
<div class="data-app-event-table">
|
||||
<template v-if="item.prop === 'type'">
|
||||
<span v-if="scope.row[item.prop] === 'Performance Event'" class="data-applications">
|
||||
<span class="cn-icon cn-icon-events-type performance"> </span>
|
||||
{{scope.row[item.prop]}}
|
||||
</span>
|
||||
<span v-else class="data-applications">
|
||||
<span class="cn-icon cn-icon-events-type security"> </span>
|
||||
{{scope.row[item.prop]}}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'event'">
|
||||
<span class="data-eventType">{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'severity'">
|
||||
<template v-if="scope.row[item.prop]==='critical'">
|
||||
<div v-for="(item, index) in 5" class="red-dot" :key="index"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='high'">
|
||||
<div v-for="(item, index) in 4" class="red-dot" :key="index"></div>
|
||||
<div class="grey-dot"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='medium'">
|
||||
<div v-for="(item, index) in 3" class="red-dot" :key="index"></div>
|
||||
<div v-for="(item, index) in 2" class="grey-dot" :key="index"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='low'">
|
||||
<div v-for="(item, index) in 2" class="red-dot" :key="index"></div>
|
||||
<div v-for="(item, index) in 3" class="grey-dot" :key="index"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='info'">
|
||||
<div v-for="(item, index) in 1" class="red-dot" :key="index"></div>
|
||||
<div v-for="(item, index) in 4" class="grey-dot" :key="index"></div>
|
||||
</template>
|
||||
<span class="data-severity" >{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template v-slot:empty>
|
||||
<div class="table-no-data" v-show="isNoData">
|
||||
<div class="table-no-data__title">{{ $t('npm.noData') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/utils/api'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import axios from 'axios'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref } from 'vue'
|
||||
import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
|
||||
|
||||
export default {
|
||||
name: 'DnsRecentEvents',
|
||||
setup () {
|
||||
const { query } = useRoute()
|
||||
const tableType = ref(query.tableType || '')
|
||||
const tableSeverity = ref(query.tableSeverity || '')
|
||||
return {
|
||||
tableType,
|
||||
tableSeverity
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
label: this.$t('dnsInsight.securityEvent'),
|
||||
value: 'securityEvent'
|
||||
},
|
||||
{
|
||||
label: this.$t('dnsInsight.PerEvent'),
|
||||
value: 'performanceEvent'
|
||||
}
|
||||
],
|
||||
severityOption: [
|
||||
{
|
||||
value: 'critical',
|
||||
label: 'Critical'
|
||||
},
|
||||
{
|
||||
value: 'high',
|
||||
label: 'High'
|
||||
},
|
||||
{
|
||||
value: 'medium',
|
||||
label: 'Medium'
|
||||
},
|
||||
{
|
||||
value: 'low',
|
||||
label: 'Low'
|
||||
},
|
||||
{
|
||||
value: 'info',
|
||||
label: 'Info'
|
||||
}
|
||||
],
|
||||
tableData: [],
|
||||
customTableTitles: [
|
||||
{ label: 'overall.type', prop: 'type' },
|
||||
{ label: 'dnsInsight.event', prop: 'event' },
|
||||
{ label: 'network.severity', prop: 'severity' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
watch: {
|
||||
timeFilter: {
|
||||
handler (n) {
|
||||
this.dnsRecentEventData()
|
||||
}
|
||||
},
|
||||
tableType (n) {
|
||||
const { query } = this.$route
|
||||
const newUrl = urlParamsHandler(window.location.href, query, {
|
||||
tableType: n
|
||||
})
|
||||
overwriteUrl(newUrl)
|
||||
},
|
||||
tableSeverity (n) {
|
||||
const { query } = this.$route
|
||||
const newUrl = urlParamsHandler(window.location.href, query, {
|
||||
tableSeverity: n
|
||||
})
|
||||
overwriteUrl(newUrl)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dnsRecentEventData()
|
||||
},
|
||||
methods: {
|
||||
dnsRecentEventData () {
|
||||
this.toggleLoading(true)
|
||||
this.tableData = []
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime),
|
||||
limit: 8,
|
||||
type: this.tableType,
|
||||
severity: this.tableSeverity
|
||||
}
|
||||
this.toggleLoading(true)
|
||||
axios.get(api.dnsInsight.recentEvents, { params }).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.isNoData = res.data.data.result.length === 0
|
||||
this.tableData = res.data.data.result
|
||||
this.tableData.forEach((t, index) => {
|
||||
if (index > 5) {
|
||||
t.type = 'Security Event'
|
||||
} else {
|
||||
t.type = 'Performance Event'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.isNoData = true
|
||||
}
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
},
|
||||
changeMetric () {
|
||||
this.dnsRecentEventData()
|
||||
},
|
||||
columnWidth (index) {
|
||||
if (index === 0 || index === 1) {
|
||||
return '50%'
|
||||
} else if (index === 2) {
|
||||
return '25%'
|
||||
} else if (index === 3) {
|
||||
return '15%'
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user