CN-333 fix : 修复一些样式问题和代码逻辑问题
This commit is contained in:
zhangxiaolong
@@ -1,40 +1,57 @@
|
||||
.cn-chart-header-button{
|
||||
.cn-chart-header-button {
|
||||
display: flex;
|
||||
.cn-chart-header-button-all{
|
||||
border: 1px solid #0091FF;
|
||||
button:first-of-type{
|
||||
border-radius: 2px 0 0 2px;
|
||||
|
||||
}
|
||||
.cn-chart-header-button-all {
|
||||
border-color: #0091FF;
|
||||
color: #0091FF;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 2px 0 0 2px;
|
||||
|
||||
}
|
||||
.cn-chart-header-button-critical{
|
||||
border: 1px solid #0091FF;
|
||||
|
||||
.cn-chart-header-button-critical {
|
||||
border-color: #0091FF;
|
||||
color: #0091FF;
|
||||
border-radius: 2px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
}
|
||||
.cn-chart-header-button-high{
|
||||
border: 1px solid #0091FF;
|
||||
|
||||
.cn-chart-header-button-high {
|
||||
border-color: #0091FF;
|
||||
border-radius: 2px;
|
||||
background-color: #FFFFFF;
|
||||
color: #0091FF;
|
||||
}
|
||||
.cn-chart-header-button-low{
|
||||
border: 1px solid #0091FF;
|
||||
|
||||
.cn-chart-header-button-low {
|
||||
border-color: #0091FF;
|
||||
border-radius: 2px;
|
||||
background-color: #FFFFFF;
|
||||
color: #0091FF;
|
||||
}
|
||||
.cn-chart-header-button-info{
|
||||
border: 1px solid #0091FF;
|
||||
|
||||
.cn-chart-header-button-info {
|
||||
border-color: #0091FF;
|
||||
border-radius: 2px;
|
||||
background-color: #FFFFFF;
|
||||
color: #0091FF;
|
||||
}
|
||||
.cn-chart-header-button-medium{
|
||||
|
||||
.cn-chart-header-button-medium {
|
||||
border: 1px solid #0091FF;
|
||||
border-radius: 2px;
|
||||
background-color: #FFFFFF;
|
||||
color: #0091FF;
|
||||
}
|
||||
.el-button--default{
|
||||
|
||||
.el-button--default {
|
||||
height: 24px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
min-height:24px;
|
||||
border-radius: 2px;
|
||||
min-height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@@ -3,23 +3,28 @@
|
||||
height: 100%;
|
||||
margin-left: 30px;
|
||||
position: relative;
|
||||
.cn-chart-alarm-info-mainContent{
|
||||
height: calc(100% - 40px) ;
|
||||
|
||||
.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 ;
|
||||
border-bottom: 1px solid #E7EAED;
|
||||
|
||||
.cn-alarm-info-main {
|
||||
display: flex;
|
||||
.cn-alarm-info-main-left{
|
||||
|
||||
.cn-alarm-info-main-left {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.cn-chart-alarm-info-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@@ -28,56 +33,68 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cn-icon-alert{
|
||||
|
||||
.cn-icon-alert {
|
||||
width: 12px;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 7px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
}
|
||||
.cn-alarm-info-textContent{
|
||||
|
||||
.cn-alarm-info-textContent {
|
||||
margin-left: 17px;
|
||||
|
||||
.cn-alarm-info-main-title {
|
||||
font-size: 19px;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.cn-alarm-info-bottom {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.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;
|
||||
line-height: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.cn-alarm-info-bottom-type {
|
||||
width: auto;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
border: 1px solid;
|
||||
font-weight: 400;
|
||||
max-width: 72px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.cn-alarm-info-bottom-circle {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
@@ -85,13 +102,14 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-chart-alarm-info-pagination{
|
||||
|
||||
.cn-chart-alarm-info-pagination {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,77 +1,82 @@
|
||||
<template>
|
||||
<div class="cn-chart-alarm-info">
|
||||
<div class="cn-chart-alarm-info-mainContent">
|
||||
<div
|
||||
class="cn-chart-alarm-content"
|
||||
v-for="(value, index) in chartData"
|
||||
:key="index"
|
||||
>
|
||||
<div class="cn-alarm-info-main">
|
||||
<div class="cn-alarm-info-main-left">
|
||||
<div
|
||||
class="cn-chart-alarm-info-icon"
|
||||
:style="{
|
||||
background: eventSeverityColor[value.eventSeverity],
|
||||
opacity: 0.1,
|
||||
}"
|
||||
></div>
|
||||
<i
|
||||
class="cn-icon cn-icon-alert"
|
||||
:style="{
|
||||
color: eventSeverityColor[value.eventSeverity],
|
||||
opacity: 1,
|
||||
}"
|
||||
></i>
|
||||
</div>
|
||||
<div class="cn-alarm-info-textContent">
|
||||
<div class="cn-alarm-info-main-title">
|
||||
<!-- <span v-if="value.entityType === 'domain'">{{ value.domain }}</span>
|
||||
<div
|
||||
class="cn-chart-alarm-content"
|
||||
v-for="(value, index) in result ? result : []"
|
||||
:key="index"
|
||||
>
|
||||
<div class="cn-alarm-info-main">
|
||||
<div class="cn-alarm-info-main-left">
|
||||
<div
|
||||
class="cn-chart-alarm-info-icon"
|
||||
:style="{
|
||||
background: eventSeverityColor[value.eventSeverity],
|
||||
opacity: 0.1,
|
||||
}"
|
||||
></div>
|
||||
<i
|
||||
class="cn-icon cn-icon-alert"
|
||||
:style="{
|
||||
color: eventSeverityColor[value.eventSeverity],
|
||||
opacity: 1,
|
||||
}"
|
||||
></i>
|
||||
</div>
|
||||
<div class="cn-alarm-info-textContent">
|
||||
<div class="cn-alarm-info-main-title">
|
||||
<!-- <span v-if="value.entityType === 'domain'">{{ value.domain }}</span>
|
||||
<span v-if="value.entityType === 'app'">{{ value.appName }}</span>
|
||||
<span v-if="value.entityType === 'ip'">{{ value.serverIp }}</span> -->
|
||||
111.111.1.1
|
||||
</div>
|
||||
|
||||
<div class="cn-alarm-info-bottom">
|
||||
<div
|
||||
class="cn-alarm-info-bottom-type"
|
||||
:style="{ 'color': eventSeverityColor[value.eventSeverity] ,'border-color':eventSeverityColor[value.eventSeverity]}"
|
||||
>
|
||||
<!-- {{$t(`${value.eventType}`)}} -->
|
||||
{{ value.eventType }}
|
||||
111.111.1.1
|
||||
</div>
|
||||
|
||||
<div class="cn-alarm-info-bottom-middle">
|
||||
<i class="cn-icon cn-icon-time2"></i>
|
||||
|
||||
<div class="cn-alarm-info-bottom-time">
|
||||
{{ $t(`dns.startTime`) }}:
|
||||
</div>
|
||||
<div>{{ changeDate(value.startTime) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cn-alarm-info-bottom-right">
|
||||
<i class="cn-icon cn-icon-time2"></i>
|
||||
<div class="cn-alarm-info-bottom-time">
|
||||
{{ $t(`dns.duration`) }}:
|
||||
</div>
|
||||
|
||||
<div class="cn-alarm-info-bottom">
|
||||
<div
|
||||
class="cn-alarm-info-bottom-circle"
|
||||
:style="{ background: eventSeverityColor[value.eventSeverity] }"
|
||||
></div>
|
||||
|
||||
<div>
|
||||
{{
|
||||
unitConvert(value.endTime - value.startTime, 'time').join(' ')
|
||||
}}
|
||||
class="cn-alarm-info-bottom-type"
|
||||
:style="{
|
||||
color: eventSeverityColor[value.eventSeverity],
|
||||
'border-color': eventSeverityColor[value.eventSeverity],
|
||||
}"
|
||||
>
|
||||
{{ value.eventType }}
|
||||
</div>
|
||||
<div class="cn-alarm-info-bottom-middle">
|
||||
<i class="cn-icon cn-icon-time2"></i>
|
||||
|
||||
<div class="cn-alarm-info-bottom-time">
|
||||
{{ $t(`dns.startTime`) }}:
|
||||
</div>
|
||||
<div>{{ changeDate(value.startTime) }}</div>
|
||||
</div>:
|
||||
|
||||
<div class="cn-alarm-info-bottom-right">
|
||||
<i class="cn-icon cn-icon-time2"></i>
|
||||
<div class="cn-alarm-info-bottom-time">
|
||||
{{ $t(`dns.duration`) }}:
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="cn-alarm-info-bottom-circle"
|
||||
:style="{
|
||||
background: eventSeverityColor[value.eventSeverity],
|
||||
}"
|
||||
></div>
|
||||
|
||||
<div>
|
||||
{{
|
||||
unitConvert(value.endTime - value.startTime, 'time').join(
|
||||
' ',
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<chart-table-pagination
|
||||
ref="tablePagination"
|
||||
class="cn-chart-alarm-info-pagination"
|
||||
@@ -102,37 +107,141 @@ export default {
|
||||
pageSizeForAlarm: 9,
|
||||
eventSeverityColor: eventSeverityColor,
|
||||
pageNo: 1,
|
||||
alarmInfoCount: {
|
||||
|
||||
},
|
||||
fromChartData:''
|
||||
alarmInfoCount: {},
|
||||
fromChartData: '',
|
||||
result: [
|
||||
{
|
||||
entityType: 'ip',
|
||||
serverIp: '1.2.3.4',
|
||||
domain: '',
|
||||
appName: 'wechat',
|
||||
eventSeverity: 'high',
|
||||
eventType: 'type1111111111111111111111111111111111',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 111111111111111112,
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
serverIp: '1.2.3.4',
|
||||
domain: '',
|
||||
appName: 'wechat',
|
||||
eventSeverity: 'high',
|
||||
eventType: 'type111111111111111111111111111111111111',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
serverIp: '1.2.3.4',
|
||||
domain: '',
|
||||
appName: 'wechat',
|
||||
eventSeverity: 'high',
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
serverIp: '1.2.3.4',
|
||||
domain: '',
|
||||
appName: 'wechat',
|
||||
eventSeverity: 'high',
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
serverIp: '1.2.3.4',
|
||||
domain: '',
|
||||
appName: 'wechat',
|
||||
eventSeverity: 'high',
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
serverIp: '1.2.3.4',
|
||||
domain: '',
|
||||
appName: 'wechat',
|
||||
eventSeverity: 'high',
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
serverIp: '1.2.3.4',
|
||||
domain: '',
|
||||
appName: 'wechat',
|
||||
eventSeverity: 'high',
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
serverIp: '1.2.3.4',
|
||||
domain: '',
|
||||
appName: 'wechat',
|
||||
eventSeverity: 'high',
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
serverIp: '1.2.3.4',
|
||||
domain: '',
|
||||
appName: 'wechat',
|
||||
eventSeverity: 'high',
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tabHandleClickType: {
|
||||
deep: true,
|
||||
handler(n) {
|
||||
this.getData(1,n)
|
||||
this.getData(1, n)
|
||||
},
|
||||
},
|
||||
},
|
||||
created(){
|
||||
this.getData(1,'All')
|
||||
created() {
|
||||
this.getData(1, 'All')
|
||||
},
|
||||
components: {
|
||||
ChartTablePagination,
|
||||
},
|
||||
methods: {
|
||||
unitConvert,
|
||||
getData(val,n) {
|
||||
getData(val, n) {
|
||||
this.pageNo = val
|
||||
const now = window.$dayJs.tz().valueOf()
|
||||
const extraParams = {
|
||||
pageNo: val,
|
||||
pageSize: this.pageSizeForAlarm,
|
||||
eventSeverity: n? (n==='All'?'':n ): this.tabHandleClickType === 'All'?'':this.tabHandleClickType
|
||||
eventSeverity: n
|
||||
? n === 'All'
|
||||
? ''
|
||||
: n
|
||||
: this.tabHandleClickType === 'All'
|
||||
? ''
|
||||
: this.tabHandleClickType,
|
||||
}
|
||||
console.log('extraParams',extraParams);
|
||||
this.$emit('getAlarmInfo', null, extraParams)
|
||||
const queryParams = {
|
||||
startTime: Math.floor(now / 1000 - 3600),
|
||||
|
||||
@@ -29,7 +29,6 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
totalPage () {
|
||||
console.log(this.total,this.pageSize);
|
||||
const remainder = this.total % this.pageSize
|
||||
if (remainder) {
|
||||
return parseInt(this.total / this.pageSize) + 1
|
||||
|
||||
@@ -2,21 +2,21 @@
|
||||
<div class="chart-two-situation-statistics">
|
||||
<div
|
||||
class="situation-statistics-main"
|
||||
v-for="(value, index) in chartData"
|
||||
v-for="(value, key,index) in result ? result : []"
|
||||
:key="index"
|
||||
>
|
||||
<div class="situation-statistics-top">
|
||||
<div class="situation-statistics-top">
|
||||
<div class="situation-statistics-main-left">
|
||||
<el-progress
|
||||
type="circle"
|
||||
:color="chartInfo.params.color[0]"
|
||||
:color="chartInfo.params.color[index]"
|
||||
width="76"
|
||||
:percentage="value.percent"
|
||||
:percentage="value.percent ? value.percent : 0"
|
||||
/>
|
||||
</div>
|
||||
<div class="situation-statistics-main-right">
|
||||
<div>{{ value.count }}</div>
|
||||
<div>{{ $t(`dns.numberOfNodesSupporting${index}Protocol`)}}</div>
|
||||
<div>{{ value.count ? value.count : '-' }}</div>
|
||||
<div>{{ $t(`dns.numberOfNodesSupporting${key}Protocol`) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,6 +30,19 @@ export default {
|
||||
chartInfo: Object,
|
||||
chartData: [Array, Object],
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
result: {
|
||||
doh: {
|
||||
count: 111,
|
||||
percent: 0.85,
|
||||
},
|
||||
dot: {
|
||||
count: 111,
|
||||
percent: 80.85,
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user