monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit e813b15634bd5a30bf99f1fe67b3a1df9677830e 1 parent 5ace8bef

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

Inline Side-by-side
Showing 30 changed files with 402 additions and 30 deletions
@@ -1972,6 +1972,8 @@ blockquote:before { @@ -1972,6 +1972,8 @@ blockquote:before {
1972 border:1px solid rgba(204,204,204,.1); 1972 border:1px solid rgba(204,204,204,.1);
1973 box-shadow: 0 0 20px rgba(204,204,204,.8); 1973 box-shadow: 0 0 20px rgba(204,204,204,.8);
1974 min-height: 116px; 1974 min-height: 116px;
  1975 + display: flex;
  1976 + align-items: center;
1975 } 1977 }
1976 .iconCharacter{ 1978 .iconCharacter{
1977 cursor: pointer; 1979 cursor: pointer;
@@ -2020,3 +2022,39 @@ blockquote:before { @@ -2020,3 +2022,39 @@ blockquote:before {
2020 .div-hide{ 2022 .div-hide{
2021 display:none; 2023 display:none;
2022 } 2024 }
  2025 +.row-top{
  2026 + width:100%;
  2027 +}
  2028 +.value-char{
  2029 + display: flex;
  2030 + align-items: center;
  2031 + justify-content: space-around;
  2032 + flex:1;
  2033 +}
  2034 +.value-char li{
  2035 + display: flex;
  2036 + align-items: center;
  2037 + justify-content: center;
  2038 +}
  2039 +.list-style-li{
  2040 + padding:5px;
  2041 + font-size: 14px;
  2042 +}
  2043 +.list-style{
  2044 + width: 8px;
  2045 + height:8px;
  2046 + border-radius: 50%;
  2047 + background-color: #cccccc;
  2048 + margin-right:10px;
  2049 + display: inline-block;
  2050 +}
  2051 +.info-icon{
  2052 + display:flex;
  2053 + justify-content: space-between;
  2054 +}
  2055 +.pd-40{
  2056 + padding:40px;
  2057 +}
  2058 +.pd-20{
  2059 +
  2060 +}
@@ -176,4 +176,97 @@ export function securityLog() { @@ -176,4 +176,97 @@ export function securityLog() {
176 } 176 }
177 177
178 return res 178 return res
  179 +}
  180 +export function businessApp () {
  181 + let res={
  182 + title:'业务及应用综合分析平台',
  183 + introduction:'魔镜APM基于实时的多语言应用探针全量采集技术，全方位 保障系统的可用性与性能表现，帮助企业有效地降低MTTR、 提升幵发运维效率、改善用户体验。',
  184 + data:[
  185 + {
  186 + title:'产品信息',
  187 + subTitle:'随时掌握应用性能对业务的影响',
  188 + introduction:'魔镜APM基于实时的多语言应用探针全量采集技术，全方位 保障系统的可用性与性能表现，帮助企业有效地降低MTTR、 提升幵发运维效率、改善用户体验。',
  189 + type:'info',
  190 + subImg:'assets/img/serviceSecond/businessApp/info.png',
  191 + dataIcon:[
  192 + {icon:'assets/img/serviceSecond/businessApp/info-icon-1.png'},
  193 + {icon:'assets/img/serviceSecond/businessApp/info-icon-2.png'},
  194 + {icon:'assets/img/serviceSecond/businessApp/info-icon-3.png'},
  195 + {icon:'assets/img/serviceSecond/businessApp/info-icon-4.png'},
  196 + ]
  197 + },
  198 + {
  199 + title:'APM能力展示',
  200 + introduction:'',
  201 + dataApm:[
  202 + {
  203 + img:'assets/img/serviceSecond/businessApp/apm-1.png',
  204 + title:'智能分析',
  205 + introData:[
  206 + '基于AIOps技术智能分析事务问题根因','基于异常检则算法和动态基线进行智能警报','异常和错误支持根因分析','指标相关性分析帮助缩小排查范围'
  207 + ]
  208 + },
  209 + {
  210 + img:'assets/img/serviceSecond/businessApp/apm-2.png',
  211 + title:'代码级诊断',
  212 + introData:[
  213 + '深入代码到每一行，缩短性能问题定位流 程，节省宝贵的开发时间','提供详细的代码堆栈','自动化的实时诊断，同时支持自定义嵌码'
  214 + ]
  215 + },
  216 + {
  217 + img:'assets/img/serviceSecond/businessApp/apm-3.png',
  218 + title:'调用链追踪',
  219 + introData:[
  220 + '无限层级追踪调用链','快速定位性能瓶颈','丰富的追踪上下文信息','支持异步调用追踪'
  221 + ]
  222 + },
  223 + {
  224 + img:'assets/img/serviceSecond/businessApp/apm-4.png',
  225 + title:'微服务治理',
  226 + introData:[
  227 + '梳理微服务依赖关系','跨平台、多语言、多协议、多框架','实时监控业务的健康度','批量部署，自动发现'
  228 + ]
  229 + }
  230 + ],
  231 + type:'APM'
  232 + },
  233 + {
  234 + title:'核心优势',
  235 + introduction:'',
  236 + dataFive:[
  237 + {
  238 + title:'全量数据采集',
  239 + introduction:'',
  240 + introData:['100%真全量的性能追踪和业务数据采集','轻量级应用内探针，基本不损耗性能','探针熔断技术，保护应用进程'],
  241 + icon:'assets/img/serviceSecond/businessApp/advantage-1-gray.png',
  242 + iconA:'assets/img/serviceSecond/businessApp/advantage-1.png'
  243 + },
  244 + {
  245 + title:'分层级展示调用关系拓扑',
  246 + introduction:'',
  247 + introData:['展示复杂的服务依赖和业务调用关系','面向大规模的分布式的微服务业务系统','自动发现、自动关联、实时刷新'],
  248 + icon:'assets/img/serviceSecond/businessApp/advantage-2-gray.png',
  249 + iconA:'assets/img/serviceSecond/businessApp/advantage-2.png'
  250 + },
  251 + {
  252 + title:'业务关联性能',
  253 + introduction:'',
  254 + introData:['灵活增加数据项采集，无需修改代码，无需重启应用','支持自定义指标,实现业务指标实时监控','业务指标和性能指标可对比分析'],
  255 + icon:'assets/img/serviceSecond/businessApp/advantage-3-gray.png',
  256 + iconA:'assets/img/serviceSecond/businessApp/advantage-3.png',
  257 + },
  258 + {
  259 + title:'大数据处理能力',
  260 + introduction:'',
  261 + introData:['可对每一个用户的每次请求进行监控采集','加入Flume、Druids hadoop等大数据流式处理组件，提升数据处理能力','适配于微服务架构，提供全量用户追踪溯源微服务调用链追踪和业务监控分析'],
  262 + icon:'assets/img/serviceSecond/businessApp/advantage-4-gray.png',
  263 + iconA:'assets/img/serviceSecond/businessApp/advantage-4.png'
  264 + }
  265 + ],
  266 + type:'value'
  267 + },
  268 + ]
  269 + }
  270 +
  271 + return res
179 } 272 }
@@ -31,6 +31,12 @@ const routes = [ @@ -31,6 +31,12 @@ const routes = [
31 name: 'securityLog', 31 name: 'securityLog',
32 component: () => myImport('views/serviceSecond/securityLog/index') 32 component: () => myImport('views/serviceSecond/securityLog/index')
33 }, 33 },
  34 + //业务及应用综合分析平台
  35 + {
  36 + path: '/services/businessApp',
  37 + name: 'businessApp',
  38 + component: () => myImport('views/serviceSecond/businessApp/index')
  39 + },
34 ]; 40 ];
35 41
36 const router = VueRouter.createRouter({ 42 const router = VueRouter.createRouter({
  1 +<section class="hero-section rel rpt-150 pb-130 rpb-0">
  2 + <div class="shape shapeAnimationOne l-10 t-60">
  3 + <img src="assets/img/shapes/shape1.png" alt="Shape">
  4 + </div>
  5 +</section>
  6 +
  7 +
  8 +<section class="intro-Con rel rpt-150 rpb-0 text-left" >
  9 + <img src="assets/img/serviceSecond/serviceSecond.jpg" alt="Shape">
  10 + <div class="container banner-container">
  11 + <div class="row banner-height">
  12 + <div class="banner-introduction color-white col-lg-6">
  13 + <h2 class="intro-title color-white">{{businessAppData.title}}</h2>
  14 + <span class="intro-intro">{{businessAppData.introduction}}</span>
  15 + </div>
  16 + </div>
  17 + </div>
  18 +
  19 +</section>
  20 +<section class="intro-tab">
  21 + <div class="container">
  22 + <ul class="intro-tab-container nav nav-pills">
  23 + <li class="col-lg-2" v-for="(item,index) in businessAppData.data" :key="item">
  24 + <span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span>
  25 + </li>
  26 + </ul>
  27 + </div>
  28 +</section>
  29 +
  30 +
  31 +<section :class="['info-container', 'rel', 'pt-55',{'info-container-bg':item.type=='character'}]" v-for="(item,index) in businessAppData.data" :key="item">
  32 + <div class="div-type" :data-type="item.type"></div>
  33 + <div class="container">
  34 + <h3 class="info-title">{{item.title}}</h3>
  35 + <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>
  36 + <div class="row" v-if="item.subTitle">
  37 + <div class="col-lg-6 pd-40">
  38 + <h4>{{item.subTitle}}</h4>
  39 + <div class="info-character-intro pt-20">{{item.introduction}}</div>
  40 + <div class="info-icon pt-30" v-if="item.dataIcon && item.dataIcon.length>0">
  41 + <div class="info-icon-item" v-for="itemI in item.dataIcon">
  42 + <img :src="itemI.icon" alt="">
  43 + </div>
  44 + </div>
  45 + </div>
  46 + <div class="col-lg-6 pd-40 text-center">
  47 + <img :src="item.subImg" alt="">
  48 + </div>
  49 + </div>
  50 + <div class="row pt-30 pd-40" v-if="item.dataApm && item.dataApm.length>0">
  51 + <div class="col-lg-6 pd-40" v-for="(itemA,indexA) in item.dataApm">
  52 + <div class="div-img text-center">
  53 + <img :src="itemA.img" alt="">
  54 + </div>
  55 + <ul :class="[{'row':indexA>=2}, {'flex-column-center':indexA<2} ,'pt-30']" v-if="valueContent && itemA.introData.length>0">
  56 + <li :class="['list-style-li',{'col-lg-6':indexA>=2}]" v-for="(itemV,indexV) in itemA.introData"><i class="list-style"></i>{{itemV}}</li>
  57 + </ul>
  58 + </div>
  59 + </div>
  60 + <div class="info-system pt-30" v-if="item.img">
  61 + <img :src="item.img" alt="">
  62 + </div>
  63 + <div class="row pt-30" v-if="item.dataFour && item.dataFour.length>0">
  64 + <div class="row-top row" v-for="(itemC,indexC) in item.dataFour" >
  65 + <div class="col-lg-6" v-if="indexC==characterActive">
  66 + <img class="" :src="itemC.img" alt="">
  67 + </div>
  68 + <div class="col-lg-6 flex-column-center " v-if="indexC==characterActive">
  69 + <h3>{{itemC.title}}</h3>
  70 + <div class="pt-30">{{itemC.introduction}}</div>
  71 + </div>
  72 + </div>
  73 + <div class="row-bottom row pt-30">
  74 + <i class="iconCharacter icon-left" @click="prev(item.dataFour.length)"></i>
  75 + <div class="dot-container row">
  76 + <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">
  77 + <div class="dot-item-title" v-if="itemC.isDisplay">{{itemC.title}}</div>
  78 + <div class="dot-item-intro" v-if="itemC.isDisplay">{{itemC.introduction}}</div>
  79 + </div>
  80 + </div>
  81 + <i class="iconCharacter icon-right" @click="next(item.dataFour.length)"></i>
  82 + </div>
  83 + </div>
  84 + <div class="row pt-30" v-if="item.dataFive && item.dataFive.length>0">
  85 + <div class="row-top row pt-50">
  86 + <div class="col-lg-3 info-character" @mouseover="showHover(indexV)" v-for="(itemV,indexV) in item.dataFive">
  87 + <img v-if="valueIndex!=indexV" class="" :src="itemV.icon" alt="">
  88 + <img v-if="valueIndex==indexV" class="" :src="itemV.iconA" alt="">
  89 + <div class="pt-30">
  90 + <h5 class="text-center height-50">{{itemV.title}}</h5>
  91 + <div class="height-40">
  92 + <div class="border-div" v-if="valueIndex==indexV"></div>
  93 + </div>
  94 + </div>
  95 + </div>
  96 + </div>
  97 + <div class="value-row-bottom pt-20">
  98 + <ul class="value-char" v-if="valueContent && valueContent.length>0">
  99 + <li v-for="itemV in valueContent"><i class="list-style"></i>{{itemV}}</li>
  100 + </ul>
  101 + </div>
  102 + </div>
  103 + </div>
  104 +</section>
  105 +
  106 +
  107 +
  1 +import pageInit from "../../../minixs/pageInit.js";
  2 +import {businessApp} from "../../../../assets/img/data/serviceSecond.js";
  3 +export default {
  4 + name: 'businessApp',
  5 + template: '',
  6 + mixins:[pageInit],
  7 + components: {},
  8 + props: [],
  9 + setup(props, {attrs, slots, emit}) {
  10 + let businessAppData=businessApp();
  11 + //页签高亮显示
  12 + let tabActive=Vue.ref(0);
  13 + //价值的简介
  14 + let valueContent=Vue.ref();
  15 + //价值的hover显示的图标
  16 + let valueIcon=Vue.ref();
  17 + //价值的hover显示
  18 + let valueIndex=Vue.ref(0);
  19 + //特点hover显示的图片
  20 + let characterImg=Vue.ref();
  21 + let setcharacter=()=>{
  22 + if(businessAppData.data && businessAppData.data.length>0){
  23 + businessAppData.data.map(item=>{
  24 + if(item.type=='character'){
  25 + characterImg.value=item.dataFour[0].img;
  26 + }
  27 + if(item.type == 'value'){
  28 + valueContent.value=item.dataFive[0].introData;
  29 + valueIcon.value=item.dataFive[0].iconA;
  30 + }
  31 + })
  32 + }
  33 + }
  34 + setcharacter();
  35 + //优势hover高亮显示
  36 + let characterActive=Vue.ref(0);
  37 + //特点是否显示
  38 + let isMouseover=Vue.ref(false);
  39 + //优势鼠标移入事件
  40 + let showHover=(indexA)=>{
  41 + valueIndex.value=indexA;
  42 + if(businessAppData.data && businessAppData.data.length>0){
  43 + businessAppData.data.map(item=>{
  44 + if(item.type == 'value'){
  45 + valueContent.value=item.dataFive[indexA].introData;
  46 + valueIcon.value=item.dataFive[indexA].iconA;
  47 + }
  48 + })
  49 + }
  50 + }
  51 + //优势鼠标移出事件
  52 + let hideHover=()=>{
  53 + setcharacter();
  54 + }
  55 + //页签点击跳转到对应的目标
  56 + let goItemType=(type)=>{
  57 + let top=$("[data-type='"+type+"']").offset().top;
  58 + let total=top-100;
  59 + let distance = document.documentElement.scrollTop || document.body.scrollTop
  60 + //计算每一小段的距离
  61 + let step=total/6;
  62 + (function smoothDown (){
  63 + if(distance < total){
  64 + distance += step;
  65 + //移动一小段
  66 + document.body.scrollTop =distance;
  67 + document.documentElement.scrollTop = distance;
  68 + //设定每一次跳到的时间间隔为10ms
  69 + setTimeout(smoothDown,10)
  70 + }else{
  71 + //限制股东停止的距离
  72 + document.body.scrollTop = total;
  73 + document.documentElement.scrollTop = total;
  74 + }
  75 + })()
  76 + }
  77 + //特点的事件
  78 + let prev=(dataLength)=>{
  79 + if(characterActive.value>0){
  80 + characterActive.value--
  81 + if(characterActive.value == 0){
  82 + setDisplay();
  83 + }
  84 + }else if(characterActive.value == 0){
  85 + characterActive.value=dataLength-1
  86 + changeDot(dataLength);
  87 + }
  88 + }
  89 + let next=(dataLength)=>{
  90 + if((characterActive.value+1)!=dataLength) {
  91 + characterActive.value++
  92 + }else{
  93 + characterActive.value=0;
  94 + }
  95 + changeDot(dataLength);
  96 + }
  97 + let changeCharacter=(indexC)=>{
  98 + characterActive.value=indexC;
  99 + }
  100 + //特点左右点击切换
  101 + let changeDot=(dataLength)=>{
  102 + if(characterActive.value>2 && characterActive.value<dataLength){
  103 + if(businessAppData.data && businessAppData.data.length>0){
  104 + businessAppData.data.map((item,index)=>{
  105 + if(item.type == 'character'){
  106 + item.dataFour[characterActive.value-3].isDisplay=false;
  107 + }
  108 + })
  109 + }
  110 + }else{
  111 + setDisplay();
  112 + }
  113 + }
  114 + //设置特点dot全部显示
  115 + let setDisplay=()=>{
  116 + if(businessAppData.data && businessAppData.data.length>0){
  117 + businessAppData.data.map((item,index)=>{
  118 + if(item.type == 'character'){
  119 + item.dataFour.map(v=>{
  120 + v.isDisplay=true;
  121 + })
  122 + }
  123 + })
  124 + }
  125 + }
  126 + // 挂载完
  127 + Vue.onMounted(() => {
  128 +
  129 + })
  130 +
  131 + return {
  132 + characterImg,
  133 + businessAppData,
  134 + tabActive,
  135 + characterActive,
  136 + isMouseover,
  137 + showHover,
  138 + hideHover,
  139 + setcharacter,
  140 + goItemType,
  141 + valueContent,
  142 + valueIcon,
  143 + valueIndex,
  144 + prev,
  145 + next,
  146 + changeCharacter,
  147 + changeDot,
  148 + setDisplay
  149 + }
  150 + }
  151 +
  152 +}
@@ -28,7 +28,7 @@ @@ -28,7 +28,7 @@
28 </section> 28 </section>
29 29
30 30
31 -<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='character'}]" v-for="(item,index) in securityLogData.data" :key="item"> 31 +<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">
32 <div class="div-type" :data-type="item.type"></div> 32 <div class="div-type" :data-type="item.type"></div>
33 <div class="container"> 33 <div class="container">
34 <h3 class="info-title">{{item.title}}</h3> 34 <h3 class="info-title">{{item.title}}</h3>
@@ -43,32 +43,6 @@ @@ -43,32 +43,6 @@
43 <div class="info-system pt-30" v-if="item.img"> 43 <div class="info-system pt-30" v-if="item.img">
44 <img :src="item.img" alt=""> 44 <img :src="item.img" alt="">
45 </div> 45 </div>
46 - <!-- <div class="row pt-30" v-if="item.dataSecond && item.dataSecond.length>0">  
47 - <div class="col-lg-4">  
48 - <div :class="['info-advantage',{'advantage-active':advantageActive==indexA}]" @mouseover="showHover(indexA)" @mouseleave="hideHover" v-for="(itemA,indexA) in item.dataSecond">  
49 - <img class="" :src="itemA.icon" alt="">  
50 - <div :class="['info-advantage-title']">  
51 - <div>{{itemA.title}}</div>  
52 - <div class="advantage-title-intro" v-if="itemA.introduction && advantageActive==indexA && isMouseover">{{itemA.introduction}}</div>  
53 - </div>  
54 - </div>  
55 - </div>  
56 - <div class="col-lg-8">  
57 - <img :src="advantageImg" alt="">  
58 - </div>  
59 - </div>  
60 - <div class="row pt-30" v-if="item.dataThird && item.dataThird.length>0">  
61 - <div class="col-lg-4" v-for="(itemV,indexV) in item.dataThird">  
62 - <div class="info-value" >  
63 - <img class="" :src="itemV.img" alt="">  
64 - <div :class="['info-value-title']">  
65 - <h3>{{itemV.title}}</h3>  
66 - <div>{{itemV.introduction}}</div>  
67 - </div>  
68 - </div>  
69 -  
70 - </div>  
71 - </div>-->  
72 <div class="row pt-30" v-if="item.dataFour && item.dataFour.length>0"> 46 <div class="row pt-30" v-if="item.dataFour && item.dataFour.length>0">
73 <div class="row-top row" v-for="(itemC,indexC) in item.dataFour" > 47 <div class="row-top row" v-for="(itemC,indexC) in item.dataFour" >
74 <div class="col-lg-6" v-if="indexC==characterActive"> 48 <div class="col-lg-6" v-if="indexC==characterActive">
@@ -92,11 +66,11 @@ @@ -92,11 +66,11 @@
92 </div> 66 </div>
93 <div class="row pt-30" v-if="item.dataFive && item.dataFive.length>0"> 67 <div class="row pt-30" v-if="item.dataFive && item.dataFive.length>0">
94 <div class="row-top row pt-50"> 68 <div class="row-top row pt-50">
95 - <div class="col-lg-3 info-character" @mouseover="showHover(indexV)" @mouseleave="hideHover()" v-for="(itemV,indexV) in item.dataFive"> 69 + <div class="col-lg-3 info-character" @mouseover="showHover(indexV)" v-for="(itemV,indexV) in item.dataFive">
96 <img v-if="valueIndex!=indexV" class="" :src="itemV.icon" alt=""> 70 <img v-if="valueIndex!=indexV" class="" :src="itemV.icon" alt="">
97 <img v-if="valueIndex==indexV" class="" :src="itemV.iconA" alt=""> 71 <img v-if="valueIndex==indexV" class="" :src="itemV.iconA" alt="">
98 <div class="pt-30"> 72 <div class="pt-30">
99 - <h4 class="text-center height-50">{{itemV.title}}</h4> 73 + <h5 class="text-center height-50">{{itemV.title}}</h5>
100 <div class="height-40"> 74 <div class="height-40">
101 <div class="border-div" v-if="valueIndex==indexV"></div> 75 <div class="border-div" v-if="valueIndex==indexV"></div>
102 </div> 76 </div>
@@ -123,7 +123,7 @@ @@ -123,7 +123,7 @@
123 </ol> 123 </ol>
124 </div> 124 </div>
125 </div> 125 </div>
126 - <div class="col-lg-6"> 126 + <div class="col-lg-6" @click="jumpSecond('business')">
127 <div class="service-right-image wow customFadeInRight delay-0-1s slow"> 127 <div class="service-right-image wow customFadeInRight delay-0-1s slow">
128 <img src="assets/img/services/p4.png" style="border-radius: 10px;"> 128 <img src="assets/img/services/p4.png" style="border-radius: 10px;">
129 </div> 129 </div>
@@ -12,6 +12,8 @@ export default { @@ -12,6 +12,8 @@ export default {
12 proxy.$router.push({path:'/services/information'}) 12 proxy.$router.push({path:'/services/information'})
13 }else if(type == 'log'){ 13 }else if(type == 'log'){
14 proxy.$router.push({path:'/services/securityLog'}) 14 proxy.$router.push({path:'/services/securityLog'})
  15 + }else if(type == 'business'){
  16 + proxy.$router.push({path:'/services/businessApp'})
15 } 17 }
16 } 18 }
17 return { 19 return {