monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 9794ab7a1a0acfdca5e9905ef839da3c3ace0fdf 2 parents 64179e73 4ca947e2

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

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



See merge request !981
Inline Side-by-side
Showing 31 changed files with 867 additions and 149 deletions
@@ -1834,11 +1834,15 @@ blockquote:before { @@ -1834,11 +1834,15 @@ blockquote:before {
1834 } 1834 }
1835 /*lsq 产品二级页面样式 2022-09-13*/ 1835 /*lsq 产品二级页面样式 2022-09-13*/
1836 .intro-Con{ 1836 .intro-Con{
1837 - /*height:300px;*/  
1838 - /*background-image: url("../img/serviceSecond/serviceSecond.jpg");*/  
1839 - /*background-size: contain;*/  
1840 - /*background-repeat: no-repeat;*/  
1841 - position: relative; 1837 + height:100%;
  1838 + background-image: url("../img/serviceSecond/serviceSecond.jpg");
  1839 + background-repeat: no-repeat;
  1840 + background-size: cover;
  1841 + position: absolute;
  1842 + width: 100%;
  1843 + left: 0;
  1844 + top: 0;
  1845 + z-index: -1;
1842 } 1846 }
1843 .intro-Con img{ 1847 .intro-Con img{
1844 } 1848 }
@@ -1866,6 +1870,7 @@ blockquote:before { @@ -1866,6 +1870,7 @@ blockquote:before {
1866 } 1870 }
1867 .intro-tab-container li{ 1871 .intro-tab-container li{
1868 display: flex; 1872 display: flex;
  1873 + font-size: 15px;
1869 } 1874 }
1870 .intro-tab-container li:first-child{ 1875 .intro-tab-container li:first-child{
1871 padding-left:0; 1876 padding-left:0;
@@ -2119,4 +2124,35 @@ blockquote:before { @@ -2119,4 +2124,35 @@ blockquote:before {
2119 2124
2120 font-weight: bold; 2125 font-weight: bold;
2121 } 2126 }
  2127 +.cursor-pointer{
  2128 + cursor: pointer;
  2129 +}
  2130 +.font-size-14{
  2131 + font-size: 14px;
  2132 +}
  2133 +.font-size-16{
  2134 + font-size: 16px;
  2135 +}
  2136 +.font-weight-bold{
  2137 + font-weight: bold;
  2138 +}
  2139 +.line-height-28{
  2140 + line-height: 28px;
  2141 +}
  2142 +.flex-start-column{
  2143 + justify-content: flex-start;
  2144 +}
  2145 +.system-bg{
  2146 + background: url("../img/serviceSecond/alarm/system-bg.png");
  2147 + background-size: contain;
  2148 + height: 100%;
  2149 +}
  2150 +.tab-item-li{
  2151 + margin-right:80px;
  2152 +}
  2153 +@media (min-width: 992px){
  2154 + .intro-tab-container{
  2155 + display: flex;
  2156 + }
  2157 +}
2122 2158
  1 +//信息化协同管理支撑平台
1 export function Information() { 2 export function Information() {
2 let res={ 3 let res={
3 title:'信息化协同管理支撑平台', 4 title:'信息化协同管理支撑平台',
@@ -94,6 +95,7 @@ export function Information() { @@ -94,6 +95,7 @@ export function Information() {
94 95
95 return res 96 return res
96 } 97 }
  98 +//安全日志分析管理系统
97 export function securityLog() { 99 export function securityLog() {
98 let res={ 100 let res={
99 title:'日志综合智能分析平台', 101 title:'日志综合智能分析平台',
@@ -177,6 +179,7 @@ export function securityLog() { @@ -177,6 +179,7 @@ export function securityLog() {
177 179
178 return res 180 return res
179 } 181 }
  182 +//业务及应用综合分析平台
180 export function businessApp () { 183 export function businessApp () {
181 let res={ 184 let res={
182 title:'业务及应用综合分析平台', 185 title:'业务及应用综合分析平台',
@@ -270,6 +273,7 @@ export function businessApp () { @@ -270,6 +273,7 @@ export function businessApp () {
270 273
271 return res 274 return res
272 } 275 }
  276 +//魔镜智能运维管理一体机
273 export function maintenance() { 277 export function maintenance() {
274 let res={ 278 let res={
275 title:'魔镜智能运维管理一体机', 279 title:'魔镜智能运维管理一体机',
@@ -382,4 +386,359 @@ export function maintenance() { @@ -382,4 +386,359 @@ export function maintenance() {
382 } 386 }
383 387
384 return res 388 return res
  389 +}
  390 +//综合告警智能算法平台
  391 +export function alarm() {
  392 + let res={
  393 + title:'综合告警智能算法平台',
  394 + introduction:'接入各个监控平台的告警与事件，通讨智能算法关联压缩告警数据，帮助识别告警根源，通过自动去重，规则压缩，算法降噪，实现告警降噪，帮助运维团队减少告警，避免告警风暴;同时通过分派、排班、通知等功能，快速实现告警流程化管理，帮助运维团队更快响应告警，以多种方式通知告警到相关人员，全面提升告警管理能力',
  395 + data:[
  396 + {
  397 + title:'产品信息',
  398 + introduction:'接入各个监控平台的告警与事件，通讨智能算法关联压缩告警数据，帮助识别告警根源，通过自动去重，规则压缩，算法降噪，实现告警降噪，帮助运维团队减少告警，避免告警风暴;同时通过分派、排班、通知等功能，快速实现告警流程化管理，帮助运维团队更快响应告警，以多种方式通知告警到相关人员，全面提升告警管理能力',
  399 + type:'info'
  400 + },
  401 + {
  402 + title:'平台架构',
  403 + introduction:'',
  404 + img:'assets/img/serviceSecond/alarm/system.png',
  405 + data:[
  406 + {
  407 + icon:'assets/img/serviceSecond/alarm/system-icon-1.png',
  408 + title:'告警监控',
  409 + introduction:'依托于本身强大的存储和查询分析能力，我们可以支持海量数据的实时查询分析、异构数据的协同分析、跨账号跨地域的协同监控等能力'
  410 + },
  411 + {
  412 + icon:'assets/img/serviceSecond/alarm/system-icon-2.png',
  413 + title:'告警管理',
  414 + introduction:'提供了多种告警降噪能力，包括去重、合并、抑制、静默等'
  415 + },
  416 + {
  417 + icon:'assets/img/serviceSecond/alarm/system-icon-3.png',
  418 + title:'行动管理',
  419 + introduction:'对接了十多种通知渠道，可以快速配置使用，并且提供了非常灵活且强大的动态分派能力'
  420 + },
  421 + {
  422 + icon:'assets/img/serviceSecond/alarm/system-icon-4.png',
  423 + title:'开放告警',
  424 + introduction:'对于数据并未接入的用户，可以通过开放告警的能力，将自建系统或其它云产品的告警接入告警管理系统。从而快速使用的告警管理与行动管理能力。'
  425 + }
  426 + ],
  427 + type:'system'
  428 + },
  429 + {
  430 + title:'告警的全生命周期',
  431 + introduction:'',
  432 + img:'assets/img/serviceSecond/alarm/lifeCycle.png',
  433 + type:'lifeCycle'
  434 + },
  435 + {
  436 + title:'基于业务的告警统一管理',
  437 + introduction:'能够根据业务单元为粒度，统一进行告警的管理以及态势的统计分析。因此我们提供了告警管理中心，以业务为中心进行告警的统一管理每个业务都包含从资源层到事务管理的完整链路。',
  438 + img:'assets/img/serviceSecond/alarm/alarmManage.png',
  439 + type:'alarmManage'
  440 + },
  441 + {
  442 + title:'基于算法的智能合并降噪',
  443 + introduction:'在告警降噪过程中，通过配置适当的合并规则，将具有相似特征的告警合并到同一个分组中，实现批量的通知。例如可以设置将相同应用的告警进行合并，从而避免同一个应用的多个告警频繁触发通知。',
  444 + img:'assets/img/serviceSecond/alarm/noiseReduce.png',
  445 + type:'noiseReduce',
  446 + subTitle:'兼容并包:开放告警',
  447 + subIntro:'对于已有的监控系统产生的告警，或者多云场景下的告警，也可以通过开放告警的方式统一接入到综合告警算法平台，进行统一的告警管理。目前开放告警累计支持了PROMETHEUS、ALERTMANAGERGRAFANA、ZABBIXDATADOGLOKIAWS CLOUDWATCH.NEW RELIC 华为云云监控等十多个监控源，对各个不同系统的告警进行管理。',
  448 + },
  449 + ]
  450 + }
  451 +
  452 + return res
  453 +}
  454 +//综合监控管理A-view todo
  455 +export function Aview() {
  456 + let res={
  457 + title:'综合监控管理A-view',
  458 + introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
  459 + data:[
  460 + {
  461 + title:'产品信息',
  462 + introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
  463 + type:'info'
  464 + },
  465 + {
  466 + title:'产品特点',
  467 + introduction:'',
  468 + data:[
  469 + {
  470 + icon:'assets/img/serviceSecond/information/character-1.png',
  471 + title:'工单信息集中管理',
  472 + introduction:'实现工单信息自动化汇总，工单数据集中化管理，工单流程实时共享。'
  473 + },
  474 + {
  475 + icon:'assets/img/serviceSecond/information/character-2.png',
  476 + title:'提高工作效率',
  477 + introduction:'运用智能化管理工具，降低人工沟通成本，缩短沟通时间。实时跟进工单问题的处理情况，提高工作效率。'
  478 + },
  479 + {
  480 + icon:'assets/img/serviceSecond/information/character-3.png',
  481 + title:'实时处理单数据',
  482 + introduction:'全方位、多维度实时进行工单统计数据，及时掌握工单执行过程中的问题，帮助决策者获取数据支撑。'
  483 + }
  484 + ],
  485 + type:'character'
  486 + },
  487 + {
  488 + title:'系统框架',
  489 + introduction:'安全运维服务流程的系统架构',
  490 + img:'assets/img/serviceSecond/information/system.png',
  491 + type:'system'
  492 + },
  493 + {
  494 + title:'产品优势',
  495 + introduction:'',
  496 + dataSecond:[
  497 + {
  498 + icon:'assets/img/serviceSecond/information/advantage-1.png',
  499 + title:'“护网””等保”各规章变成“流程”强制性管控',
  500 + introduction:'特点：规章落地 提前约束 流程强制 全程留痕',
  501 + img:'assets/img/serviceSecond/information/advantageImg.png'
  502 + },
  503 + {
  504 + icon:'assets/img/serviceSecond/information/advantage-2.png',
  505 + title:'通过”安全流程“提前管控日常操作、留痕',
  506 + introduction:'',
  507 + img:'assets/img/serviceSecond/information/advantageImg.png'
  508 + },
  509 + {
  510 + icon:'assets/img/serviceSecond/information/advantage-3.png',
  511 + title:'税务局业务流程目录、展示、流程的分类管理',
  512 + introduction:'',
  513 + img:'assets/img/serviceSecond/information/advantageImg.png'
  514 + },
  515 + {
  516 + icon:'assets/img/serviceSecond/information/advantage-4.png',
  517 + title:'工作组、用户权限的灵活配置',
  518 + introduction:'',
  519 + img:'assets/img/serviceSecond/information/advantageImg.png'
  520 + }
  521 + ],
  522 + type:'advantage'
  523 + },
  524 + {
  525 + title:'平台价值',
  526 + introduction:'魔镜“智能流程协同管理平台”通过信息整合，全局掌控省税务局工单流程每个节点状态，协同流转，处理审批；清晰分类了解流程情况，实时统计工单数据。',
  527 + dataThird:[
  528 + {
  529 + title:'标准化',
  530 + introduction:'信息、流程、时间全面统一，高效协同',
  531 + img:'assets/img/serviceSecond/information/value-bg.png'
  532 + },
  533 + {
  534 + title:'规范化',
  535 + introduction:'理清流程、制度落地，业务按标准执行',
  536 + img:'assets/img/serviceSecond/information/value-bg.png'
  537 + },
  538 + {
  539 + title:'透明化',
  540 + introduction:'流程申请、流程进度、流程审批全程可观',
  541 + img:'assets/img/serviceSecond/information/value-bg.png'
  542 + }
  543 + ],
  544 + type:'value'
  545 + },
  546 + ]
  547 + }
  548 +
  549 + return res
  550 +}
  551 +//CMDB资产管理 todo
  552 +export function cmdb() {
  553 + let res={
  554 + title:'CMDB资产管理',
  555 + introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
  556 + data:[
  557 + {
  558 + title:'产品信息',
  559 + introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
  560 + type:'info'
  561 + },
  562 + {
  563 + title:'产品特点',
  564 + introduction:'',
  565 + data:[
  566 + {
  567 + icon:'assets/img/serviceSecond/information/character-1.png',
  568 + title:'工单信息集中管理',
  569 + introduction:'实现工单信息自动化汇总，工单数据集中化管理，工单流程实时共享。'
  570 + },
  571 + {
  572 + icon:'assets/img/serviceSecond/information/character-2.png',
  573 + title:'提高工作效率',
  574 + introduction:'运用智能化管理工具，降低人工沟通成本，缩短沟通时间。实时跟进工单问题的处理情况，提高工作效率。'
  575 + },
  576 + {
  577 + icon:'assets/img/serviceSecond/information/character-3.png',
  578 + title:'实时处理单数据',
  579 + introduction:'全方位、多维度实时进行工单统计数据，及时掌握工单执行过程中的问题，帮助决策者获取数据支撑。'
  580 + }
  581 + ],
  582 + type:'character'
  583 + },
  584 + {
  585 + title:'系统框架',
  586 + introduction:'安全运维服务流程的系统架构',
  587 + img:'assets/img/serviceSecond/information/system.png',
  588 + type:'system'
  589 + },
  590 + {
  591 + title:'产品优势',
  592 + introduction:'',
  593 + dataSecond:[
  594 + {
  595 + icon:'assets/img/serviceSecond/information/advantage-1.png',
  596 + title:'“护网””等保”各规章变成“流程”强制性管控',
  597 + introduction:'特点：规章落地 提前约束 流程强制 全程留痕',
  598 + img:'assets/img/serviceSecond/information/advantageImg.png'
  599 + },
  600 + {
  601 + icon:'assets/img/serviceSecond/information/advantage-2.png',
  602 + title:'通过”安全流程“提前管控日常操作、留痕',
  603 + introduction:'',
  604 + img:'assets/img/serviceSecond/information/advantageImg.png'
  605 + },
  606 + {
  607 + icon:'assets/img/serviceSecond/information/advantage-3.png',
  608 + title:'税务局业务流程目录、展示、流程的分类管理',
  609 + introduction:'',
  610 + img:'assets/img/serviceSecond/information/advantageImg.png'
  611 + },
  612 + {
  613 + icon:'assets/img/serviceSecond/information/advantage-4.png',
  614 + title:'工作组、用户权限的灵活配置',
  615 + introduction:'',
  616 + img:'assets/img/serviceSecond/information/advantageImg.png'
  617 + }
  618 + ],
  619 + type:'advantage'
  620 + },
  621 + {
  622 + title:'平台价值',
  623 + introduction:'魔镜“智能流程协同管理平台”通过信息整合，全局掌控省税务局工单流程每个节点状态，协同流转，处理审批；清晰分类了解流程情况，实时统计工单数据。',
  624 + dataThird:[
  625 + {
  626 + title:'标准化',
  627 + introduction:'信息、流程、时间全面统一，高效协同',
  628 + img:'assets/img/serviceSecond/information/value-bg.png'
  629 + },
  630 + {
  631 + title:'规范化',
  632 + introduction:'理清流程、制度落地，业务按标准执行',
  633 + img:'assets/img/serviceSecond/information/value-bg.png'
  634 + },
  635 + {
  636 + title:'透明化',
  637 + introduction:'流程申请、流程进度、流程审批全程可观',
  638 + img:'assets/img/serviceSecond/information/value-bg.png'
  639 + }
  640 + ],
  641 + type:'value'
  642 + },
  643 + ]
  644 + }
  645 +
  646 + return res
  647 +}
  648 +//魔镜智能多云运维平台 todo
  649 +export function cloud() {
  650 + let res={
  651 + title:'魔镜智能多云运维平台',
  652 + introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
  653 + data:[
  654 + {
  655 + title:'产品信息',
  656 + introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
  657 + type:'info'
  658 + },
  659 + {
  660 + title:'产品特点',
  661 + introduction:'',
  662 + data:[
  663 + {
  664 + icon:'assets/img/serviceSecond/information/character-1.png',
  665 + title:'工单信息集中管理',
  666 + introduction:'实现工单信息自动化汇总，工单数据集中化管理，工单流程实时共享。'
  667 + },
  668 + {
  669 + icon:'assets/img/serviceSecond/information/character-2.png',
  670 + title:'提高工作效率',
  671 + introduction:'运用智能化管理工具，降低人工沟通成本，缩短沟通时间。实时跟进工单问题的处理情况，提高工作效率。'
  672 + },
  673 + {
  674 + icon:'assets/img/serviceSecond/information/character-3.png',
  675 + title:'实时处理单数据',
  676 + introduction:'全方位、多维度实时进行工单统计数据，及时掌握工单执行过程中的问题，帮助决策者获取数据支撑。'
  677 + }
  678 + ],
  679 + type:'character'
  680 + },
  681 + {
  682 + title:'系统框架',
  683 + introduction:'安全运维服务流程的系统架构',
  684 + img:'assets/img/serviceSecond/information/system.png',
  685 + type:'system'
  686 + },
  687 + {
  688 + title:'产品优势',
  689 + introduction:'',
  690 + dataSecond:[
  691 + {
  692 + icon:'assets/img/serviceSecond/information/advantage-1.png',
  693 + title:'“护网””等保”各规章变成“流程”强制性管控',
  694 + introduction:'特点：规章落地 提前约束 流程强制 全程留痕',
  695 + img:'assets/img/serviceSecond/information/advantageImg.png'
  696 + },
  697 + {
  698 + icon:'assets/img/serviceSecond/information/advantage-2.png',
  699 + title:'通过”安全流程“提前管控日常操作、留痕',
  700 + introduction:'',
  701 + img:'assets/img/serviceSecond/information/advantageImg.png'
  702 + },
  703 + {
  704 + icon:'assets/img/serviceSecond/information/advantage-3.png',
  705 + title:'税务局业务流程目录、展示、流程的分类管理',
  706 + introduction:'',
  707 + img:'assets/img/serviceSecond/information/advantageImg.png'
  708 + },
  709 + {
  710 + icon:'assets/img/serviceSecond/information/advantage-4.png',
  711 + title:'工作组、用户权限的灵活配置',
  712 + introduction:'',
  713 + img:'assets/img/serviceSecond/information/advantageImg.png'
  714 + }
  715 + ],
  716 + type:'advantage'
  717 + },
  718 + {
  719 + title:'平台价值',
  720 + introduction:'魔镜“智能流程协同管理平台”通过信息整合，全局掌控省税务局工单流程每个节点状态，协同流转，处理审批；清晰分类了解流程情况，实时统计工单数据。',
  721 + dataThird:[
  722 + {
  723 + title:'标准化',
  724 + introduction:'信息、流程、时间全面统一，高效协同',
  725 + img:'assets/img/serviceSecond/information/value-bg.png'
  726 + },
  727 + {
  728 + title:'规范化',
  729 + introduction:'理清流程、制度落地，业务按标准执行',
  730 + img:'assets/img/serviceSecond/information/value-bg.png'
  731 + },
  732 + {
  733 + title:'透明化',
  734 + introduction:'流程申请、流程进度、流程审批全程可观',
  735 + img:'assets/img/serviceSecond/information/value-bg.png'
  736 + }
  737 + ],
  738 + type:'value'
  739 + },
  740 + ]
  741 + }
  742 +
  743 + return res
385 } 744 }
@@ -215,9 +215,14 @@ export default { @@ -215,9 +215,14 @@ export default {
215 if ($('.scroll-to-target').length) { 215 if ($('.scroll-to-target').length) {
216 $(".scroll-to-target").on('click', function () { 216 $(".scroll-to-target").on('click', function () {
217 var target = $(this).attr('data-target'); 217 var target = $(this).attr('data-target');
  218 + //lsq 产品二级页面的二级导航锚点 2022-09-19
  219 + let top=$(target).offset().top
  220 + if($(this).hasClass('tab-item')){
  221 + top-=100;
  222 + }
218 // animate 223 // animate
219 $('html, body').animate({ 224 $('html, body').animate({
220 - scrollTop: $(target).offset().top 225 + scrollTop: top
221 }, 1000); 226 }, 1000);
222 227
223 }); 228 });
@@ -43,6 +43,30 @@ const routes = [ @@ -43,6 +43,30 @@ const routes = [
43 name: 'maintenance', 43 name: 'maintenance',
44 component: () => myImport('views/serviceSecond/maintenance/index') 44 component: () => myImport('views/serviceSecond/maintenance/index')
45 }, 45 },
  46 + //综合告警智能算法平台
  47 + {
  48 + path: '/services/alarm',
  49 + name: 'alarm',
  50 + component: () => myImport('views/serviceSecond/alarm/index')
  51 + },
  52 + //综合监控管理A-view
  53 + {
  54 + path: '/services/Aview',
  55 + name: 'Aview',
  56 + component: () => myImport('views/serviceSecond/Aview/index')
  57 + },
  58 + //CMDB资产管理
  59 + {
  60 + path: '/services/cmdb',
  61 + name: 'cmdb',
  62 + component: () => myImport('views/serviceSecond/cmdb/index')
  63 + },
  64 + //魔镜智能多云运维平台
  65 + {
  66 + path: '/services/cloud',
  67 + name: 'cloud',
  68 + component: () => myImport('views/serviceSecond/cloud/index')
  69 + },
46 ]; 70 ];
47 71
48 const router = VueRouter.createRouter({ 72 const router = VueRouter.createRouter({
@@ -52,8 +76,17 @@ const router = VueRouter.createRouter({ @@ -52,8 +76,17 @@ const router = VueRouter.createRouter({
52 76
53 77
54 router.beforeEach(async (to, from, next) => { 78 router.beforeEach(async (to, from, next) => {
  79 + let toPath=to.name;
  80 + let path=to.path;
  81 + if(path){
  82 + //lsq 产品二级页时顶部的导航高亮显示 2022-09-19
  83 + let pathArr=path.split('/');
  84 + if(pathArr.length>2){
  85 + toPath=pathArr[1];
  86 + }
  87 + }
55 $('[top-nav]').removeClass('current'); 88 $('[top-nav]').removeClass('current');
56 - $('[top-nav="'+to.name+'"]').addClass('current'); 89 + $('[top-nav="'+toPath+'"]').addClass('current');
57 // 回到顶部 90 // 回到顶部
58 $('html, body').animate({ 91 $('html, body').animate({
59 scrollTop: 0 92 scrollTop: 0
  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="rel rpt-150 rpb-0 text-left" >
  9 + <div class="container">
  10 + <div class="row banner-height pt-90 pb-90">
  11 + <div class="banner-introduction color-white col-lg-6">
  12 + <h2 class="intro-title color-white">{{AviewData.title}}</h2>
  13 + <span class="intro-intro">{{AviewData.introduction}}</span>
  14 + </div>
  15 + </div>
  16 + </div>
  17 + <div class="intro-Con"></div>
  18 +</section>
  19 +<section class="intro-tab">
  20 + <div class="container">
  21 + <ul class="intro-tab-container">
  22 + <li class="tab-item-li" v-for="(item,index) in AviewData.data" :key="item">
  23 + <span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
  24 + </li>
  25 + </ul>
  26 + </div>
  27 +</section>
  28 +
  29 +
  30 +<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in AviewData.data" :key="item">
  31 + <div class="div-type" :data-type="item.type"></div>
  32 + <div class="container">
  33 + <h3 class="info-title">{{item.title}}</h3>
  34 + <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>
  35 + <div class="row" v-if="item.data && item.data.length>0">
  36 + <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
  37 + <img class="pt-50" :src="itemC.icon" alt="">
  38 + <h4 class="pt-30">{{itemC.title}}</h4>
  39 + <div class="info-character-intro">{{itemC.introduction}}</div>
  40 + </div>
  41 + </div>
  42 + <div class="info-system pt-30" v-if="item.img">
  43 + <img :src="item.img" alt="">
  44 + </div>
  45 + <div class="row pt-30" v-if="item.dataSecond && item.dataSecond.length>0">
  46 + <div class="col-lg-4">
  47 + <div :class="['info-advantage',{'advantage-active':advantageActive==indexA}]" @mouseover="showHover(indexA)" @mouseleave="hideHover" v-for="(itemA,indexA) in item.dataSecond">
  48 + <img class="" :src="itemA.icon" alt="">
  49 + <div :class="['info-advantage-title']">
  50 + <div>{{itemA.title}}</div>
  51 + <div class="advantage-title-intro" v-if="itemA.introduction && advantageActive==indexA && isMouseover">{{itemA.introduction}}</div>
  52 + </div>
  53 + </div>
  54 + </div>
  55 + <div class="col-lg-8">
  56 + <img :src="advantageImg" alt="">
  57 + </div>
  58 + </div>
  59 + <div class="row pt-30" v-if="item.dataThird && item.dataThird.length>0">
  60 + <div class="col-lg-4" v-for="(itemV,indexV) in item.dataThird">
  61 + <div class="info-value" >
  62 + <img class="" :src="itemV.img" alt="">
  63 + <div :class="['info-value-title']">
  64 + <h3>{{itemV.title}}</h3>
  65 + <div>{{itemV.introduction}}</div>
  66 + </div>
  67 + </div>
  68 +
  69 + </div>
  70 + </div>
  71 +
  72 + </div>
  73 +</section>
  74 +
  75 +
  76 +
  1 +import pageInit from "../../../minixs/pageInit.js";
  2 +import {Aview} from "../../../../assets/img/data/serviceSecond.js";
  3 +export default {
  4 + name: 'Aview',
  5 + template: '',
  6 + mixins:[pageInit],
  7 + components: {},
  8 + props: [],
  9 + setup(props, {attrs, slots, emit}) {
  10 + let AviewData=Aview();
  11 + //页签高亮显示
  12 + let tabActive=Vue.ref(0);
  13 + // 挂载完
  14 + Vue.onMounted(() => {
  15 +
  16 + })
  17 +
  18 + return {
  19 + AviewData,
  20 + tabActive
  21 + }
  22 + }
  23 +
  24 +}
  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="rel rpt-150 rpb-0 text-left" >
  9 + <div class="container">
  10 + <div class="row banner-height pt-90 pb-90">
  11 + <div class="banner-introduction color-white col-lg-6">
  12 + <h2 class="intro-title color-white">{{alarmData.title}}</h2>
  13 + <span class="intro-intro">{{alarmData.introduction}}</span>
  14 + </div>
  15 + </div>
  16 + </div>
  17 + <div class="intro-Con"></div>
  18 +</section>
  19 +<section class="intro-tab">
  20 + <div class="container">
  21 + <ul class="intro-tab-container">
  22 + <li class="tab-item-li" v-for="(item,index) in alarmData.data" :key="item">
  23 + <span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
  24 + </li>
  25 + </ul>
  26 + </div>
  27 +</section>
  28 +
  29 +
  30 +<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">
  31 + <div class="div-type" :data-type="item.type" ></div>
  32 + <div class="container">
  33 + <h3 class="info-title">{{item.title}}</h3>
  34 + <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>
  35 + <div class="info-system pt-30" v-if="item.img">
  36 + <img :src="item.img" alt="">
  37 + </div>
  38 + <div class="row pt-50" v-if="item.data && item.data.length>0">
  39 + <div class="col-md-3 flex-start-column " v-for="(itemC,indexC) in item.data">
  40 + <div class="system-bg pd-20">
  41 + <img class="" :src="itemC.icon" alt="">
  42 + <h4 class="pt-30">{{itemC.title}}</h4>
  43 + <div class="info-character-intro font-size-14 pt-10">{{itemC.introduction}}</div>
  44 + </div>
  45 + </div>
  46 + </div>
  47 + <div class="row pt-30" v-if="item.subTitle && item.subIntro">
  48 + <div class="info-container-bg pd-20">
  49 + <div class="font-weight-bold font-size-16">{{item.subTitle}}</div>
  50 + <div class="pt-10 line-height-28 font-size-14">{{item.subIntro}}</div>
  51 + </div>
  52 + </div>
  53 +
  54 + </div>
  55 +</section>
  1 +import pageInit from "../../../minixs/pageInit.js";
  2 +import {alarm} from "../../../../assets/img/data/serviceSecond.js";
  3 +export default {
  4 + name: 'alarm',
  5 + template: '',
  6 + mixins:[pageInit],
  7 + components: {},
  8 + props: [],
  9 + setup(props, {attrs, slots, emit}) {
  10 + let alarmData=alarm();
  11 + //页签高亮显示
  12 + let tabActive=Vue.ref(0);
  13 +
  14 + // 挂载完
  15 + Vue.onMounted(() => {
  16 +
  17 + })
  18 +
  19 + return {
  20 + alarmData,
  21 + tabActive
  22 + }
  23 + }
  24 +
  25 +}
@@ -5,23 +5,22 @@ @@ -5,23 +5,22 @@
5 </section> 5 </section>
6 6
7 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"> 8 +<section class="rel rpt-150 rpb-0 text-left" >
  9 + <div class="container">
  10 + <div class="row banner-height pt-90 pb-90">
12 <div class="banner-introduction color-white col-lg-6"> 11 <div class="banner-introduction color-white col-lg-6">
13 <h2 class="intro-title color-white">{{businessAppData.title}}</h2> 12 <h2 class="intro-title color-white">{{businessAppData.title}}</h2>
14 <span class="intro-intro">{{businessAppData.introduction}}</span> 13 <span class="intro-intro">{{businessAppData.introduction}}</span>
15 </div> 14 </div>
16 </div> 15 </div>
17 </div> 16 </div>
18 - 17 + <div class="intro-Con"></div>
19 </section> 18 </section>
20 <section class="intro-tab"> 19 <section class="intro-tab">
21 <div class="container"> 20 <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> 21 + <ul class="intro-tab-container">
  22 + <li class="tab-item-li" v-for="(item,index) in businessAppData.data" :key="item">
  23 + <span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
25 </li> 24 </li>
26 </ul> 25 </ul>
27 </div> 26 </div>
@@ -52,28 +52,6 @@ export default { @@ -52,28 +52,6 @@ export default {
52 let hideHover=()=>{ 52 let hideHover=()=>{
53 setcharacter(); 53 setcharacter();
54 } 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 //特点的事件 55 //特点的事件
78 let prev=(dataLength)=>{ 56 let prev=(dataLength)=>{
79 if(characterActive.value>0){ 57 if(characterActive.value>0){
@@ -137,7 +115,6 @@ export default { @@ -137,7 +115,6 @@ export default {
137 showHover, 115 showHover,
138 hideHover, 116 hideHover,
139 setcharacter, 117 setcharacter,
140 - goItemType,  
141 valueContent, 118 valueContent,
142 valueIcon, 119 valueIcon,
143 valueIndex, 120 valueIndex,
  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="rel rpt-150 rpb-0 text-left" >
  9 + <div class="container">
  10 + <div class="row banner-height pt-90 pb-90">
  11 + <div class="banner-introduction color-white col-lg-6">
  12 + <h2 class="intro-title color-white">{{cloudData.title}}</h2>
  13 + <span class="intro-intro">{{cloudData.introduction}}</span>
  14 + </div>
  15 + </div>
  16 + </div>
  17 + <div class="intro-Con"></div>
  18 +</section>
  19 +<section class="intro-tab">
  20 + <div class="container">
  21 + <ul class="intro-tab-container">
  22 + <li class="tab-item-li" v-for="(item,index) in cloudData.data" :key="item">
  23 + <span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
  24 + </li>
  25 + </ul>
  26 + </div>
  27 +</section>
  28 +
  29 +
  30 +<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cloudData.data" :key="item">
  31 + <div class="div-type" :data-type="item.type"></div>
  32 + <div class="container">
  33 + <h3 class="info-title">{{item.title}}</h3>
  34 + <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>
  35 + <div class="row" v-if="item.data && item.data.length>0">
  36 + <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
  37 + <img class="pt-50" :src="itemC.icon" alt="">
  38 + <h4 class="pt-30">{{itemC.title}}</h4>
  39 + <div class="info-character-intro">{{itemC.introduction}}</div>
  40 + </div>
  41 + </div>
  42 + <div class="info-system pt-30" v-if="item.img">
  43 + <img :src="item.img" alt="">
  44 + </div>
  45 + <div class="row pt-30" v-if="item.dataSecond && item.dataSecond.length>0">
  46 + <div class="col-lg-4">
  47 + <div :class="['info-advantage',{'advantage-active':advantageActive==indexA}]" @mouseover="showHover(indexA)" @mouseleave="hideHover" v-for="(itemA,indexA) in item.dataSecond">
  48 + <img class="" :src="itemA.icon" alt="">
  49 + <div :class="['info-advantage-title']">
  50 + <div>{{itemA.title}}</div>
  51 + <div class="advantage-title-intro" v-if="itemA.introduction && advantageActive==indexA && isMouseover">{{itemA.introduction}}</div>
  52 + </div>
  53 + </div>
  54 + </div>
  55 + <div class="col-lg-8">
  56 + <img :src="advantageImg" alt="">
  57 + </div>
  58 + </div>
  59 + <div class="row pt-30" v-if="item.dataThird && item.dataThird.length>0">
  60 + <div class="col-lg-4" v-for="(itemV,indexV) in item.dataThird">
  61 + <div class="info-value" >
  62 + <img class="" :src="itemV.img" alt="">
  63 + <div :class="['info-value-title']">
  64 + <h3>{{itemV.title}}</h3>
  65 + <div>{{itemV.introduction}}</div>
  66 + </div>
  67 + </div>
  68 +
  69 + </div>
  70 + </div>
  71 +
  72 + </div>
  73 +</section>
  74 +
  75 +
  76 +
  1 +import pageInit from "../../../minixs/pageInit.js";
  2 +import {cloud} from "../../../../assets/img/data/serviceSecond.js";
  3 +export default {
  4 + name: 'cloud',
  5 + template: '',
  6 + mixins:[pageInit],
  7 + components: {},
  8 + props: [],
  9 + setup(props, {attrs, slots, emit}) {
  10 + let cloudData=cloud();
  11 + //页签高亮显示
  12 + let tabActive=Vue.ref(0);
  13 + // 挂载完
  14 + Vue.onMounted(() => {
  15 +
  16 + })
  17 +
  18 + return {
  19 + cloudData,
  20 + tabActive
  21 + }
  22 + }
  23 +
  24 +}
  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="rel rpt-150 rpb-0 text-left" >
  9 + <div class="container">
  10 + <div class="row banner-height pt-90 pb-90">
  11 + <div class="banner-introduction color-white col-lg-6">
  12 + <h2 class="intro-title color-white">{{cmdbData.title}}</h2>
  13 + <span class="intro-intro">{{cmdbData.introduction}}</span>
  14 + </div>
  15 + </div>
  16 + </div>
  17 + <div class="intro-Con"></div>
  18 +</section>
  19 +<section class="intro-tab">
  20 + <div class="container">
  21 + <ul class="intro-tab-container">
  22 + <li class="tab-item-li" v-for="(item,index) in cmdbData.data" :key="item">
  23 + <span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
  24 + </li>
  25 + </ul>
  26 + </div>
  27 +</section>
  28 +
  29 +
  30 +<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cmdbData.data" :key="item">
  31 + <div class="div-type" :data-type="item.type"></div>
  32 + <div class="container">
  33 + <h3 class="info-title">{{item.title}}</h3>
  34 + <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>
  35 + <div class="row" v-if="item.data && item.data.length>0">
  36 + <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
  37 + <img class="pt-50" :src="itemC.icon" alt="">
  38 + <h4 class="pt-30">{{itemC.title}}</h4>
  39 + <div class="info-character-intro">{{itemC.introduction}}</div>
  40 + </div>
  41 + </div>
  42 + <div class="info-system pt-30" v-if="item.img">
  43 + <img :src="item.img" alt="">
  44 + </div>
  45 + <div class="row pt-30" v-if="item.dataSecond && item.dataSecond.length>0">
  46 + <div class="col-lg-4">
  47 + <div :class="['info-advantage',{'advantage-active':advantageActive==indexA}]" @mouseover="showHover(indexA)" @mouseleave="hideHover" v-for="(itemA,indexA) in item.dataSecond">
  48 + <img class="" :src="itemA.icon" alt="">
  49 + <div :class="['info-advantage-title']">
  50 + <div>{{itemA.title}}</div>
  51 + <div class="advantage-title-intro" v-if="itemA.introduction && advantageActive==indexA && isMouseover">{{itemA.introduction}}</div>
  52 + </div>
  53 + </div>
  54 + </div>
  55 + <div class="col-lg-8">
  56 + <img :src="advantageImg" alt="">
  57 + </div>
  58 + </div>
  59 + <div class="row pt-30" v-if="item.dataThird && item.dataThird.length>0">
  60 + <div class="col-lg-4" v-for="(itemV,indexV) in item.dataThird">
  61 + <div class="info-value" >
  62 + <img class="" :src="itemV.img" alt="">
  63 + <div :class="['info-value-title']">
  64 + <h3>{{itemV.title}}</h3>
  65 + <div>{{itemV.introduction}}</div>
  66 + </div>
  67 + </div>
  68 +
  69 + </div>
  70 + </div>
  71 +
  72 + </div>
  73 +</section>
  74 +
  75 +
  76 +
  1 +import pageInit from "../../../minixs/pageInit.js";
  2 +import {cmdb} from "../../../../assets/img/data/serviceSecond.js";
  3 +export default {
  4 + name: 'cmdb',
  5 + template: '',
  6 + mixins:[pageInit],
  7 + components: {},
  8 + props: [],
  9 + setup(props, {attrs, slots, emit}) {
  10 + let cmdbData=cmdb();
  11 + //页签高亮显示
  12 + let tabActive=Vue.ref(0);
  13 + // 挂载完
  14 + Vue.onMounted(() => {
  15 +
  16 + })
  17 +
  18 + return {
  19 + cmdbData,
  20 + tabActive
  21 + }
  22 + }
  23 +
  24 +}
@@ -5,23 +5,22 @@ @@ -5,23 +5,22 @@
5 </section> 5 </section>
6 6
7 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 "> 8 +<section class="rel rpt-150 rpb-0 text-left" >
  9 + <div class="container">
  10 + <div class="row banner-height pt-90 pb-90">
12 <div class="banner-introduction color-white col-lg-6"> 11 <div class="banner-introduction color-white col-lg-6">
13 <h2 class="intro-title color-white">{{InformationData.title}}</h2> 12 <h2 class="intro-title color-white">{{InformationData.title}}</h2>
14 <span class="intro-intro">{{InformationData.introduction}}</span> 13 <span class="intro-intro">{{InformationData.introduction}}</span>
15 </div> 14 </div>
16 </div> 15 </div>
17 </div> 16 </div>
18 - 17 + <div class="intro-Con"></div>
19 </section> 18 </section>
20 <section class="intro-tab"> 19 <section class="intro-tab">
21 <div class="container"> 20 <div class="container">
22 - <ul class="intro-tab-container nav nav-pills">  
23 - <li class="col-lg-2" v-for="(item,index) in InformationData.data" :key="item">  
24 - <span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span> 21 + <ul class="intro-tab-container">
  22 + <li class="tab-item-li" v-for="(item,index) in InformationData.data" :key="item">
  23 + <span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
25 </li> 24 </li>
26 </ul> 25 </ul>
27 </div> 26 </div>
@@ -44,28 +44,6 @@ export default { @@ -44,28 +44,6 @@ export default {
44 isMouseover.value=false; 44 isMouseover.value=false;
45 setAdvantage(); 45 setAdvantage();
46 } 46 }
47 - //页签点击跳转到对应的目标  
48 - let goItemType=(type)=>{  
49 - let top=$("[data-type='"+type+"']").offset().top;  
50 - let total=top-100;  
51 - let distance = document.documentElement.scrollTop || document.body.scrollTop  
52 - //计算每一小段的距离  
53 - let step=total/6;  
54 - (function smoothDown (){  
55 - if(distance < total){  
56 - distance += step;  
57 - //移动一小段  
58 - document.body.scrollTop =distance;  
59 - document.documentElement.scrollTop = distance;  
60 - //设定每一次跳到的时间间隔为10ms  
61 - setTimeout(smoothDown,10)  
62 - }else{  
63 - //限制股东停止的距离  
64 - document.body.scrollTop = total;  
65 - document.documentElement.scrollTop = total;  
66 - }  
67 - })()  
68 - }  
69 // 挂载完 47 // 挂载完
70 Vue.onMounted(() => { 48 Vue.onMounted(() => {
71 49
@@ -80,7 +58,6 @@ export default { @@ -80,7 +58,6 @@ export default {
80 showHover, 58 showHover,
81 hideHover, 59 hideHover,
82 setAdvantage, 60 setAdvantage,
83 - goItemType  
84 } 61 }
85 } 62 }
86 63
@@ -5,23 +5,22 @@ @@ -5,23 +5,22 @@
5 </section> 5 </section>
6 6
7 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"> 8 +<section class="rel rpt-150 rpb-0 text-left" >
  9 + <div class="container">
  10 + <div class="row banner-height pt-90 pb-90">
12 <div class="banner-introduction color-white col-lg-6"> 11 <div class="banner-introduction color-white col-lg-6">
13 <h2 class="intro-title color-white">{{maintenanceData.title}}</h2> 12 <h2 class="intro-title color-white">{{maintenanceData.title}}</h2>
14 <span class="intro-intro">{{maintenanceData.introduction}}</span> 13 <span class="intro-intro">{{maintenanceData.introduction}}</span>
15 </div> 14 </div>
16 </div> 15 </div>
17 </div> 16 </div>
18 - 17 + <div class="intro-Con"></div>
19 </section> 18 </section>
20 <section class="intro-tab"> 19 <section class="intro-tab">
21 <div class="container"> 20 <div class="container">
22 - <ul class="intro-tab-container nav nav-pills">  
23 - <li class="col-lg-2" v-for="(item,index) in maintenanceData.data" :key="item">  
24 - <span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span> 21 + <ul class="intro-tab-container">
  22 + <li class="tab-item-li" v-for="(item,index) in maintenanceData.data" :key="item">
  23 + <span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
25 </li> 24 </li>
26 </ul> 25 </ul>
27 </div> 26 </div>
@@ -26,29 +26,6 @@ export default { @@ -26,29 +26,6 @@ export default {
26 setcharacter(); 26 setcharacter();
27 //优势hover高亮显示 27 //优势hover高亮显示
28 let characterActive=Vue.ref(0); 28 let characterActive=Vue.ref(0);
29 -  
30 - //页签点击跳转到对应的目标  
31 - let goItemType=(type)=>{  
32 - let top=$("[data-type='"+type+"']").offset().top;  
33 - let total=top-100;  
34 - let distance = document.documentElement.scrollTop || document.body.scrollTop  
35 - //计算每一小段的距离  
36 - let step=total/6;  
37 - (function smoothDown (){  
38 - if(distance < total){  
39 - distance += step;  
40 - //移动一小段  
41 - document.body.scrollTop =distance;  
42 - document.documentElement.scrollTop = distance;  
43 - //设定每一次跳到的时间间隔为10ms  
44 - setTimeout(smoothDown,10)  
45 - }else{  
46 - //限制股东停止的距离  
47 - document.body.scrollTop = total;  
48 - document.documentElement.scrollTop = total;  
49 - }  
50 - })()  
51 - }  
52 //特点的事件 29 //特点的事件
53 let prev=(dataLength)=>{ 30 let prev=(dataLength)=>{
54 if(characterActive.value>0){ 31 if(characterActive.value>0){
@@ -161,7 +138,6 @@ export default { @@ -161,7 +138,6 @@ export default {
161 tabActive, 138 tabActive,
162 characterActive, 139 characterActive,
163 setcharacter, 140 setcharacter,
164 - goItemType,  
165 prev, 141 prev,
166 next, 142 next,
167 changeCharacter, 143 changeCharacter,
@@ -5,23 +5,22 @@ @@ -5,23 +5,22 @@
5 </section> 5 </section>
6 6
7 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"> 8 +<section class="rel rpt-150 rpb-0 text-left" >
  9 + <div class="container">
  10 + <div class="row banner-height pt-90 pb-90">
12 <div class="banner-introduction color-white col-lg-6"> 11 <div class="banner-introduction color-white col-lg-6">
13 <h2 class="intro-title color-white">{{securityLogData.title}}</h2> 12 <h2 class="intro-title color-white">{{securityLogData.title}}</h2>
14 <span class="intro-intro">{{securityLogData.introduction}}</span> 13 <span class="intro-intro">{{securityLogData.introduction}}</span>
15 </div> 14 </div>
16 </div> 15 </div>
17 </div> 16 </div>
18 - 17 + <div class="intro-Con"></div>
19 </section> 18 </section>
20 <section class="intro-tab"> 19 <section class="intro-tab">
21 <div class="container"> 20 <div class="container">
22 - <ul class="intro-tab-container nav nav-pills">  
23 - <li class="col-lg-2" v-for="(item,index) in securityLogData.data" :key="item">  
24 - <span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span> 21 + <ul class="intro-tab-container">
  22 + <li class="tab-item-li" v-for="(item,index) in securityLogData.data" :key="item">
  23 + <span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
25 </li> 24 </li>
26 </ul> 25 </ul>
27 </div> 26 </div>
@@ -52,28 +52,6 @@ export default { @@ -52,28 +52,6 @@ export default {
52 let hideHover=()=>{ 52 let hideHover=()=>{
53 setcharacter(); 53 setcharacter();
54 } 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 //特点的事件 55 //特点的事件
78 let prev=(dataLength)=>{ 56 let prev=(dataLength)=>{
79 if(characterActive.value>0){ 57 if(characterActive.value>0){
@@ -137,7 +115,6 @@ export default { @@ -137,7 +115,6 @@ export default {
137 showHover, 115 showHover,
138 hideHover, 116 hideHover,
139 setcharacter, 117 setcharacter,
140 - goItemType,  
141 valueContent, 118 valueContent,
142 valueIcon, 119 valueIcon,
143 valueIndex, 120 valueIndex,
@@ -28,7 +28,7 @@ @@ -28,7 +28,7 @@
28 <div class="col-lg-6 order-lg-2"> 28 <div class="col-lg-6 order-lg-2">
29 <div class="service-right-content mt-50 ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow"> 29 <div class="service-right-content mt-50 ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow">
30 <div class="section-title style-three mb-15"> 30 <div class="section-title style-three mb-15">
31 - <span class="sub-title">综合告警智能算法平台</span> 31 + <span class="sub-title cursor-pointer" @click="jumpSecond('alarm')">综合告警智能算法平台</span>
32 </div> 32 </div>
33 <p> 33 <p>
34 能快速接入各类告警信息，通过告警算法自动去重、规则压缩、算法降噪，实现告警降噪，避免告警风暴，更快响应告警，提升告警管理能力 34 能快速接入各类告警信息，通过告警算法自动去重、规则压缩、算法降噪，实现告警降噪，避免告警风暴，更快响应告警，提升告警管理能力
@@ -41,7 +41,7 @@ @@ -41,7 +41,7 @@
41 </ol> 41 </ol>
42 </div> 42 </div>
43 </div> 43 </div>
44 - <div class="col-lg-6"> 44 + <div class="col-lg-6" @click="jumpSecond('alarm')">
45 <div class="service-left-image wow customFadeInLeft delay-0-1s slow"> 45 <div class="service-left-image wow customFadeInLeft delay-0-1s slow">
46 <img src="assets/img/services/p1.png" style="border-radius: 10px;"> 46 <img src="assets/img/services/p1.png" style="border-radius: 10px;">
47 </div> 47 </div>
@@ -57,7 +57,7 @@ @@ -57,7 +57,7 @@
57 <div class="col-lg-6"> 57 <div class="col-lg-6">
58 <div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow"> 58 <div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow">
59 <div class="section-title style-three mb-15"> 59 <div class="section-title style-three mb-15">
60 - <span class="sub-title">综合监控管理A-view</span> 60 + <span class="sub-title cursor-pointer" @click="jumpSecond('Aview')">综合监控管理A-view</span>
61 </div> 61 </div>
62 <p>全方位监控应用/平台资源/基础设施，基于IT资源图谱，洞察问题根因，随时掌握业务健康状况，快速定位故障，保持IT业务良性、稳定和长效发展</p> 62 <p>全方位监控应用/平台资源/基础设施，基于IT资源图谱，洞察问题根因，随时掌握业务健康状况，快速定位故障，保持IT业务良性、稳定和长效发展</p>
63 <ol> 63 <ol>
@@ -68,7 +68,7 @@ @@ -68,7 +68,7 @@
68 </ol> 68 </ol>
69 </div> 69 </div>
70 </div> 70 </div>
71 - <div class="col-lg-6"> 71 + <div class="col-lg-6" @click="jumpSecond('Aview')">
72 <div class="service-right-image wow customFadeInRight delay-0-1s slow"> 72 <div class="service-right-image wow customFadeInRight delay-0-1s slow">
73 <img src="assets/img/services/p2.png" style="border-radius: 10px;"> 73 <img src="assets/img/services/p2.png" style="border-radius: 10px;">
74 </div> 74 </div>
@@ -85,7 +85,7 @@ @@ -85,7 +85,7 @@
85 <div class="col-lg-6 order-lg-2"> 85 <div class="col-lg-6 order-lg-2">
86 <div class="service-right-content ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow"> 86 <div class="service-right-content ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow">
87 <div class="section-title style-three mb-15"> 87 <div class="section-title style-three mb-15">
88 - <span class="sub-title">CMDB资产管理</span> 88 + <span class="sub-title cursor-pointer" @click="jumpSecond('cmdb')">CMDB资产管理</span>
89 </div> 89 </div>
90 <p>建立以应用为中心的资源 管理模型，促进资产到资源的转变</p> 90 <p>建立以应用为中心的资源 管理模型，促进资产到资源的转变</p>
91 <ol> 91 <ol>
@@ -96,7 +96,7 @@ @@ -96,7 +96,7 @@
96 </ol> 96 </ol>
97 </div> 97 </div>
98 </div> 98 </div>
99 - <div class="col-lg-6"> 99 + <div class="col-lg-6" @click="jumpSecond('cmdb')">
100 <div class="service-left-image wow customFadeInLeft delay-0-1s slow"> 100 <div class="service-left-image wow customFadeInLeft delay-0-1s slow">
101 <img src="assets/img/services/p3.png" style="border-radius: 10px;"> 101 <img src="assets/img/services/p3.png" style="border-radius: 10px;">
102 </div> 102 </div>
@@ -112,7 +112,7 @@ @@ -112,7 +112,7 @@
112 <div class="col-lg-6"> 112 <div class="col-lg-6">
113 <div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow"> 113 <div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow">
114 <div class="section-title style-three mb-15"> 114 <div class="section-title style-three mb-15">
115 - <span class="sub-title">业务及应用综合分析平台</span> 115 + <span class="sub-title cursor-pointer" @click="jumpSecond('businessApp')">业务及应用综合分析平台</span>
116 </div> 116 </div>
117 <p>全新的端到端，全链路的应用性能管理平台，对业务性能问题进行快速发现，帮助用户有效地降低 MTTR、 提升IT部门对业务和用户体验的把控</p> 117 <p>全新的端到端，全链路的应用性能管理平台，对业务性能问题进行快速发现，帮助用户有效地降低 MTTR、 提升IT部门对业务和用户体验的把控</p>
118 <ol> 118 <ol>
@@ -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" @click="jumpSecond('business')"> 126 + <div class="col-lg-6" @click="jumpSecond('businessApp')">
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>
@@ -139,7 +139,7 @@ @@ -139,7 +139,7 @@
139 <div class="col-lg-6 order-lg-2"> 139 <div class="col-lg-6 order-lg-2">
140 <div class="service-right-content ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow"> 140 <div class="service-right-content ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow">
141 <div class="section-title style-three mb-15"> 141 <div class="section-title style-three mb-15">
142 - <span class="sub-title">日志综合智能分析平台</span> 142 + <span class="sub-title cursor-pointer" @click="jumpSecond('securityLog')">日志综合智能分析平台</span>
143 </div> 143 </div>
144 <p>通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。</p> 144 <p>通过对日志的采集、存储、备份、查询、告警分析和报表统计功能，实现海量日志管理。</p>
145 <ol> 145 <ol>
@@ -150,7 +150,7 @@ @@ -150,7 +150,7 @@
150 </ol> 150 </ol>
151 </div> 151 </div>
152 </div> 152 </div>
153 - <div class="col-lg-6" @click="jumpSecond('log')"> 153 + <div class="col-lg-6" @click="jumpSecond('securityLog')">
154 <div class="service-left-image wow customFadeInLeft delay-0-1s slow"> 154 <div class="service-left-image wow customFadeInLeft delay-0-1s slow">
155 <img src="assets/img/services/p5.png" style="border-radius: 10px;"> 155 <img src="assets/img/services/p5.png" style="border-radius: 10px;">
156 </div> 156 </div>
@@ -166,7 +166,7 @@ @@ -166,7 +166,7 @@
166 <div class="col-lg-6"> 166 <div class="col-lg-6">
167 <div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow"> 167 <div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow">
168 <div class="section-title style-three mb-15"> 168 <div class="section-title style-three mb-15">
169 - <span class="sub-title">信息化协同管理支撑平台</span> 169 + <span class="sub-title cursor-pointer" @click="jumpSecond('information')">信息化协同管理支撑平台</span>
170 </div> 170 </div>
171 <p> 171 <p>
172 基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。 172 基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。
@@ -179,7 +179,7 @@ @@ -179,7 +179,7 @@
179 </ol> 179 </ol>
180 </div> 180 </div>
181 </div> 181 </div>
182 - <div class="col-lg-6" @click="jumpSecond('info')"> 182 + <div class="col-lg-6" @click="jumpSecond('information')">
183 <div class="service-right-image wow customFadeInRight delay-0-1s slow"> 183 <div class="service-right-image wow customFadeInRight delay-0-1s slow">
184 <img src="assets/img/services/p6.png" style="border-radius: 10px;"> 184 <img src="assets/img/services/p6.png" style="border-radius: 10px;">
185 </div> 185 </div>
@@ -195,7 +195,7 @@ @@ -195,7 +195,7 @@
195 <div class="service-right-content mt-50 ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow"> 195 <div class="service-right-content mt-50 ml-50 rml-0 rmb-50 wow customFadeInRight delay-0-1s slow">
196 196
197 <div class="section-title style-three mb-15"> 197 <div class="section-title style-three mb-15">
198 - <span class="sub-title">魔镜智能运维管理一体机</span> 198 + <span class="sub-title cursor-pointer" @click="jumpSecond('maintenance')">魔镜智能运维管理一体机</span>
199 </div> 199 </div>
200 <p>数据中心已有的各类运维数据，包括业务指标数据、机器指标数据、各类监控工具的告警数据，建立涵盖数据管理、 故障发现、故障定位和故障预警的综合运维体系。</p> 200 <p>数据中心已有的各类运维数据，包括业务指标数据、机器指标数据、各类监控工具的告警数据，建立涵盖数据管理、 故障发现、故障定位和故障预警的综合运维体系。</p>
201 <ol> 201 <ol>
@@ -221,7 +221,7 @@ @@ -221,7 +221,7 @@
221 <div class="col-lg-6"> 221 <div class="col-lg-6">
222 <div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow"> 222 <div class="service-left-content mr-50 rmr-0 rmb-50 wow customFadeInLeft delay-0-1s slow">
223 <div class="section-title style-three mb-15"> 223 <div class="section-title style-three mb-15">
224 - <span class="sub-title">魔镜智能多云运维平台</span> 224 + <span class="sub-title cursor-pointer" @click="jumpSecond('cloud')">魔镜智能多云运维平台</span>
225 </div> 225 </div>
226 <p> 226 <p>
227 基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。 227 基于“人工智能+大数据”底座对全新业务、系统、流程、管理、虚拟团队“全新”模式下的信息化协同。
@@ -234,7 +234,7 @@ @@ -234,7 +234,7 @@
234 </ol> 234 </ol>
235 </div> 235 </div>
236 </div> 236 </div>
237 - <div class="col-lg-6"> 237 + <div class="col-lg-6" @click="jumpSecond('cloud')">
238 <div class="service-right-image wow customFadeInRight delay-0-1s slow"> 238 <div class="service-right-image wow customFadeInRight delay-0-1s slow">
239 <img src="assets/img/services/p8.png" style="border-radius: 10px;"> 239 <img src="assets/img/services/p8.png" style="border-radius: 10px;">
240 </div> 240 </div>
@@ -8,7 +8,7 @@ export default { @@ -8,7 +8,7 @@ export default {
8 setup(props, {attrs, slots, emit}) { 8 setup(props, {attrs, slots, emit}) {
9 const {proxy} = Vue.getCurrentInstance(); 9 const {proxy} = Vue.getCurrentInstance();
10 let jumpSecond=(type)=>{ 10 let jumpSecond=(type)=>{
11 - if(type=='info'){ 11 + /* if(type=='info'){
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'})
@@ -16,7 +16,9 @@ export default { @@ -16,7 +16,9 @@ export default {
16 proxy.$router.push({path:'/services/businessApp'}) 16 proxy.$router.push({path:'/services/businessApp'})
17 }else if(type == 'maintenance'){ 17 }else if(type == 'maintenance'){
18 proxy.$router.push({path:'/services/maintenance'}) 18 proxy.$router.push({path:'/services/maintenance'})
19 - } 19 + }*/
  20 + proxy.$router.push({path:'/services/'+type})
  21 +
20 } 22 }
21 return { 23 return {
22 jumpSecond 24 jumpSecond