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

style : 根据BEM命名规范修改不符合规范的命名

Browse Source
This commit is contained in:
zhangxiaolong
2022-03-16 14:18:03 +08:00
parent a855a90643
commit aff7a54351
7 changed files with 54 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,11 @@
.chart-one-situation-statistics{ .cn-chart__one-situation-statistics{
height: 100%; height: 100%;
.situation-statistics-main { .one-situation-statistics__box {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 33px; margin-left: 33px;
height: 100%; height: 100%;
.situation-statistics-main-left{ .box__progress{
display: block; display: block;
width: 76px; width: 76px;
height: 76px; height: 76px;
@@ -13,7 +13,7 @@
font-size: 16px; font-size: 16px;
} }
} }
.situation-statistics-main-right{ .box__count{
margin-left: 22px; margin-left: 22px;
:first-child{ :first-child{
font-size: 18px; font-size: 18px;

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

@@ -1,18 +1,18 @@
.chart-two-situation-statistics{ .cn-chart__two-situation-statistics{
padding-top: 22px; padding-top: 22px;
.chart-two-situation-statistics-top { .box__body {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 33px; margin-left: 33px;
padding-top: 22px; padding-top: 22px;
.chart-two-situation-statistics-main-left{ .body__progress{
display: block; display: block;
.el-progress__text span{ .el-progress__text span{
font-size: 16px; font-size: 16px;
} }
} }
.chart-two-situation-statistics-main-right{ .body__count{
margin-left: 22px; margin-left: 22px;
:first-child{ :first-child{
font-size: 18px; font-size: 18px;

32
src/assets/css/components/views/charts/chartAlarmInfo.scss
View File

@@ -1,13 +1,13 @@
.cn-chart-alarm-info { .cn-chart__alarm-info {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
.cn-chart-alarm-info-mainContent { .alarm-info__box {
height: calc(100% - 40px); height: calc(100% - 40px);
width: 100%; width: 100%;
.cn-chart-alarm-content { .box__body {
display: flex; display: flex;
margin-left: 30px; margin-left: 30px;
margin-right: 30px; margin-right: 30px;
@@ -16,16 +16,16 @@
height: calc(100% / 9); height: calc(100% / 9);
border-bottom: 1px solid #E7EAED; border-bottom: 1px solid #E7EAED;
.cn-alarm-info-main { .body__content {
display: flex; display: flex;
.cn-alarm-info-main-left { .content__icon-box {
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.cn-chart-alarm-info-icon { .icon-box__icon {
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 50%; border-radius: 50%;
@@ -42,10 +42,10 @@
} }
} }
.cn-alarm-info-textContent { .content__text-box {
margin-left: 17px; margin-left: 17px;
.cn-alarm-info-main-title { .text-box__title {
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
font-family: Roboto-Regular; font-family: Roboto-Regular;
@@ -57,7 +57,7 @@
overflow: hidden; overflow: hidden;
} }
.cn-alarm-info-bottom { .text-box__text {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-align: center; text-align: center;
@@ -70,7 +70,7 @@
margin-bottom: 4px; margin-bottom: 4px;
} }
.cn-alarm-info-bottom-middle { .text__time-box {
display: flex; display: flex;
margin-left: 20px; margin-left: 20px;
height: 14px; height: 14px;
@@ -82,7 +82,7 @@
font-size: 12px; font-size: 12px;
} }
.cn-alarm-info-bottom-time { .time-box__start-time {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 12px; font-size: 12px;
color: #999999; color: #999999;
@@ -91,7 +91,7 @@
} }
} }
.cn-alarm-info-bottom-right { .text__duration-box {
height: 14px; height: 14px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -104,7 +104,7 @@
font-size: 12px; font-size: 12px;
} }
.cn-alarm-info-bottom-time { .time-box__start-time {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 12px; font-size: 12px;
color: #999999; color: #999999;
@@ -113,7 +113,7 @@
} }
} }
.cn-alarm-info-bottom-type { .text__type {
width: auto; width: auto;
font-family: Roboto-Regular; font-family: Roboto-Regular;
line-height: 16px; line-height: 16px;
@@ -129,7 +129,7 @@
word-break: break-all; word-break: break-all;
} }
.cn-alarm-info-bottom-circle { .duration-box__circle {
display: inline-block; display: inline-block;
width: 5px; width: 5px;
height: 5px; height: 5px;
@@ -148,7 +148,7 @@
} }
} }
.cn-chart-alarm-info-pagination { .alarm-info__pagination {
height: 40px !important; height: 40px !important;
width: 100%; width: 100%;
} }

8
src/views/charts/Chart.vue
View File

@@ -208,7 +208,7 @@
:query-params="queryParams" :query-params="queryParams"
></chart-echart-app-relate-domain> ></chart-echart-app-relate-domain>
<chart-one-Situation-Statistics <chart-one-situation-statistics
v-else-if="isSingleSupportStatistics" v-else-if="isSingleSupportStatistics"
:chart-info="chartInfo" :chart-info="chartInfo"
:chart-data="chartData" :chart-data="chartData"
@@ -216,9 +216,9 @@
:time-filter="timeFilter" :time-filter="timeFilter"
:entity="entity" :entity="entity"
@showLoading="showLoading" @showLoading="showLoading"
></chart-one-Situation-Statistics> ></chart-one-situation-statistics>
<chart-two-Situation-Statistics <chart-two-situation-statistics
v-else-if="isTwoSupportStatistics" v-else-if="isTwoSupportStatistics"
:chart-info="chartInfo" :chart-info="chartInfo"
:chart-data="chartData" :chart-data="chartData"
@@ -226,7 +226,7 @@
:query-params="queryParams" :query-params="queryParams"
@showLoading="showLoading" @showLoading="showLoading"
:entity="entity" :entity="entity"
></chart-two-Situation-Statistics> ></chart-two-situation-statistics>
<chart-alarm-info <chart-alarm-info
v-else-if="isAlarmInfo" v-else-if="isAlarmInfo"

32
src/views/charts/charts/ChartAlarmInfo.vue
View File

@@ -1,17 +1,17 @@
<template> <template>
<div class="cn-chart-alarm-info"> <div class="cn-chart__alarm-info">
<div class="no-data" v-if="isNoData">No data</div> <div class="no-data" v-if="isNoData">No data</div>
<template v-else> <template v-else>
<div class="cn-chart-alarm-info-mainContent"> <div class="alarm-info__box">
<div <div
class="cn-chart-alarm-content" class="box__body"
v-for="(value, index) in chartData ? chartData : []" v-for="(value, index) in chartData ? chartData : []"
:key="index" :key="index"
> >
<div class="cn-alarm-info-main"> <div class="body__content">
<div class="cn-alarm-info-main-left"> <div class="content__icon-box">
<div <div
class="cn-chart-alarm-info-icon" class="icon-box__icon"
:style="{ :style="{
background: eventSeverityColor[value.eventSeverity], background: eventSeverityColor[value.eventSeverity],
opacity: 0.1, opacity: 0.1,
@@ -25,8 +25,8 @@
}" }"
></i> ></i>
</div> </div>
<div class="cn-alarm-info-textContent"> <div class="content__text-box">
<div class="cn-alarm-info-main-title"> <div class="text-box__title">
<div v-if="value.entityType === 'domain'" :title="value.domain"> <div v-if="value.entityType === 'domain'" :title="value.domain">
<span>{{ value.domain }}</span> <span>{{ value.domain }}</span>
</div> </div>
@@ -38,9 +38,9 @@
</div> </div>
</div> </div>
<div class="cn-alarm-info-bottom"> <div class="text-box__text">
<div <div
class="cn-alarm-info-bottom-type" class="text__type"
:style="{ :style="{
color: eventSeverityColor[value.eventSeverity], color: eventSeverityColor[value.eventSeverity],
'border-color': eventSeverityColor[value.eventSeverity], 'border-color': eventSeverityColor[value.eventSeverity],
@@ -49,10 +49,10 @@
> >
{{ value.eventType }} {{ value.eventType }}
</div> </div>
<div class="cn-alarm-info-bottom-middle"> <div class="text__time-box">
<i class="cn-icon cn-icon-time2"></i> <i class="cn-icon cn-icon-time2"></i>
<div class="cn-alarm-info-bottom-time"> <div class="time-box__start-time">
&nbsp; {{ $t(`dns.startTime`) }}:&nbsp;&nbsp;&nbsp; &nbsp; {{ $t(`dns.startTime`) }}:&nbsp;&nbsp;&nbsp;
</div> </div>
<div> <div>
@@ -67,14 +67,14 @@
</div> </div>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<div class="cn-alarm-info-bottom-right"> <div class="text__duration-box">
<i class="cn-icon cn-icon-time2"></i> <i class="cn-icon cn-icon-time2"></i>
<div class="cn-alarm-info-bottom-time"> <div class="time-box__start-time">
&nbsp;{{ $t(`dns.duration`) }}:&nbsp;&nbsp;&nbsp; &nbsp;{{ $t(`dns.duration`) }}:&nbsp;&nbsp;&nbsp;
</div> </div>
<div <div
class="cn-alarm-info-bottom-circle" class="duration-box__circle"
:style="{ :style="{
background: eventSeverityColor[value.eventSeverity], background: eventSeverityColor[value.eventSeverity],
}" }"
@@ -95,7 +95,7 @@
</div> </div>
<chart-table-pagination <chart-table-pagination
ref="tablePagination" ref="tablePagination"
class="cn-chart-alarm-info-pagination" class="alarm-info__pagination"
:total="alarmInfoCount.result" :total="alarmInfoCount.result"
:pageSizeForAlarm="pageSizeForAlarm" :pageSizeForAlarm="pageSizeForAlarm"
v-model:currentPage="pageNo" v-model:currentPage="pageNo"

10
src/views/charts/charts/ChartOneSituationStatistics.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="chart-one-situation-statistics"> <div class="cn-chart__one-situation-statistics">
<div class="situation-statistics-main"> <div class="one-situation-statistics__box">
<div class="situation-statistics-main-left"> <div class="box__progress">
<el-progress <el-progress
type="circle" type="circle"
:color="chartInfo.params.color" :color="chartInfo.params.color"
@@ -9,9 +9,9 @@
:percentage="$_.get(chartData, 'percent', '-') " :percentage="$_.get(chartData, 'percent', '-') "
/> />
</div> </div>
<div class="situation-statistics-main-right"> <div class="box__count">
<div> {{ $_.get(chartData, 'count', '-') }} </div> <div> {{ $_.get(chartData, 'count', '-') }} </div>
<div class="situation-statistic-main-right-font">{{ $t(`dns.numberOfNodes`) }}</div> <div>{{ $t(`dns.numberOfNodes`) }}</div>
</div> </div>
</div> </div>
</div> </div>

10
src/views/charts/charts/ChartTwoSituationStatistics.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<div class="chart-two-situation-statistics"> <div class="cn-chart__two-situation-statistics">
<div <div
class="chart-two-situation-statistics-main" class="two-situation-statistics__box"
v-for="(value, key,index) in result ? result : []" v-for="(value, key,index) in result ? result : []"
:key="index" :key="index"
> >
<div class="chart-two-situation-statistics-top"> <div class="box__body">
<div class="chart-two-situation-statistics-main-left"> <div class="body__progress">
<el-progress <el-progress
type="circle" type="circle"
:color="chartInfo.params.color[index]" :color="chartInfo.params.color[index]"
@@ -14,7 +14,7 @@
:percentage="value.percent ? value.percent : 0" :percentage="value.percent ? value.percent : 0"
/> />
</div> </div>
<div class="chart-two-situation-statistics-main-right"> <div class="body__count">
<div>{{ value.count ? value.count : '-' }}</div> <div>{{ value.count ? value.count : '-' }}</div>
<div>{{ $t(`dns.numberOfNodesSupporting${key}Protocol`) }}</div> <div>{{ $t(`dns.numberOfNodesSupporting${key}Protocol`) }}</div>
</div> </div>