fix: detection还原之前版本,添加按钮跳转至新版本

This commit is contained in:
刘洪洪
2023-08-28 15:14:20 +08:00
parent 5fdf929533
commit 6970b7a41d
3 changed files with 122 additions and 186 deletions

View File

@@ -1,100 +1,100 @@
//.detection-filter-case {
// display: flex;
// flex-direction: column;
// width: 280px;
// padding: 10px;
// margin-right: 10px;
// background-color: white;
// overflow: auto;
//
// .detection-filter {
// display: flex;
// flex-direction: column;
// margin-bottom: 10px;
//
// .filter__header {
// display: flex;
// flex: 0 0 32px;
// align-items: center;
// padding-left: 10px;
// color: #666;
// //background-color: #F3F7FA;
// cursor: pointer;
//
// span {
// font-size: 14px;
// padding-left: 6px;
// }
// i {
// font-size: 12px;
// transition: all linear .1s;
// transform: rotate(0) translate(0, 2px);
// }
// i.arrow-rotate {
// transform: rotate(90deg) translate(2px, 3px);
// }
// .new-detection-filter-header-title {
// font-size: 14px;
// color: #353636;
// font-weight: 600;
// }
// .new-detection-filter-icon {
// margin-left: 8px;
// margin-bottom: 2px;
// font-weight: bold !important;
// }
// }
//
// .filter__body {
// padding: 5px 0 0 15px;
//
// .el-checkbox-group {
// display: flex;
// flex-direction: column;
//
// .el-checkbox {
// display: flex;
// align-items: center;
// padding: 5px 0;
// margin-right: 5px;
// .el-checkbox__label {
// width: 100%;
// }
//
// .filter__checkbox-label {
// display: flex;
// justify-content: space-between;
// align-items: center;
//
// .severity-color-block {
// width: 4px;
// height: 15px;
// border-radius: 2px;
// }
// }
//
// &:last-of-type {
// padding-bottom: 0;
// }
// }
// }
// }
// }
// .new-detection-filter-title {
// display: flex;
// flex: 0 0 32px;
// align-items: center;
// padding-left: 27px;
// background-color: #EFF2F5;
// cursor: pointer;
// font-size: 14px;
// color: #353636;
// font-weight: 600;
// margin: -10px;
// margin-bottom: 10px;
// }
//}
.detection-filter-title {
.detection-filter-case {
display: flex;
flex-direction: column;
width: 280px;
padding: 10px;
margin-right: 10px;
background-color: white;
overflow: auto;
.detection-filter {
display: flex;
flex-direction: column;
margin-bottom: 10px;
.filter__header {
display: flex;
flex: 0 0 32px;
align-items: center;
padding-left: 10px;
color: #666;
//background-color: #F3F7FA;
cursor: pointer;
span {
font-size: 14px;
padding-left: 6px;
}
i {
font-size: 12px;
transition: all linear .1s;
transform: rotate(0) translate(0, 2px);
}
i.arrow-rotate {
transform: rotate(90deg) translate(2px, 3px);
}
.new-detection-filter-header-title {
font-size: 14px;
color: #353636;
font-weight: 600;
}
.new-detection-filter-icon {
margin-left: 8px;
margin-bottom: 2px;
font-weight: bold !important;
}
}
.filter__body {
padding: 5px 0 0 15px;
.el-checkbox-group {
display: flex;
flex-direction: column;
.el-checkbox {
display: flex;
align-items: center;
padding: 5px 0;
margin-right: 5px;
.el-checkbox__label {
width: 100%;
}
.filter__checkbox-label {
display: flex;
justify-content: space-between;
align-items: center;
.severity-color-block {
width: 4px;
height: 15px;
border-radius: 2px;
}
}
&:last-of-type {
padding-bottom: 0;
}
}
}
}
}
.new-detection-filter-title {
display: flex;
flex: 0 0 32px;
align-items: center;
padding-left: 27px;
background-color: #EFF2F5;
cursor: pointer;
font-size: 14px;
color: #353636;
font-weight: 600;
margin: -10px;
margin-bottom: 10px;
}
}
.new-detection-filter-title {
height: 32px;
line-height: 32px;
background: #F7F7F7;
@@ -102,10 +102,10 @@
box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
border-radius: 4px 4px 0 0;
}
.detection-filter-content {
.new-detection-filter-content {
padding: 20px;
.filter-content-title {
.new-filter-content-title {
font-family: NotoSansHans-Medium;
font-size: 14px;
line-height: 14px;
@@ -113,11 +113,11 @@
color: #353636;
font-weight: 500;
}
.filter-content-content {
.new-filter-content-content {
display: flex;
flex-direction: column;
.filter-content-checkbox {
.new-filter-content-checkbox {
line-height: 16px;
margin-bottom: 10px;
font-family: NotoSansSChineseRegular;

View File

@@ -4,10 +4,10 @@
<div class="explorer-top-tools explorer-detection-top-tools">
<div class="explorer-top-tools-title">{{$t('overall.detections')}}</div>
<div style="display: flex">
<!-- <div class="explorer-top-tools-block">
<div class="explorer-top-tools-block" @click="jumpNewDetetion">
<i class="cn-icon cn-icon-configure-policies detection-icon-setting"></i>
<span>{{$t('config.detections.configurePolicies')}}</span>
</div>-->
</div>
<DateTimeRange
class="date-time-range"
:start-time="timeFilter.startTime"
@@ -727,6 +727,14 @@ export default {
},
resize () {
this.chartInit.forEach(e => { e.value.resize() })
},
jumpNewDetetion () {
this.$router.push({
path: '/detectionsNew',
query: {
t: +new Date()
}
})
}
},
mounted () {

View File

@@ -1,14 +1,14 @@
<template>
<div>
<div class="detection-filter-title">
<div class="new-detection-filter-title">
{{ $t('detections.filters') }}
</div>
<div class="detection-filter-content">
<div class="new-detection-filter-content">
<div>
<div class="filter-content-title">{{ $t('overall.status') }}</div>
<div class="filter-content-content">
<div class="new-filter-content-title">{{ $t('overall.status') }}</div>
<div class="new-filter-content-content">
<el-checkbox-group v-model="checkStatus" @change="onChangeCategory" style="display: flex;flex-direction: column">
<el-checkbox v-for="item in statusList" :key="item.label" class="filter-content-checkbox" :label="item.status">
<el-checkbox v-for="item in statusList" :key="item.label" class="new-filter-content-checkbox" :label="item.status">
<div>{{ item.label }}</div>
</el-checkbox>
</el-checkbox-group>
@@ -16,10 +16,10 @@
</div>
<div>
<div class="filter-content-title">{{ $t('overall.category') }}</div>
<div class="filter-content-content">
<div class="new-filter-content-title">{{ $t('overall.category') }}</div>
<div class="new-filter-content-content">
<el-checkbox-group v-model="checkCategory" @change="onChangeCategory">
<el-checkbox v-for="item in categoryList" :key="item.value" class="filter-content-checkbox" :label="item.value">
<el-checkbox v-for="item in categoryList" :key="item.value" class="new-filter-content-checkbox" :label="item.value">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
@@ -27,10 +27,10 @@
</div>
<div>
<div class="filter-content-title">{{ $t('overall.type') }}</div>
<div class="filter-content-content">
<div class="new-filter-content-title">{{ $t('overall.type') }}</div>
<div class="new-filter-content-content">
<el-checkbox-group v-model="checkType" @change="onChangeCategory" style="display: flex;flex-direction: column">
<el-checkbox v-for="item in typeList" :key="item.value" class="filter-content-checkbox" :label="item.value">
<el-checkbox v-for="item in typeList" :key="item.value" class="new-filter-content-checkbox" :label="item.value">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
@@ -141,75 +141,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.detection-filter-title {
height: 32px;
line-height: 32px;
background: #F7F7F7;
padding: 0 20px;
box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
border-radius: 4px 4px 0 0;
}
.detection-filter-content {
padding: 20px;
.filter-content-title {
font-family: NotoSansHans-Medium;
font-size: 14px;
line-height: 14px;
margin-bottom: 10px;
color: #353636;
font-weight: 500;
}
.filter-content-content {
display: flex;
flex-direction: column;
.filter-content-checkbox {
line-height: 16px;
margin-bottom: 10px;
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: #353636;
font-weight: 400;
.el-checkbox__inner {
width: 16px !important;
height: 16px !important;
text-align: center !important;
line-height: 16px !important;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
border-color: #38ACD2;
background: #38ACD2;
border-radius: 2px;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
background: #FFFFFF;
border-radius: 1px;
}
.el-checkbox__input.is-checked {
.el-checkbox__inner {
border-color: #38ACD2;
background: #38ACD2;
border-radius: 2px;
}
}
.el-checkbox__input.is-focus {
.el-checkbox__inner {
border-color: #38ACD2;
}
}
.el-checkbox__label {
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: #353636;
font-weight: 400;
}
}
}
}
</style>