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

CN-332 fix : 样式修改

Browse Source 
CN-333 fix : 样式修改
This commit is contained in:
zhangxiaolong
2022-03-08 09:40:56 +08:00
parent 2d1419b74b
commit e5ccc621f8
8 changed files with 108 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/assets/css/components/views/chartHeader.scss
View File

@@ -1,64 +1,78 @@
.cn-chart-header-button {
display: flex;
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-color: #0091FF;
color: #0091FF;
border-radius: 2px;
background-color: #FFFFFF;
}
.cn-chart-header-button-high {
border-color: #0091FF;
border-radius: 2px;
background-color: #FFFFFF;
color: #0091FF;
}
.cn-chart-header-button-low {
border-color: #0091FF;
border-radius: 2px;
background-color: #FFFFFF;
color: #0091FF;
}
.cn-chart-header-button-info {
border-color: #0091FF;
border-radius: 2px;
background-color: #FFFFFF;
color: #0091FF;
}
.cn-chart-header-button-medium {
border: 1px solid #0091FF;
border-radius: 2px;
background-color: #FFFFFF;
color: #0091FF;
}
.el-button--default {
height: 24px;
border-radius: 2px;
min-height: 24px;
.cn-chart-header-button-group {
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto-Regular;
font-size: 12px;
font-weight: 400;
.el-button {
border-radius: 0%;
}
.el-button:hover {
background: #FFFFFF;
border-color: #0091FF;
}
.el-button:last-of-type {
border-radius: 0 2px 2px 0;
}
.el-button:first-of-type{
border-radius: 2px 0 0 2px;
}
.cn-chart-header-button-all {
border-color: #0091FF;
color: #0091FF;
background-color: #FFFFFF;
z-index: 1;
}
.cn-chart-header-button-critical {
border-color: #0091FF;
color: #0091FF;
background-color: #FFFFFF;
z-index: 1;
}
.cn-chart-header-button-high {
border-color: #0091FF;
background-color: #FFFFFF;
z-index: 1;
color: #0091FF;
}
.cn-chart-header-button-low {
border-color: #0091FF;
background-color: #FFFFFF;
z-index: 1;
color: #0091FF;
}
.cn-chart-header-button-info {
border-color: #0091FF;
background-color: #FFFFFF;
z-index: 1;
color: #0091FF;
}
.cn-chart-header-button-medium {
border-color: #0091FF;
background-color: #FFFFFF;
z-index: 1;
color: #0091FF;
}
.el-button--default {
height: 24px;
min-height: 24px;
display: flex;
justify-content: space-around;
align-items: center;
font-family: Roboto-Regular;
font-size: 12px;
font-weight: 400;
}
}
}

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

@@ -1,9 +1,10 @@
.chart-one-situation-statistics{
padding-top: 22px;
height: 100%;
.situation-statistics-main {
display: flex;
align-items: center;
margin-left: 33px;
height: 100%;
.situation-statistics-main-left{
display: block;
width: 76px;

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

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

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

@@ -108,7 +108,6 @@
.cn-alarm-info-bottom-type {
width: auto;
border-radius: 2px;
font-family: Roboto-Regular;
line-height: 16px;
font-size: 12px;

7
src/views/charts/ChartHeader.vue
View File

@@ -132,21 +132,26 @@
<template v-else-if="isAlarmInfo">
<div class="cn-chart-header-button">
<el-button-group class="cn-chart-header-button-group">
<el-button
:class="isFocusAll ? 'cn-chart-header-button-all' : ''"
@click="tabHandleClick('All')"
size="small"
>{{ $t('dns.all') }}</el-button
>
<el-button
:label="value"
:name="value"
plain:true
v-for="(value, key) in eventSeverity"
:key="key"
size="small"
:class=" isFocus === value ? 'cn-chart-header-button-' + value : ''"
@click="tabHandleClick(value)"
>
{{ value }}
</el-button>
</el-button-group>
</div>
</template>
@@ -296,6 +301,7 @@ export default {
}
},
reload (s, e, v) {
console.log(s,e,v);
this.dateTimeRangeChange(s, e, v)
},
groupShow () {
@@ -303,6 +309,7 @@ export default {
},
dateTimeRangeChange (s, e, v) {
this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
console.log(this.chartTimeFilter);
this.$emit('refresh', this.chartTimeFilter)
},
tableLimitChange () {

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

@@ -231,8 +231,6 @@ export default {
unitConvert,
getData (val, n) {
this.pageNo = val
const now = window.$dayJs.tz().valueOf()
console.log(window.$dayJs.tz())
const extraParams = {
pageNo: val,
pageSize: this.pageSizeForAlarm,

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

@@ -6,11 +6,11 @@
type="circle"
:color="chartInfo.params.color"
width="76"
:percentage="chartData ? chartData.percent : 0"
:percentage="$_.get(chartData, 'percent', '-') "
/>
</div>
<div class="situation-statistics-main-right">
<div>{{ chartData ? (chartData.count || '-') : '-' }}</div>
<div> {{ $_.get(chartData, 'count', '-') }} </div>
<div class="situation-statistic-main-right-font">{{ $t(`dns.numberOfNodes`) }}</div>
</div>
</div>
@@ -18,6 +18,7 @@
</template>
<script>
import _ from 'lodash'
export default {
name: 'ChartOneSituationStatistics',
props: {

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

@@ -1,12 +1,12 @@
<template>
<div class="chart-two-situation-statistics">
<div
class="situation-statistics-main"
v-for="(value, key,index) in chartData ? chartData : []"
class="chart-two-situation-statistics-main"
v-for="(value, key,index) in result ? result : []"
:key="index"
>
<div class="situation-statistics-top">
<div class="situation-statistics-main-left">
<div class="chart-two-situation-statistics-top">
<div class="chart-two-situation-statistics-main-left">
<el-progress
type="circle"
:color="chartInfo.params.color[index]"
@@ -14,7 +14,7 @@
:percentage="value.percent ? value.percent : 0"
/>
</div>
<div class="situation-statistics-main-right">
<div class="chart-two-situation-statistics-main-right">
<div>{{ value.count ? value.count : '-' }}</div>
<div>{{ $t(`dns.numberOfNodesSupporting${key}Protocol`) }}</div>
</div>
@@ -32,17 +32,21 @@ export default {
},
data () {
return {
// result: {
// doh: {
// count: 111,
// percent: 0.85,
// },
// dot: {
// count: 111,
// percent: 80.85,
// },
// },
result: {
doh: {
count: 111,
percent: 0.85,
},
dot: {
count: 111,
percent: 80.85,
},
},
}
},
mounted(){
console.log(this.chartInfo);
console.log(this.chartData);
}
}
</script>