monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit acd693e7918bd64539304b061cf355aa5f562ffc 1 parent 586f1158

【无】门户网站二级页面-信息化协同管理支撑平台、门户网站二级页面-安全日志分析管理系统【完成80%】

Inline Side-by-side
Showing 9 changed files with 655 additions and 3 deletions
... ... @@ -1831,3 +1831,111 @@ blockquote:before {
.item-content h4{
margin:20px 0;
}
/*lsq 产品二级页面样式 2022-09-13*/
.intro-Con{
/*height:300px;*/
/*background-image: url("../img/serviceSecond/serviceSecond.jpg");*/
/*background-size: contain;*/
/*background-repeat: no-repeat;*/
position: relative;
}
.intro-Con img{
}
.banner-container{
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.banner-introduction{
display: flex;
flex-flow: column;
justify-content: center;
}
.banner-introduction,.div-none{
flex:1;
}
.intro-tab{
box-shadow: 0 1px 8px #ccc; /*阴影*/
}
.tab-item{
padding:10px 0;
cursor: pointer;
}
.tab-item-active,.tab-item:hover{
color:#e43730;
border-bottom:2px solid #e43730;
}
.intro-intro,.info-intro{
font-size:14px;
}
.info-container-bg{
background:#f3f5f8;
}
.info-title{
text-align: center;
}
.info-intro{
padding-top:20px;
text-indent:28px;
}
.info-character{
padding:0 50px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.text-align-center{
text-align: center;
}
.info-advantage{
display: flex;
align-items: center;
border-right: 4px solid #dddddd;
cursor: pointer;
}
.info-advantage-title{
font-size: 14px;
}
.advantage-active{
color:#e43730;
border-color:#e43730;
}
.advantage-title-intro{
color:#848484;
font-size: 12px;
}
.info-value{
position: relative;
}
.info-value-title{
position: absolute;
top: 0;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
padding: 30px;
}
.max-width-600{
max-width: 600px;
margin: auto;
}
.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;
}
.row-bottom{
}
\ No newline at end of file
... ...
export function Information() {
let res={
title:'信息化协同管理支撑平台',
introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
data:[
{
title:'产品信息',
introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
type:'info'
},
{
title:'产品特点',
introduction:'',
data:[
{
icon:'assets/img/serviceSecond/information/character-1.png',
title:'工单信息集中管理',
introduction:'实现工单信息自动化汇总，工单数据集中化管理，工单流程实时共享。'
},
{
icon:'assets/img/serviceSecond/information/character-2.png',
title:'提高工作效率',
introduction:'运用智能化管理工具，降低人工沟通成本，缩短沟通时间。实时跟进工单问题的处理情况，提高工作效率。'
},
{
icon:'assets/img/serviceSecond/information/character-3.png',
title:'实时处理单数据',
introduction:'全方位、多维度实时进行工单统计数据，及时掌握工单执行过程中的问题，帮助决策者获取数据支撑。'
}
],
type:'character'
},
{
title:'系统框架',
introduction:'安全运维服务流程的系统架构',
img:'assets/img/serviceSecond/information/system.png',
type:'system'
},
{
title:'产品优势',
introduction:'',
dataSecond:[
{
icon:'assets/img/serviceSecond/information/advantage-1.png',
title:'“护网””等保”各规章变成“流程”强制性管控',
introduction:'特点：规章落地 提前约束 流程强制 全程留痕',
img:'assets/img/serviceSecond/information/advantageImg.png'
},
{
icon:'assets/img/serviceSecond/information/advantage-2.png',
title:'通过”安全流程“提前管控日常操作、留痕',
introduction:'',
img:'assets/img/serviceSecond/information/advantageImg.png'
},
{
icon:'assets/img/serviceSecond/information/advantage-3.png',
title:'税务局业务流程目录、展示、流程的分类管理',
introduction:'',
img:'assets/img/serviceSecond/information/advantageImg.png'
},
{
icon:'assets/img/serviceSecond/information/advantage-4.png',
title:'工作组、用户权限的灵活配置',
introduction:'',
img:'assets/img/serviceSecond/information/advantageImg.png'
}
],
type:'advantage'
},
{
title:'平台价值',
introduction:'魔镜“智能流程协同管理平台”通过信息整合，全局掌控省税务局工单流程每个节点状态，协同流转，处理审批；清晰分类了解流程情况，实时统计工单数据。',
dataThird:[
{
title:'标准化',
introduction:'信息、流程、时间全面统一，高效协同',
img:'assets/img/serviceSecond/information/value-bg.png'
},
{
title:'规范化',
introduction:'理清流程、制度落地，业务按标准执行',
img:'assets/img/serviceSecond/information/value-bg.png'
},
{
title:'透明化',
introduction:'流程申请、流程进度、流程审批全程可观',
img:'assets/img/serviceSecond/information/value-bg.png'
}
],
type:'value'
},
]
}
return res
}
export function securityLog() {
let res={
title:'安全日志分析管理系统',
introduction:'基于自主知识产权的非关系型数据存储系统的新一代海量日志管理系统。系统采用主被动结合技术手段，7×24小时实时采集网络中安全设备、网络设备、服务器资源和应用系统的日志。通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。系统满足《中华人民共和国网络安全法》、等级保护、分级保护、金融行业监管条例、82号令以及国家安全要求等法律法规相关要求，为客户开展合规性建设工作提供技术支撑。',
data:[
{
title:'产品信息',
introduction:'基于自主知识产权的非关系型数据存储系统的新一代海量日志管理系统。系统采用主被动结合技术手段，7×24小时实时采集网络中安全设备、网络设备、服务器资源和应用系统的日志。通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。系统满足《中华人民共和国网络安全法》、等级保护、分级保护、金融行业监管条例、82号令以及国家安全要求等法律法规相关要求，为客户开展合规性建设工作提供技术支撑。',
type:'info'
},
{
title:'系统框架',
introduction:'安全运维服务流程的系统架构',
img:'assets/img/serviceSecond/securityLog/system.png',
type:'system'
},
{
title:'产品特点',
introduction:'',
dataFour:[
{
img:'assets/img/serviceSecond/securityLog/advantageImg.png',
title:'高效数据处理能力',
introduction:'日志综合智能分析平台采用大数据架构进行数据的采集、存储、分析和检索。日志采集综合处理均值20000条/秒。数据采用高压缩存储算法，压缩比达到10：1。数据检索采用专业化日志查询引擎，百亿级日志量查询速率只需秒级。直观展示安全事件发生时间、访问源、危险等级及影响范围的分布情况。'
},
{
img:'assets/img/serviceSecond/securityLog/advantageImg.png',
title:'基于策略分析的安全事件响应',
introduction:'日志综合智能分析平台基于状态分析的安全事件规则能够帮助用户对全网安全事件进行全方位定位，快速发现可疑行为、违规事件和攻击行为。基于时间线性的回溯分析能够帮助用户轻松了解到违规事件的时间、发生源、违规操作设备、操作行为，通过图形化还原违规行为现场，作为事后追溯的有力证据。'
},
{
img:'assets/img/serviceSecond/securityLog/advantageImg.png',
title:'可视化日志展示',
introduction:'日志综合智能分析支持对日志查询结果进行在线快速自动分析，提供事件计数统计、时间分段环比统计、数值分段统计、字段值分类统计、字段数值统计、累计百分比统计、地理统计等统计功能，并以直观形象的统计图表（饼型图、直方图、堆积图、折线图等）来展现日志数据统计结果，并可将统计图表保存到自定义仪表盘上，方便用户随时查看。'
},
{
img:'assets/img/serviceSecond/securityLog/advantageImg.png',
title:'日志存储和归档',
introduction:'日志存储按照《中华人民共和国网络安全法》规定留存相关的网络日志不少于六个月，超时的日志系统自动提醒相关负责人，对其做备份或销毁处理。系统将采集来的日志统一存储和归档，持海量数据存储，也支持磁盘柜、NAS和SAN等多种存储方式，便于扩充和统一查询检索。'
}
],
type:'character'
},
{
title:'平台价值',
introduction:'',
dataFive:[
{
title:'日常运维有力支撑',
introduction:'通过系统自动化对海量日志采集、存储、分析、统计，可以及时发现IT系统中的安全隐患以及安全防御的薄弱环节，同时解决人工效率低下以及面对海量数据人工无法进行管理的难题。',
icon:'assets/img/serviceSecond/securityLog/value-bg.png'
},
{
title:'轻松实现海量日志全生命周期管理',
introduction:'通过部署日志综合智能分析平台对全网设备、应用日志实现7*24小时不间断快速采集、分析和存储，无需人工干预即可实现日志自动化管理，为后续日志取证、分析和合规提供事件仓库',
icon:'assets/img/serviceSecond/securityLog/value-bg.png'
},
{
title:'合规检查必备利器',
introduction:'系统满足等级保护、分级保护、国税总局监管条例、82号令以及国能安全36号文件等合规性要求，为用户开展合规性建设工作提供技术支撑。',
icon:'assets/img/serviceSecond/securityLog/value-bg.png'
},
{
title:'安全事件快速定位追踪',
introduction:'基于自主知识产权的日志检索引擎可以根据用户需求进行快速检索目标日志，100亿级别日志追踪检索只需要10秒即可返回结果；通过网络拓扑、IP地址定位可以实现可疑目标快速追踪。',
icon:'assets/img/serviceSecond/securityLog/value-bg.png'
}
],
type:'value'
},
]
}
return res
}
\ No newline at end of file
... ...
... ... @@ -18,7 +18,19 @@ const routes = [
path: '/concat',
name: 'concat',
component: () => myImport('views/concat/index')
}
},
//信息化协同管理支撑平台
{
path: '/services/information',
name: 'information',
component: () => myImport('views/serviceSecond/information/index')
},
//安全日志分析管理系统
{
path: '/services/securityLog',
name: 'securityLog',
component: () => myImport('views/serviceSecond/securityLog/index')
},
];
const router = VueRouter.createRouter({
... ...
<section class="hero-section rel rpt-150 pb-130 rpb-0">
<div class="shape shapeAnimationOne l-10 t-60">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
</section>
<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>
</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>
</section>
<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in InformationData.data" :key="item">
<div class="div-type" :data-type="item.type"></div>
<div class="container">
<h3 class="info-title">{{item.title}}</h3>
<div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
<div class="row" v-if="item.data && item.data.length>0">
<div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
<img class="pt-50" :src="itemC.icon" alt="">
<h4 class="pt-30">{{itemC.title}}</h4>
<div class="info-character-intro">{{itemC.introduction}}</div>
</div>
</div>
<div class="info-system pt-30" v-if="item.img">
<img :src="item.img" alt="">
</div>
<div class="row pt-30" v-if="item.dataSecond && item.dataSecond.length>0">
<div class="col-lg-4">
<div :class="['info-advantage',{'advantage-active':advantageActive==indexA}]" @mouseover="showHover(indexA)" @mouseleave="hideHover" v-for="(itemA,indexA) in item.dataSecond">
<img class="" :src="itemA.icon" alt="">
<div :class="['info-advantage-title']">
<div>{{itemA.title}}</div>
<div class="advantage-title-intro" v-if="itemA.introduction && advantageActive==indexA && isMouseover">{{itemA.introduction}}</div>
</div>
</div>
</div>
<div class="col-lg-8">
<img :src="advantageImg" alt="">
</div>
</div>
<div class="row pt-30" v-if="item.dataThird && item.dataThird.length>0">
<div class="col-lg-4" v-for="(itemV,indexV) in item.dataThird">
<div class="info-value" >
<img class="" :src="itemV.img" alt="">
<div :class="['info-value-title']">
<h3>{{itemV.title}}</h3>
<div>{{itemV.introduction}}</div>
</div>
</div>
</div>
</div>
</div>
</section>
... ...
import pageInit from "../../../minixs/pageInit.js";
import {Information} from "../../../../assets/img/data/serviceSecond.js";
export default {
name: 'information',
template: '',
mixins:[pageInit],
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
let InformationData=Information();
//页签高亮显示
let tabActive=Vue.ref(0);
//优势hover显示的图片
let advantageImg=Vue.ref();
let setAdvantage=()=>{
if(InformationData.data && InformationData.data.length>0){
InformationData.data.map(item=>{
if(item.type=='advantage'){
advantageImg.value=item.dataSecond[0].img
}
})
}
}
setAdvantage();
//优势hover高亮显示
let advantageActive=Vue.ref(0);
//优势是否hover
let isMouseover=Vue.ref(false);
//优势鼠标移入事件
let showHover=(indexA)=>{
advantageActive.value=indexA;
isMouseover.value=true;
if(InformationData.data && InformationData.data.length>0){
InformationData.data.map(item=>{
if(item.type=='advantage'){
advantageImg.value=item.dataSecond[indexA].img
}
})
}
}
//优势鼠标移出事件
let hideHover=()=>{
advantageActive.value=0;
isMouseover.value=false;
setAdvantage();
}
//页签点击跳转到对应的目标
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;
(function smoothDown (){
if(distance < total){
distance += step;
//移动一小段
document.body.scrollTop =distance;
document.documentElement.scrollTop = distance;
//设定每一次跳到的时间间隔为10ms
setTimeout(smoothDown,10)
}else{
//限制股东停止的距离
document.body.scrollTop = total;
document.documentElement.scrollTop = total;
}
})()
}
// 挂载完
Vue.onMounted(() => {
})
return {
InformationData,
tabActive,
advantageImg,
advantageActive,
isMouseover,
showHover,
hideHover,
setAdvantage,
goItemType
}
}
}
... ...
<section class="hero-section rel rpt-150 pb-130 rpb-0">
<div class="shape shapeAnimationOne l-10 t-60">
<img src="assets/img/shapes/shape1.png" alt="Shape">
</div>
</section>
<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>
</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>
</section>
<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='character'}]" v-for="(item,index) in securityLogData.data" :key="item">
<div class="div-type" :data-type="item.type"></div>
<div class="container">
<h3 class="info-title">{{item.title}}</h3>
<div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
<div class="row" v-if="item.data && item.data.length>0">
<div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
<img class="pt-50" :src="itemC.icon" alt="">
<h4 class="pt-30">{{itemC.title}}</h4>
<div class="info-character-intro">{{itemC.introduction}}</div>
</div>
</div>
<div class="info-system pt-30" v-if="item.img">
<img :src="item.img" alt="">
</div>
<!-- <div class="row pt-30" v-if="item.dataSecond && item.dataSecond.length>0">
<div class="col-lg-4">
<div :class="['info-advantage',{'advantage-active':advantageActive==indexA}]" @mouseover="showHover(indexA)" @mouseleave="hideHover" v-for="(itemA,indexA) in item.dataSecond">
<img class="" :src="itemA.icon" alt="">
<div :class="['info-advantage-title']">
<div>{{itemA.title}}</div>
<div class="advantage-title-intro" v-if="itemA.introduction && advantageActive==indexA && isMouseover">{{itemA.introduction}}</div>
</div>
</div>
</div>
<div class="col-lg-8">
<img :src="advantageImg" alt="">
</div>
</div>
<div class="row pt-30" v-if="item.dataThird && item.dataThird.length>0">
<div class="col-lg-4" v-for="(itemV,indexV) in item.dataThird">
<div class="info-value" >
<img class="" :src="itemV.img" alt="">
<div :class="['info-value-title']">
<h3>{{itemV.title}}</h3>
<div>{{itemV.introduction}}</div>
</div>
</div>
</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="">
</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="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>
</div>
<i class="iconCharacter icon-right">&gt;</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>
</div>
</div>
<div class="row-bottom"></div>
</div>
</div>
</section>
... ...
import pageInit from "../../../minixs/pageInit.js";
import {securityLog} from "../../../../assets/img/data/serviceSecond.js";
export default {
name: 'securityLog',
template: '',
mixins:[pageInit],
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
let securityLogData=securityLog();
//页签高亮显示
let tabActive=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
}
})
}
}
setcharacter();
//优势hover高亮显示
let characterActive=Vue.ref(0);
//优势是否hover
let isMouseover=Vue.ref(false);
//优势鼠标移入事件
let showHover=(indexA)=>{
characterActive.value=indexA;
isMouseover.value=true;
if(securityLogData.data && securityLogData.data.length>0){
securityLogData.data.map(item=>{
if(item.type=='character'){
characterImg.value=item.dataFour[indexA].img
}
})
}
}
//优势鼠标移出事件
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;
(function smoothDown (){
if(distance < total){
distance += step;
//移动一小段
document.body.scrollTop =distance;
document.documentElement.scrollTop = distance;
//设定每一次跳到的时间间隔为10ms
setTimeout(smoothDown,10)
}else{
//限制股东停止的距离
document.body.scrollTop = total;
document.documentElement.scrollTop = total;
}
})()
}
// 挂载完
Vue.onMounted(() => {
})
return {
characterImg,
securityLogData,
tabActive,
characterActive,
isMouseover,
showHover,
hideHover,
setcharacter,
goItemType
}
}
}
... ...
... ... @@ -179,7 +179,7 @@
</ol>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-6" @click="jumpSecond('info')">
<div class="service-right-image wow customFadeInRight delay-0-1s slow">
<img src="assets/img/services/p6.png" style="border-radius: 10px;">
</div>
... ...
... ... @@ -6,7 +6,15 @@ export default {
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let jumpSecond=(type)=>{
if(type=='info'){
proxy.$router.push({path:'/services/information'})
}
}
return {
jumpSecond
}
}
}
... ...