monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 70138ce9c40f71b2ba011705621e190545cdf231 1 parent e5b9780b

【无】门户网站二级页面-综合告警智能算法平台

Inline Side-by-side
Showing 31 changed files with 867 additions and 149 deletions
... ... @@ -1834,11 +1834,15 @@ blockquote:before {
}
/*lsq 产品二级页面样式 2022-09-13*/
.intro-Con{
/*height:300px;*/
/*background-image: url("../img/serviceSecond/serviceSecond.jpg");*/
/*background-size: contain;*/
/*background-repeat: no-repeat;*/
position: relative;
height:100%;
background-image: url("../img/serviceSecond/serviceSecond.jpg");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
width: 100%;
left: 0;
top: 0;
z-index: -1;
}
.intro-Con img{
}
... ... @@ -1866,6 +1870,7 @@ blockquote:before {
}
.intro-tab-container li{
display: flex;
font-size: 15px;
}
.intro-tab-container li:first-child{
padding-left:0;
... ... @@ -2119,4 +2124,35 @@ blockquote:before {
font-weight: bold;
}
.cursor-pointer{
cursor: pointer;
}
.font-size-14{
font-size: 14px;
}
.font-size-16{
font-size: 16px;
}
.font-weight-bold{
font-weight: bold;
}
.line-height-28{
line-height: 28px;
}
.flex-start-column{
justify-content: flex-start;
}
.system-bg{
background: url("../img/serviceSecond/alarm/system-bg.png");
background-size: contain;
height: 100%;
}
.tab-item-li{
margin-right:80px;
}
@media (min-width: 992px){
.intro-tab-container{
display: flex;
}
}
... ...
//信息化协同管理支撑平台
export function Information() {
let res={
title:'信息化协同管理支撑平台',
... ... @@ -94,6 +95,7 @@ export function Information() {
return res
}
//安全日志分析管理系统
export function securityLog() {
let res={
title:'日志综合智能分析平台',
... ... @@ -177,6 +179,7 @@ export function securityLog() {
return res
}
//业务及应用综合分析平台
export function businessApp () {
let res={
title:'业务及应用综合分析平台',
... ... @@ -270,6 +273,7 @@ export function businessApp () {
return res
}
//魔镜智能运维管理一体机
export function maintenance() {
let res={
title:'魔镜智能运维管理一体机',
... ... @@ -383,3 +387,358 @@ export function maintenance() {
return res
}
//综合告警智能算法平台
export function alarm() {
let res={
title:'综合告警智能算法平台',
introduction:'接入各个监控平台的告警与事件，通讨智能算法关联压缩告警数据，帮助识别告警根源，通过自动去重，规则压缩，算法降噪，实现告警降噪，帮助运维团队减少告警，避免告警风暴;同时通过分派、排班、通知等功能，快速实现告警流程化管理，帮助运维团队更快响应告警，以多种方式通知告警到相关人员，全面提升告警管理能力',
data:[
{
title:'产品信息',
introduction:'接入各个监控平台的告警与事件，通讨智能算法关联压缩告警数据，帮助识别告警根源，通过自动去重，规则压缩，算法降噪，实现告警降噪，帮助运维团队减少告警，避免告警风暴;同时通过分派、排班、通知等功能，快速实现告警流程化管理，帮助运维团队更快响应告警，以多种方式通知告警到相关人员，全面提升告警管理能力',
type:'info'
},
{
title:'平台架构',
introduction:'',
img:'assets/img/serviceSecond/alarm/system.png',
data:[
{
icon:'assets/img/serviceSecond/alarm/system-icon-1.png',
title:'告警监控',
introduction:'依托于本身强大的存储和查询分析能力，我们可以支持海量数据的实时查询分析、异构数据的协同分析、跨账号跨地域的协同监控等能力'
},
{
icon:'assets/img/serviceSecond/alarm/system-icon-2.png',
title:'告警管理',
introduction:'提供了多种告警降噪能力，包括去重、合并、抑制、静默等'
},
{
icon:'assets/img/serviceSecond/alarm/system-icon-3.png',
title:'行动管理',
introduction:'对接了十多种通知渠道，可以快速配置使用，并且提供了非常灵活且强大的动态分派能力'
},
{
icon:'assets/img/serviceSecond/alarm/system-icon-4.png',
title:'开放告警',
introduction:'对于数据并未接入的用户，可以通过开放告警的能力，将自建系统或其它云产品的告警接入告警管理系统。从而快速使用的告警管理与行动管理能力。'
}
],
type:'system'
},
{
title:'告警的全生命周期',
introduction:'',
img:'assets/img/serviceSecond/alarm/lifeCycle.png',
type:'lifeCycle'
},
{
title:'基于业务的告警统一管理',
introduction:'能够根据业务单元为粒度，统一进行告警的管理以及态势的统计分析。因此我们提供了告警管理中心，以业务为中心进行告警的统一管理每个业务都包含从资源层到事务管理的完整链路。',
img:'assets/img/serviceSecond/alarm/alarmManage.png',
type:'alarmManage'
},
{
title:'基于算法的智能合并降噪',
introduction:'在告警降噪过程中，通过配置适当的合并规则，将具有相似特征的告警合并到同一个分组中，实现批量的通知。例如可以设置将相同应用的告警进行合并，从而避免同一个应用的多个告警频繁触发通知。',
img:'assets/img/serviceSecond/alarm/noiseReduce.png',
type:'noiseReduce',
subTitle:'兼容并包:开放告警',
subIntro:'对于已有的监控系统产生的告警，或者多云场景下的告警，也可以通过开放告警的方式统一接入到综合告警算法平台，进行统一的告警管理。目前开放告警累计支持了PROMETHEUS、ALERTMANAGERGRAFANA、ZABBIXDATADOGLOKIAWS CLOUDWATCH.NEW RELIC 华为云云监控等十多个监控源，对各个不同系统的告警进行管理。',
},
]
}
return res
}
//综合监控管理A-view todo
export function Aview() {
let res={
title:'综合监控管理A-view',
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
}
//CMDB资产管理 todo
export function cmdb() {
let res={
title:'CMDB资产管理',
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
}
//魔镜智能多云运维平台 todo
export function cloud() {
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
}
\ No newline at end of file
... ...
... ... @@ -215,9 +215,14 @@ export default {
if ($('.scroll-to-target').length) {
$(".scroll-to-target").on('click', function () {
var target = $(this).attr('data-target');
//lsq 产品二级页面的二级导航锚点 2022-09-19
let top=$(target).offset().top
if($(this).hasClass('tab-item')){
top-=100;
}
// animate
$('html, body').animate({
scrollTop: $(target).offset().top
scrollTop: top
}, 1000);
});
... ...
... ... @@ -43,6 +43,30 @@ const routes = [
name: 'maintenance',
component: () => myImport('views/serviceSecond/maintenance/index')
},
//综合告警智能算法平台
{
path: '/services/alarm',
name: 'alarm',
component: () => myImport('views/serviceSecond/alarm/index')
},
//综合监控管理A-view
{
path: '/services/Aview',
name: 'Aview',
component: () => myImport('views/serviceSecond/Aview/index')
},
//CMDB资产管理
{
path: '/services/cmdb',
name: 'cmdb',
component: () => myImport('views/serviceSecond/cmdb/index')
},
//魔镜智能多云运维平台
{
path: '/services/cloud',
name: 'cloud',
component: () => myImport('views/serviceSecond/cloud/index')
},
];
const router = VueRouter.createRouter({
... ... @@ -52,8 +76,17 @@ const router = VueRouter.createRouter({
router.beforeEach(async (to, from, next) => {
let toPath=to.name;
let path=to.path;
if(path){
//lsq 产品二级页时顶部的导航高亮显示 2022-09-19
let pathArr=path.split('/');
if(pathArr.length>2){
toPath=pathArr[1];
}
}
$('[top-nav]').removeClass('current');
$('[top-nav="'+to.name+'"]').addClass('current');
$('[top-nav="'+toPath+'"]').addClass('current');
// 回到顶部
$('html, body').animate({
scrollTop: 0
... ...
<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="rel rpt-150 rpb-0 text-left" >
<div class="container">
<div class="row banner-height pt-90 pb-90">
<div class="banner-introduction color-white col-lg-6">
<h2 class="intro-title color-white">{{AviewData.title}}</h2>
<span class="intro-intro">{{AviewData.introduction}}</span>
</div>
</div>
</div>
<div class="intro-Con"></div>
</section>
<section class="intro-tab">
<div class="container">
<ul class="intro-tab-container">
<li class="tab-item-li" v-for="(item,index) in AviewData.data" :key="item">
<span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
</li>
</ul>
</div>
</section>
<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in AviewData.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 {Aview} from "../../../../assets/img/data/serviceSecond.js";
export default {
name: 'Aview',
template: '',
mixins:[pageInit],
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
let AviewData=Aview();
//页签高亮显示
let tabActive=Vue.ref(0);
// 挂载完
Vue.onMounted(() => {
})
return {
AviewData,
tabActive
}
}
}
... ...
<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="rel rpt-150 rpb-0 text-left" >
<div class="container">
<div class="row banner-height pt-90 pb-90">
<div class="banner-introduction color-white col-lg-6">
<h2 class="intro-title color-white">{{alarmData.title}}</h2>
<span class="intro-intro">{{alarmData.introduction}}</span>
</div>
</div>
</div>
<div class="intro-Con"></div>
</section>
<section class="intro-tab">
<div class="container">
<ul class="intro-tab-container">
<li class="tab-item-li" v-for="(item,index) in alarmData.data" :key="item">
<span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
</li>
</ul>
</div>
</section>
<section :class="['info-container', 'rel', {'mb-70':item.type=='noiseReduce' || item.type=='lifeCycle'}, 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in alarmData.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="info-system pt-30" v-if="item.img">
<img :src="item.img" alt="">
</div>
<div class="row pt-50" v-if="item.data && item.data.length>0">
<div class="col-md-3 flex-start-column " v-for="(itemC,indexC) in item.data">
<div class="system-bg pd-20">
<img class="" :src="itemC.icon" alt="">
<h4 class="pt-30">{{itemC.title}}</h4>
<div class="info-character-intro font-size-14 pt-10">{{itemC.introduction}}</div>
</div>
</div>
</div>
<div class="row pt-30" v-if="item.subTitle && item.subIntro">
<div class="info-container-bg pd-20">
<div class="font-weight-bold font-size-16">{{item.subTitle}}</div>
<div class="pt-10 line-height-28 font-size-14">{{item.subIntro}}</div>
</div>
</div>
</div>
</section>
\ No newline at end of file
... ...
import pageInit from "../../../minixs/pageInit.js";
import {alarm} from "../../../../assets/img/data/serviceSecond.js";
export default {
name: 'alarm',
template: '',
mixins:[pageInit],
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
let alarmData=alarm();
//页签高亮显示
let tabActive=Vue.ref(0);
// 挂载完
Vue.onMounted(() => {
})
return {
alarmData,
tabActive
}
}
}
... ...
... ... @@ -5,23 +5,22 @@
</section>
<section class="intro-Con rel rpt-150 rpb-0 text-left" >
<img src="assets/img/serviceSecond/serviceSecond.jpg" alt="Shape">
<div class="container banner-container">
<div class="row banner-height">
<section class="rel rpt-150 rpb-0 text-left" >
<div class="container">
<div class="row banner-height pt-90 pb-90">
<div class="banner-introduction color-white col-lg-6">
<h2 class="intro-title color-white">{{businessAppData.title}}</h2>
<span class="intro-intro">{{businessAppData.introduction}}</span>
</div>
</div>
</div>
<div class="intro-Con"></div>
</section>
<section class="intro-tab">
<div class="container">
<ul class="intro-tab-container nav nav-pills">
<li class="col-lg-2" v-for="(item,index) in businessAppData.data" :key="item">
<span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span>
<ul class="intro-tab-container">
<li class="tab-item-li" v-for="(item,index) in businessAppData.data" :key="item">
<span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
</li>
</ul>
</div>
... ...
... ... @@ -52,28 +52,6 @@ export default {
let hideHover=()=>{
setcharacter();
}
//页签点击跳转到对应的目标
let goItemType=(type)=>{
let top=$("[data-type='"+type+"']").offset().top;
let total=top-100;
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;
}
})()
}
//特点的事件
let prev=(dataLength)=>{
if(characterActive.value>0){
... ... @@ -137,7 +115,6 @@ export default {
showHover,
hideHover,
setcharacter,
goItemType,
valueContent,
valueIcon,
valueIndex,
... ...
<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="rel rpt-150 rpb-0 text-left" >
<div class="container">
<div class="row banner-height pt-90 pb-90">
<div class="banner-introduction color-white col-lg-6">
<h2 class="intro-title color-white">{{cloudData.title}}</h2>
<span class="intro-intro">{{cloudData.introduction}}</span>
</div>
</div>
</div>
<div class="intro-Con"></div>
</section>
<section class="intro-tab">
<div class="container">
<ul class="intro-tab-container">
<li class="tab-item-li" v-for="(item,index) in cloudData.data" :key="item">
<span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
</li>
</ul>
</div>
</section>
<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cloudData.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 {cloud} from "../../../../assets/img/data/serviceSecond.js";
export default {
name: 'cloud',
template: '',
mixins:[pageInit],
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
let cloudData=cloud();
//页签高亮显示
let tabActive=Vue.ref(0);
// 挂载完
Vue.onMounted(() => {
})
return {
cloudData,
tabActive
}
}
}
... ...
<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="rel rpt-150 rpb-0 text-left" >
<div class="container">
<div class="row banner-height pt-90 pb-90">
<div class="banner-introduction color-white col-lg-6">
<h2 class="intro-title color-white">{{cmdbData.title}}</h2>
<span class="intro-intro">{{cmdbData.introduction}}</span>
</div>
</div>
</div>
<div class="intro-Con"></div>
</section>
<section class="intro-tab">
<div class="container">
<ul class="intro-tab-container">
<li class="tab-item-li" v-for="(item,index) in cmdbData.data" :key="item">
<span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
</li>
</ul>
</div>
</section>
<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cmdbData.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 {cmdb} from "../../../../assets/img/data/serviceSecond.js";
export default {
name: 'cmdb',
template: '',
mixins:[pageInit],
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
let cmdbData=cmdb();
//页签高亮显示
let tabActive=Vue.ref(0);
// 挂载完
Vue.onMounted(() => {
})
return {
cmdbData,
tabActive
}
}
}
... ...
... ... @@ -5,23 +5,22 @@
</section>
<section class="intro-Con rel rpt-150 rpb-0 text-left" >
<img src="assets/img/serviceSecond/serviceSecond.jpg" alt="Shape">
<div class="container banner-container">
<div class="row banner-height ">
<section class="rel rpt-150 rpb-0 text-left" >
<div class="container">
<div class="row banner-height pt-90 pb-90">
<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>
<div class="intro-Con"></div>
</section>
<section class="intro-tab">
<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>
<ul class="intro-tab-container">
<li class="tab-item-li" v-for="(item,index) in InformationData.data" :key="item">
<span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
</li>
</ul>
</div>
... ...
... ... @@ -44,28 +44,6 @@ export default {
isMouseover.value=false;
setAdvantage();
}
//页签点击跳转到对应的目标
let goItemType=(type)=>{
let top=$("[data-type='"+type+"']").offset().top;
let total=top-100;
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(() => {
... ... @@ -80,7 +58,6 @@ export default {
showHover,
hideHover,
setAdvantage,
goItemType
}
}
... ...
... ... @@ -5,23 +5,22 @@
</section>
<section class="intro-Con rel rpt-150 rpb-0 text-left" >
<img src="assets/img/serviceSecond/serviceSecond.jpg" alt="Shape">
<div class="container banner-container">
<div class="row banner-height">
<section class="rel rpt-150 rpb-0 text-left" >
<div class="container">
<div class="row banner-height pt-90 pb-90">
<div class="banner-introduction color-white col-lg-6">
<h2 class="intro-title color-white">{{maintenanceData.title}}</h2>
<span class="intro-intro">{{maintenanceData.introduction}}</span>
</div>
</div>
</div>
<div class="intro-Con"></div>
</section>
<section class="intro-tab">
<div class="container">
<ul class="intro-tab-container nav nav-pills">
<li class="col-lg-2" v-for="(item,index) in maintenanceData.data" :key="item">
<span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span>
<ul class="intro-tab-container">
<li class="tab-item-li" v-for="(item,index) in maintenanceData.data" :key="item">
<span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
</li>
</ul>
</div>
... ...
... ... @@ -26,29 +26,6 @@ export default {
setcharacter();
//优势hover高亮显示
let characterActive=Vue.ref(0);
//页签点击跳转到对应的目标
let goItemType=(type)=>{
let top=$("[data-type='"+type+"']").offset().top;
let total=top-100;
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;
}
})()
}
//特点的事件
let prev=(dataLength)=>{
if(characterActive.value>0){
... ... @@ -161,7 +138,6 @@ export default {
tabActive,
characterActive,
setcharacter,
goItemType,
prev,
next,
changeCharacter,
... ...
... ... @@ -5,23 +5,22 @@
</section>
<section class="intro-Con rel rpt-150 rpb-0 text-left" >
<img src="assets/img/serviceSecond/serviceSecond.jpg" alt="Shape">
<div class="container banner-container">
<div class="row banner-height">
<section class="rel rpt-150 rpb-0 text-left" >
<div class="container">
<div class="row banner-height pt-90 pb-90">
<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>
<div class="intro-Con"></div>
</section>
<section class="intro-tab">
<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>
<ul class="intro-tab-container">
<li class="tab-item-li" v-for="(item,index) in securityLogData.data" :key="item">
<span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
</li>
</ul>
</div>
... ...
... ... @@ -52,28 +52,6 @@ export default {
let hideHover=()=>{
setcharacter();
}
//页签点击跳转到对应的目标
let goItemType=(type)=>{
let top=$("[data-type='"+type+"']").offset().top;
let total=top-100;
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;
}
})()
}
//特点的事件
let prev=(dataLength)=>{
if(characterActive.value>0){
... ... @@ -137,7 +115,6 @@ export default {
showHover,
hideHover,
setcharacter,
goItemType,
valueContent,
valueIcon,
valueIndex,
... ...
... ... @@ -28,7 +28,7 @@
<div class="col-lg-6 order-lg-2">
<div class="service-right-content mt-50 ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow">
<div class="section-title style-three mb-15">
<span class="sub-title">综合告警智能算法平台</span>
<span class="sub-title cursor-pointer" @click="jumpSecond('alarm')">综合告警智能算法平台</span>
</div>
<p>
能快速接入各类告警信息，通过告警算法自动去重、规则压缩、算法降噪，实现告警降噪，避免告警风暴，更快响应告警，提升告警管理能力
... ... @@ -41,7 +41,7 @@
</ol>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-6" @click="jumpSecond('alarm')">
<div class="service-left-image wow customFadeInLeft delay-0-1s slow">
<img src="assets/img/services/p1.png" style="border-radius: 10px;">
</div>
... ... @@ -57,7 +57,7 @@
<div class="col-lg-6">
<div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow">
<div class="section-title style-three mb-15">
<span class="sub-title">综合监控管理A-view</span>
<span class="sub-title cursor-pointer" @click="jumpSecond('Aview')">综合监控管理A-view</span>
</div>
<p>全方位监控应用/平台资源/基础设施，基于IT资源图谱，洞察问题根因，随时掌握业务健康状况，快速定位故障，保持IT业务良性、稳定和长效发展</p>
<ol>
... ... @@ -68,7 +68,7 @@
</ol>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-6" @click="jumpSecond('Aview')">
<div class="service-right-image wow customFadeInRight delay-0-1s slow">
<img src="assets/img/services/p2.png" style="border-radius: 10px;">
</div>
... ... @@ -85,7 +85,7 @@
<div class="col-lg-6 order-lg-2">
<div class="service-right-content ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow">
<div class="section-title style-three mb-15">
<span class="sub-title">CMDB资产管理</span>
<span class="sub-title cursor-pointer" @click="jumpSecond('cmdb')">CMDB资产管理</span>
</div>
<p>建立以应用为中心的资源 管理模型，促进资产到资源的转变</p>
<ol>
... ... @@ -96,7 +96,7 @@
</ol>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-6" @click="jumpSecond('cmdb')">
<div class="service-left-image wow customFadeInLeft delay-0-1s slow">
<img src="assets/img/services/p3.png" style="border-radius: 10px;">
</div>
... ... @@ -112,7 +112,7 @@
<div class="col-lg-6">
<div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow">
<div class="section-title style-three mb-15">
<span class="sub-title">业务及应用综合分析平台</span>
<span class="sub-title cursor-pointer" @click="jumpSecond('businessApp')">业务及应用综合分析平台</span>
</div>
<p>全新的端到端，全链路的应用性能管理平台，对业务性能问题进行快速发现，帮助用户有效地降低 MTTR、 提升IT部门对业务和用户体验的把控</p>
<ol>
... ... @@ -123,7 +123,7 @@
</ol>
</div>
</div>
<div class="col-lg-6" @click="jumpSecond('business')">
<div class="col-lg-6" @click="jumpSecond('businessApp')">
<div class="service-right-image wow customFadeInRight delay-0-1s slow">
<img src="assets/img/services/p4.png" style="border-radius: 10px;">
</div>
... ... @@ -139,7 +139,7 @@
<div class="col-lg-6 order-lg-2">
<div class="service-right-content ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow">
<div class="section-title style-three mb-15">
<span class="sub-title">日志综合智能分析平台</span>
<span class="sub-title cursor-pointer" @click="jumpSecond('securityLog')">日志综合智能分析平台</span>
</div>
<p>通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。</p>
<ol>
... ... @@ -150,7 +150,7 @@
</ol>
</div>
</div>
<div class="col-lg-6" @click="jumpSecond('log')">
<div class="col-lg-6" @click="jumpSecond('securityLog')">
<div class="service-left-image wow customFadeInLeft delay-0-1s slow">
<img src="assets/img/services/p5.png" style="border-radius: 10px;">
</div>
... ... @@ -166,7 +166,7 @@
<div class="col-lg-6">
<div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow">
<div class="section-title style-three mb-15">
<span class="sub-title">信息化协同管理支撑平台</span>
<span class="sub-title cursor-pointer" @click="jumpSecond('information')">信息化协同管理支撑平台</span>
</div>
<p>
基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。
... ... @@ -179,7 +179,7 @@
</ol>
</div>
</div>
<div class="col-lg-6" @click="jumpSecond('info')">
<div class="col-lg-6" @click="jumpSecond('information')">
<div class="service-right-image wow customFadeInRight delay-0-1s slow">
<img src="assets/img/services/p6.png" style="border-radius: 10px;">
</div>
... ... @@ -195,7 +195,7 @@
<div class="service-right-content mt-50 ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow">
<div class="section-title style-three mb-15">
<span class="sub-title">魔镜智能运维管理一体机</span>
<span class="sub-title cursor-pointer" @click="jumpSecond('maintenance')">魔镜智能运维管理一体机</span>
</div>
<p>数据中心已有的各类运维数据，包括业务指标数据、机器指标数据、各类监控工具的告警数据，建立涵盖数据管理、 故障发现、故障定位和故障预警的综合运维体系。</p>
<ol>
... ... @@ -221,7 +221,7 @@
<div class="col-lg-6">
<div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow">
<div class="section-title style-three mb-15">
<span class="sub-title">魔镜智能多云运维平台</span>
<span class="sub-title cursor-pointer" @click="jumpSecond('cloud')">魔镜智能多云运维平台</span>
</div>
<p>
基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。
... ... @@ -234,7 +234,7 @@
</ol>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-6" @click="jumpSecond('cloud')">
<div class="service-right-image wow customFadeInRight delay-0-1s slow">
<img src="assets/img/services/p8.png" style="border-radius: 10px;">
</div>
... ...
... ... @@ -8,7 +8,7 @@ export default {
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let jumpSecond=(type)=>{
if(type=='info'){
/* if(type=='info'){
proxy.$router.push({path:'/services/information'})
}else if(type == 'log'){
proxy.$router.push({path:'/services/securityLog'})
... ... @@ -16,7 +16,9 @@ export default {
proxy.$router.push({path:'/services/businessApp'})
}else if(type == 'maintenance'){
proxy.$router.push({path:'/services/maintenance'})
}
}*/
proxy.$router.push({path:'/services/'+type})
}
return {
jumpSecond
... ...