monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit c51e0b816437332f88a27e8d710d4f7bd44d36a2 1 parent 43c4cbf7

【无】门户网站-日志综合智能分析平台（剩余的20%）

Inline Side-by-side
Showing 8 changed files with 229 additions and 61 deletions
... ... @@ -1844,9 +1844,13 @@ blockquote:before {
.banner-container{
position: absolute;
top: 0;
right:0;
left: 0;
height: 100%;
}
.banner-height{
height:100%;
}
.banner-introduction{
display: flex;
flex-flow: column;
... ... @@ -1859,6 +1863,15 @@ blockquote:before {
.intro-tab{
box-shadow: 0 1px 8px #ccc; /*阴影*/
}
.intro-tab-container li{
display: flex;
}
.intro-tab-container li:first-child{
padding-left:0;
}
.intro-tab-container li:last-child{
padding-right:0;
}
.tab-item{
padding:10px 0;
cursor: pointer;
... ... @@ -1927,15 +1940,83 @@ blockquote:before {
.service-right-image,.service-left-image{
cursor: pointer;
}
.dot-container{
}
.dot-item-intro{
overflow: hidden;
text-overflow: ellipsis;
/*white-space:nowrap;*/
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.height-50{
height: 50px;
}
.height-40{
height:40px;
}
.border-div{
width: 0;
height: 0;
border: 20px solid #000;
border-top-color:transparent;
border-bottom-color:#fff;
border-left-color: transparent;
border-right-color: transparent;
position: relative;
bottom: -5px;
margin: auto;
}
.value-row-bottom{
width:100%;
padding:30px;
border:1px solid rgba(204,204,204,.1);
box-shadow: 0 0 20px rgba(204,204,204,.8);
min-height: 116px;
}
.iconCharacter{
cursor: pointer;
height:21px;
width:21px;
display: none;
}
.icon-left{
background-image: url("../img/serviceSecond/securityLog/arrow-left-gray.png");
}
.icon-right{
background-image: url("../img/serviceSecond/securityLog/arrow-right-gray.png");
}
.icon-left:hover{
background-image: url("../img/serviceSecond/securityLog/arrow-left.png");
}
.icon-right:hover{
background-image: url("../img/serviceSecond/securityLog/arrow-right.png");
}
.row-bottom{
}
\ No newline at end of file
display: flex;
align-items: center;
padding-bottom: 30px;
}
.dot-item{
padding:20px;
cursor: pointer;
}
.dot-item-active,.dot-item:hover{
background-color:#e43730;
border-radius: 5px;
color:#ffffff;
}
@media (min-width: 992px){
.dot-container{
flex: 1;
margin: 0 30px;
flex-wrap: nowrap;
overflow: hidden;
}
.iconCharacter{
display:block;
}
}
.div-hide{
display:none;
}
... ...
... ... @@ -96,7 +96,7 @@ export function Information() {
}
export function securityLog() {
let res={
title:'安全日志分析管理系统',
title:'日志综合智能分析平台',
introduction:'基于自主知识产权的非关系型数据存储系统的新一代海量日志管理系统。系统采用主被动结合技术手段，7×24小时实时采集网络中安全设备、网络设备、服务器资源和应用系统的日志。通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。系统满足《中华人民共和国网络安全法》、等级保护、分级保护、金融行业监管条例、82号令以及国家安全要求等法律法规相关要求，为客户开展合规性建设工作提供技术支撑。',
data:[
{
... ... @@ -117,22 +117,26 @@ export function securityLog() {
{
img:'assets/img/serviceSecond/securityLog/advantageImg.png',
title:'高效数据处理能力',
introduction:'日志综合智能分析平台采用大数据架构进行数据的采集、存储、分析和检索。日志采集综合处理均值20000条/秒。数据采用高压缩存储算法，压缩比达到10：1。数据检索采用专业化日志查询引擎，百亿级日志量查询速率只需秒级。直观展示安全事件发生时间、访问源、危险等级及影响范围的分布情况。'
introduction:'日志综合智能分析平台采用大数据架构进行数据的采集、存储、分析和检索。日志采集综合处理均值20000条/秒。数据采用高压缩存储算法，压缩比达到10：1。数据检索采用专业化日志查询引擎，百亿级日志量查询速率只需秒级。直观展示安全事件发生时间、访问源、危险等级及影响范围的分布情况。',
isDisplay:true
},
{
img:'assets/img/serviceSecond/securityLog/advantageImg.png',
title:'基于策略分析的安全事件响应',
introduction:'日志综合智能分析平台基于状态分析的安全事件规则能够帮助用户对全网安全事件进行全方位定位，快速发现可疑行为、违规事件和攻击行为。基于时间线性的回溯分析能够帮助用户轻松了解到违规事件的时间、发生源、违规操作设备、操作行为，通过图形化还原违规行为现场，作为事后追溯的有力证据。'
introduction:'日志综合智能分析平台基于状态分析的安全事件规则能够帮助用户对全网安全事件进行全方位定位，快速发现可疑行为、违规事件和攻击行为。基于时间线性的回溯分析能够帮助用户轻松了解到违规事件的时间、发生源、违规操作设备、操作行为，通过图形化还原违规行为现场，作为事后追溯的有力证据。',
isDisplay:true
},
{
img:'assets/img/serviceSecond/securityLog/advantageImg.png',
title:'可视化日志展示',
introduction:'日志综合智能分析支持对日志查询结果进行在线快速自动分析，提供事件计数统计、时间分段环比统计、数值分段统计、字段值分类统计、字段数值统计、累计百分比统计、地理统计等统计功能，并以直观形象的统计图表（饼型图、直方图、堆积图、折线图等）来展现日志数据统计结果，并可将统计图表保存到自定义仪表盘上，方便用户随时查看。'
introduction:'日志综合智能分析支持对日志查询结果进行在线快速自动分析，提供事件计数统计、时间分段环比统计、数值分段统计、字段值分类统计、字段数值统计、累计百分比统计、地理统计等统计功能，并以直观形象的统计图表（饼型图、直方图、堆积图、折线图等）来展现日志数据统计结果，并可将统计图表保存到自定义仪表盘上，方便用户随时查看。',
isDisplay:true
},
{
img:'assets/img/serviceSecond/securityLog/advantageImg.png',
title:'日志存储和归档',
introduction:'日志存储按照《中华人民共和国网络安全法》规定留存相关的网络日志不少于六个月，超时的日志系统自动提醒相关负责人，对其做备份或销毁处理。系统将采集来的日志统一存储和归档，持海量数据存储，也支持磁盘柜、NAS和SAN等多种存储方式，便于扩充和统一查询检索。'
introduction:'日志存储按照《中华人民共和国网络安全法》规定留存相关的网络日志不少于六个月，超时的日志系统自动提醒相关负责人，对其做备份或销毁处理。系统将采集来的日志统一存储和归档，持海量数据存储，也支持磁盘柜、NAS和SAN等多种存储方式，便于扩充和统一查询检索。',
isDisplay:true
}
],
type:'character'
... ... @@ -144,22 +148,26 @@ export function securityLog() {
{
title:'日常运维有力支撑',
introduction:'通过系统自动化对海量日志采集、存储、分析、统计，可以及时发现IT系统中的安全隐患以及安全防御的薄弱环节，同时解决人工效率低下以及面对海量数据人工无法进行管理的难题。',
icon:'assets/img/serviceSecond/securityLog/value-bg.png'
icon:'assets/img/serviceSecond/securityLog/value-1-none.png',
iconA:'assets/img/serviceSecond/securityLog/value-1.png'
},
{
title:'轻松实现海量日志全生命周期管理',
introduction:'通过部署日志综合智能分析平台对全网设备、应用日志实现7*24小时不间断快速采集、分析和存储，无需人工干预即可实现日志自动化管理，为后续日志取证、分析和合规提供事件仓库',
icon:'assets/img/serviceSecond/securityLog/value-bg.png'
icon:'assets/img/serviceSecond/securityLog/value-2-none.png',
iconA:'assets/img/serviceSecond/securityLog/value-2.png'
},
{
title:'合规检查必备利器',
introduction:'系统满足等级保护、分级保护、国税总局监管条例、82号令以及国能安全36号文件等合规性要求，为用户开展合规性建设工作提供技术支撑。',
icon:'assets/img/serviceSecond/securityLog/value-bg.png'
icon:'assets/img/serviceSecond/securityLog/value-3-none.png',
iconA:'assets/img/serviceSecond/securityLog/value-3.png',
},
{
title:'安全事件快速定位追踪',
introduction:'基于自主知识产权的日志检索引擎可以根据用户需求进行快速检索目标日志，100亿级别日志追踪检索只需要10秒即可返回结果；通过网络拓扑、IP地址定位可以实现可疑目标快速追踪。',
icon:'assets/img/serviceSecond/securityLog/value-bg.png'
icon:'assets/img/serviceSecond/securityLog/value-4-none.png',
iconA:'assets/img/serviceSecond/securityLog/value-4.png'
}
],
type:'value'
... ...
... ... @@ -7,19 +7,24 @@
<section class="intro-Con rel rpt-150 rpb-0 text-left" >
<img src="assets/img/serviceSecond/serviceSecond.jpg" alt="Shape">
<div class="row header-inner banner-container">
<div class="banner-introduction color-white col-lg-6">
<h2 class="intro-title color-white">{{InformationData.title}}</h2>
<span class="intro-intro">{{InformationData.introduction}}</span>
<div class="container banner-container">
<div class="row banner-height ">
<div class="banner-introduction color-white col-lg-6">
<h2 class="intro-title color-white">{{InformationData.title}}</h2>
<span class="intro-intro">{{InformationData.introduction}}</span>
</div>
</div>
</div>
</section>
<section class="intro-tab">
<ul class="intro-tab-container header-inner nav nav-pills">
<li class="col-lg-2" v-for="(item,index) in InformationData.data" :key="item">
<span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span>
</li>
</ul>
<div class="container">
<ul class="intro-tab-container nav nav-pills">
<li class="col-lg-2" v-for="(item,index) in InformationData.data" :key="item">
<span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span>
</li>
</ul>
</div>
</section>
... ...
... ... @@ -48,7 +48,6 @@ export default {
let goItemType=(type)=>{
let top=$("[data-type='"+type+"']").offset().top;
let total=top-100;
console.log("top",top,document.body.scrollTop,document.documentElement.scrollTop)
let distance = document.documentElement.scrollTop || document.body.scrollTop
//计算每一小段的距离
let step=total/6;
... ...
... ... @@ -7,19 +7,24 @@
<section class="intro-Con rel rpt-150 rpb-0 text-left" >
<img src="assets/img/serviceSecond/serviceSecond.jpg" alt="Shape">
<div class="row header-inner banner-container">
<div class="banner-introduction color-white col-lg-6">
<h2 class="intro-title color-white">{{securityLogData.title}}</h2>
<span class="intro-intro">{{securityLogData.introduction}}</span>
<div class="container banner-container">
<div class="row banner-height">
<div class="banner-introduction color-white col-lg-6">
<h2 class="intro-title color-white">{{securityLogData.title}}</h2>
<span class="intro-intro">{{securityLogData.introduction}}</span>
</div>
</div>
</div>
</section>
<section class="intro-tab">
<ul class="intro-tab-container header-inner nav nav-pills">
<li class="col-lg-2" v-for="(item,index) in securityLogData.data" :key="item">
<span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span>
</li>
</ul>
<div class="container">
<ul class="intro-tab-container nav nav-pills">
<li class="col-lg-2" v-for="(item,index) in securityLogData.data" :key="item">
<span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span>
</li>
</ul>
</div>
</section>
... ... @@ -65,38 +70,42 @@
</div>
</div>-->
<div class="row pt-30" v-if="item.dataFour && item.dataFour.length>0">
{{characterActive}}--
<div class="row-top row" v-for="(itemC,indexC) in item.dataFour" >
<div class="col-lg-6" v-if="indexC==characterActive">
<img class="" :src="characterImg" alt="">
<img class="" :src="itemC.img" alt="">
</div>
<div class="col-lg-6 flex-column-center " v-if="indexC==characterActive">
<h3>{{itemC.title}}</h3>
<div class="pt-30">{{itemC.introduction}}</div>
</div>
</div>
<div class="row-bottom row">
<i class="iconCharacter icon-left">&lt;</i>
<div class="row-bottom row pt-30">
<i class="iconCharacter icon-left" @click="prev(item.dataFour.length)"></i>
<div class="dot-container row">
<div class="dot-item col-lg-4" v-for="(itemC,indexC) in item.dataFour">
<div class="dot-item-title">{{itemC.title}}</div>
<div class="dot-item-intro">{{itemC.introduction}}</div>
<div @click="changeCharacter(indexC)" :class="['dot-item', 'col-lg-4', {'dot-item-active':indexC==characterActive,'div-hide':!itemC.isDisplay}]" v-for="(itemC,indexC) in item.dataFour">
<div class="dot-item-title" v-if="itemC.isDisplay">{{itemC.title}}</div>
<div class="dot-item-intro" v-if="itemC.isDisplay">{{itemC.introduction}}</div>
</div>
</div>
<i class="iconCharacter icon-right">&gt;</i>
<i class="iconCharacter icon-right" @click="next(item.dataFour.length)"></i>
</div>
</div>
<div class="row pt-30" v-if="item.dataFive && item.dataFive.length>0">
<div class="row-top row">
<div class="col-lg-3" v-for="(itemV,indexV) in item.dataFive">
<img class="" :src="itemV.icon" alt="">
<div class="">
<h3>{{itemV.title}}</h3>
<div>{{itemV.introduction}}</div>
<div class="row-top row pt-50">
<div class="col-lg-3 info-character" @mouseover="showHover(indexV)" @mouseleave="hideHover()" v-for="(itemV,indexV) in item.dataFive">
<img v-if="valueIndex!=indexV" class="" :src="itemV.icon" alt="">
<img v-if="valueIndex==indexV" class="" :src="itemV.iconA" alt="">
<div class="pt-30">
<h4 class="text-center height-50">{{itemV.title}}</h4>
<div class="height-40">
<div class="border-div" v-if="valueIndex==indexV"></div>
</div>
</div>
</div>
</div>
<div class="row-bottom"></div>
<div class="value-row-bottom pt-20">
{{valueContent}}
</div>
</div>
</div>
</section>
... ...
... ... @@ -10,13 +10,23 @@ export default {
let securityLogData=securityLog();
//页签高亮显示
let tabActive=Vue.ref(0);
//价值的简介
let valueContent=Vue.ref();
//价值的hover显示的图标
let valueIcon=Vue.ref();
//价值的hover显示
let valueIndex=Vue.ref(0);
//特点hover显示的图片
let characterImg=Vue.ref();
let setcharacter=()=>{
if(securityLogData.data && securityLogData.data.length>0){
securityLogData.data.map(item=>{
if(item.type=='character'){
characterImg.value=item.dataFour[0].img
characterImg.value=item.dataFour[0].img;
}
if(item.type == 'value'){
valueContent.value=item.dataFive[0].introduction;
valueIcon.value=item.dataFive[0].iconA;
}
})
}
... ... @@ -24,31 +34,28 @@ export default {
setcharacter();
//优势hover高亮显示
let characterActive=Vue.ref(0);
//优势是否hover
//特点是否显示
let isMouseover=Vue.ref(false);
//优势鼠标移入事件
let showHover=(indexA)=>{
characterActive.value=indexA;
isMouseover.value=true;
valueIndex.value=indexA;
if(securityLogData.data && securityLogData.data.length>0){
securityLogData.data.map(item=>{
if(item.type=='character'){
characterImg.value=item.dataFour[indexA].img
if(item.type == 'value'){
valueContent.value=item.dataFive[indexA].introduction;
valueIcon.value=item.dataFive[indexA].iconA;
}
})
}
}
//优势鼠标移出事件
let hideHover=()=>{
characterActive.value=0;
isMouseover.value=false;
setcharacter();
}
//页签点击跳转到对应的目标
let goItemType=(type)=>{
let top=$("[data-type='"+type+"']").offset().top;
let total=top-100;
console.log("top",top,document.body.scrollTop,document.documentElement.scrollTop)
let distance = document.documentElement.scrollTop || document.body.scrollTop
//计算每一小段的距离
let step=total/6;
... ... @@ -67,6 +74,55 @@ export default {
}
})()
}
//特点的事件
let prev=(dataLength)=>{
if(characterActive.value>0){
characterActive.value--
if(characterActive.value == 0){
setDisplay();
}
}else if(characterActive.value == 0){
characterActive.value=dataLength-1
changeDot(dataLength);
}
}
let next=(dataLength)=>{
if((characterActive.value+1)!=dataLength) {
characterActive.value++
}else{
characterActive.value=0;
}
changeDot(dataLength);
}
let changeCharacter=(indexC)=>{
characterActive.value=indexC;
}
//特点左右点击切换
let changeDot=(dataLength)=>{
if(characterActive.value>2 && characterActive.value<dataLength){
if(securityLogData.data && securityLogData.data.length>0){
securityLogData.data.map((item,index)=>{
if(item.type == 'character'){
item.dataFour[characterActive.value-3].isDisplay=false;
}
})
}
}else{
setDisplay();
}
}
//设置特点dot全部显示
let setDisplay=()=>{
if(securityLogData.data && securityLogData.data.length>0){
securityLogData.data.map((item,index)=>{
if(item.type == 'character'){
item.dataFour.map(v=>{
v.isDisplay=true;
})
}
})
}
}
// 挂载完
Vue.onMounted(() => {
... ... @@ -81,7 +137,15 @@ export default {
showHover,
hideHover,
setcharacter,
goItemType
goItemType,
valueContent,
valueIcon,
valueIndex,
prev,
next,
changeCharacter,
changeDot,
setDisplay
}
}
... ...
... ... @@ -150,7 +150,7 @@
</ol>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-6" @click="jumpSecond('log')">
<div class="service-left-image wow customFadeInLeft delay-0-1s slow">
<img src="assets/img/services/p5.png" style="border-radius: 10px;">
</div>
... ...
... ... @@ -10,6 +10,8 @@ export default {
let jumpSecond=(type)=>{
if(type=='info'){
proxy.$router.push({path:'/services/information'})
}else if(type == 'log'){
proxy.$router.push({path:'/services/securityLog'})
}
}
return {
... ...