monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 78844c01a8c65683899d7ec708b8f5a273790cf5 2 parents d19cdf47 e66fcc3a

Merge branch 'master-500-dev-lushangqing' into 'master-500-dev' 

【无】门户网站二级页面-业务及应用综合分析平台（剩余80%）



See merge request !976
Inline Side-by-side
Showing 35 changed files with 402 additions and 30 deletions
... ... @@ -1972,6 +1972,8 @@ blockquote:before {
border:1px solid rgba(204,204,204,.1);
box-shadow: 0 0 20px rgba(204,204,204,.8);
min-height: 116px;
display: flex;
align-items: center;
}
.iconCharacter{
cursor: pointer;
... ... @@ -2020,3 +2022,39 @@ blockquote:before {
.div-hide{
display:none;
}
.row-top{
width:100%;
}
.value-char{
display: flex;
align-items: center;
justify-content: space-around;
flex:1;
}
.value-char li{
display: flex;
align-items: center;
justify-content: center;
}
.list-style-li{
padding:5px;
font-size: 14px;
}
.list-style{
width: 8px;
height:8px;
border-radius: 50%;
background-color: #cccccc;
margin-right:10px;
display: inline-block;
}
.info-icon{
display:flex;
justify-content: space-between;
}
.pd-40{
padding:40px;
}
.pd-20{
}
... ...
... ... @@ -176,4 +176,97 @@ export function securityLog() {
}
return res
}
export function businessApp () {
let res={
title:'业务及应用综合分析平台',
introduction:'魔镜APM基于实时的多语言应用探针全量采集技术，全方位 保障系统的可用性与性能表现，帮助企业有效地降低MTTR、 提升幵发运维效率、改善用户体验。',
data:[
{
title:'产品信息',
subTitle:'随时掌握应用性能对业务的影响',
introduction:'魔镜APM基于实时的多语言应用探针全量采集技术，全方位 保障系统的可用性与性能表现，帮助企业有效地降低MTTR、 提升幵发运维效率、改善用户体验。',
type:'info',
subImg:'assets/img/serviceSecond/businessApp/info.png',
dataIcon:[
{icon:'assets/img/serviceSecond/businessApp/info-icon-1.png'},
{icon:'assets/img/serviceSecond/businessApp/info-icon-2.png'},
{icon:'assets/img/serviceSecond/businessApp/info-icon-3.png'},
{icon:'assets/img/serviceSecond/businessApp/info-icon-4.png'},
]
},
{
title:'APM能力展示',
introduction:'',
dataApm:[
{
img:'assets/img/serviceSecond/businessApp/apm-1.png',
title:'智能分析',
introData:[
'基于AIOps技术智能分析事务问题根因','基于异常检则算法和动态基线进行智能警报','异常和错误支持根因分析','指标相关性分析帮助缩小排查范围'
]
},
{
img:'assets/img/serviceSecond/businessApp/apm-2.png',
title:'代码级诊断',
introData:[
'深入代码到每一行，缩短性能问题定位流 程，节省宝贵的开发时间','提供详细的代码堆栈','自动化的实时诊断，同时支持自定义嵌码'
]
},
{
img:'assets/img/serviceSecond/businessApp/apm-3.png',
title:'调用链追踪',
introData:[
'无限层级追踪调用链','快速定位性能瓶颈','丰富的追踪上下文信息','支持异步调用追踪'
]
},
{
img:'assets/img/serviceSecond/businessApp/apm-4.png',
title:'微服务治理',
introData:[
'梳理微服务依赖关系','跨平台、多语言、多协议、多框架','实时监控业务的健康度','批量部署，自动发现'
]
}
],
type:'APM'
},
{
title:'核心优势',
introduction:'',
dataFive:[
{
title:'全量数据采集',
introduction:'',
introData:['100%真全量的性能追踪和业务数据采集','轻量级应用内探针，基本不损耗性能','探针熔断技术，保护应用进程'],
icon:'assets/img/serviceSecond/businessApp/advantage-1-gray.png',
iconA:'assets/img/serviceSecond/businessApp/advantage-1.png'
},
{
title:'分层级展示调用关系拓扑',
introduction:'',
introData:['展示复杂的服务依赖和业务调用关系','面向大规模的分布式的微服务业务系统','自动发现、自动关联、实时刷新'],
icon:'assets/img/serviceSecond/businessApp/advantage-2-gray.png',
iconA:'assets/img/serviceSecond/businessApp/advantage-2.png'
},
{
title:'业务关联性能',
introduction:'',
introData:['灵活增加数据项采集，无需修改代码，无需重启应用','支持自定义指标,实现业务指标实时监控','业务指标和性能指标可对比分析'],
icon:'assets/img/serviceSecond/businessApp/advantage-3-gray.png',
iconA:'assets/img/serviceSecond/businessApp/advantage-3.png',
},
{
title:'大数据处理能力',
introduction:'',
introData:['可对每一个用户的每次请求进行监控采集','加入Flume、Druids hadoop等大数据流式处理组件，提升数据处理能力','适配于微服务架构，提供全量用户追踪溯源微服务调用链追踪和业务监控分析'],
icon:'assets/img/serviceSecond/businessApp/advantage-4-gray.png',
iconA:'assets/img/serviceSecond/businessApp/advantage-4.png'
}
],
type:'value'
},
]
}
return res
}
\ No newline at end of file
... ...
... ... @@ -31,6 +31,12 @@ const routes = [
name: 'securityLog',
component: () => myImport('views/serviceSecond/securityLog/index')
},
//业务及应用综合分析平台
{
path: '/services/businessApp',
name: 'businessApp',
component: () => myImport('views/serviceSecond/businessApp/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="container banner-container">
<div class="row banner-height">
<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>
</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>
</li>
</ul>
</div>
</section>
<section :class="['info-container', 'rel', 'pt-55',{'info-container-bg':item.type=='character'}]" v-for="(item,index) in businessAppData.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.subTitle">{{item.introduction}}</div>
<div class="row" v-if="item.subTitle">
<div class="col-lg-6 pd-40">
<h4>{{item.subTitle}}</h4>
<div class="info-character-intro pt-20">{{item.introduction}}</div>
<div class="info-icon pt-30" v-if="item.dataIcon && item.dataIcon.length>0">
<div class="info-icon-item" v-for="itemI in item.dataIcon">
<img :src="itemI.icon" alt="">
</div>
</div>
</div>
<div class="col-lg-6 pd-40 text-center">
<img :src="item.subImg" alt="">
</div>
</div>
<div class="row pt-30 pd-40" v-if="item.dataApm && item.dataApm.length>0">
<div class="col-lg-6 pd-40" v-for="(itemA,indexA) in item.dataApm">
<div class="div-img text-center">
<img :src="itemA.img" alt="">
</div>
<ul :class="[{'row':indexA>=2}, {'flex-column-center':indexA<2} ,'pt-30']" v-if="valueContent && itemA.introData.length>0">
<li :class="['list-style-li',{'col-lg-6':indexA>=2}]" v-for="(itemV,indexV) in itemA.introData"><i class="list-style"></i>{{itemV}}</li>
</ul>
</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.dataFour && item.dataFour.length>0">
<div class="row-top row" v-for="(itemC,indexC) in item.dataFour" >
<div class="col-lg-6" v-if="indexC==characterActive">
<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 pt-30">
<i class="iconCharacter icon-left" @click="prev(item.dataFour.length)"></i>
<div class="dot-container row">
<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" @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 pt-50">
<div class="col-lg-3 info-character" @mouseover="showHover(indexV)" 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">
<h5 class="text-center height-50">{{itemV.title}}</h5>
<div class="height-40">
<div class="border-div" v-if="valueIndex==indexV"></div>
</div>
</div>
</div>
</div>
<div class="value-row-bottom pt-20">
<ul class="value-char" v-if="valueContent && valueContent.length>0">
<li v-for="itemV in valueContent"><i class="list-style"></i>{{itemV}}</li>
</ul>
</div>
</div>
</div>
</section>
... ...
import pageInit from "../../../minixs/pageInit.js";
import {businessApp} from "../../../../assets/img/data/serviceSecond.js";
export default {
name: 'businessApp',
template: '',
mixins:[pageInit],
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
let businessAppData=businessApp();
//页签高亮显示
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(businessAppData.data && businessAppData.data.length>0){
businessAppData.data.map(item=>{
if(item.type=='character'){
characterImg.value=item.dataFour[0].img;
}
if(item.type == 'value'){
valueContent.value=item.dataFive[0].introData;
valueIcon.value=item.dataFive[0].iconA;
}
})
}
}
setcharacter();
//优势hover高亮显示
let characterActive=Vue.ref(0);
//特点是否显示
let isMouseover=Vue.ref(false);
//优势鼠标移入事件
let showHover=(indexA)=>{
valueIndex.value=indexA;
if(businessAppData.data && businessAppData.data.length>0){
businessAppData.data.map(item=>{
if(item.type == 'value'){
valueContent.value=item.dataFive[indexA].introData;
valueIcon.value=item.dataFive[indexA].iconA;
}
})
}
}
//优势鼠标移出事件
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){
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(businessAppData.data && businessAppData.data.length>0){
businessAppData.data.map((item,index)=>{
if(item.type == 'character'){
item.dataFour[characterActive.value-3].isDisplay=false;
}
})
}
}else{
setDisplay();
}
}
//设置特点dot全部显示
let setDisplay=()=>{
if(businessAppData.data && businessAppData.data.length>0){
businessAppData.data.map((item,index)=>{
if(item.type == 'character'){
item.dataFour.map(v=>{
v.isDisplay=true;
})
}
})
}
}
// 挂载完
Vue.onMounted(() => {
})
return {
characterImg,
businessAppData,
tabActive,
characterActive,
isMouseover,
showHover,
hideHover,
setcharacter,
goItemType,
valueContent,
valueIcon,
valueIndex,
prev,
next,
changeCharacter,
changeDot,
setDisplay
}
}
}
... ...
... ... @@ -28,7 +28,7 @@
</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">
<section :class="['info-container', 'rel', {'mb-70':item.type=='system'}, '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>
... ... @@ -43,32 +43,6 @@
<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">
<div class="row-top row" v-for="(itemC,indexC) in item.dataFour" >
<div class="col-lg-6" v-if="indexC==characterActive">
... ... @@ -92,11 +66,11 @@
</div>
<div class="row pt-30" v-if="item.dataFive && item.dataFive.length>0">
<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">
<div class="col-lg-3 info-character" @mouseover="showHover(indexV)" 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>
<h5 class="text-center height-50">{{itemV.title}}</h5>
<div class="height-40">
<div class="border-div" v-if="valueIndex==indexV"></div>
</div>
... ...
... ... @@ -123,7 +123,7 @@
</ol>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-6" @click="jumpSecond('business')">
<div class="service-right-image wow customFadeInRight delay-0-1s slow">
<img src="assets/img/services/p4.png" style="border-radius: 10px;">
</div>
... ...
... ... @@ -12,6 +12,8 @@ export default {
proxy.$router.push({path:'/services/information'})
}else if(type == 'log'){
proxy.$router.push({path:'/services/securityLog'})
}else if(type == 'business'){
proxy.$router.push({path:'/services/businessApp'})
}
}
return {
... ...