monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 673adc49af8c39c0a6449d540ce7d3ad2359907d 2 parents 73c1117e 4532ead7

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

【无】 【公司网站】CMDB资产管理



See merge request !1021
Inline Side-by-side
Showing 24 changed files with 383 additions and 78 deletions
@@ -62,6 +62,12 @@ @@ -62,6 +62,12 @@
62 font-weight: normal; 62 font-weight: normal;
63 src:url('../fonts/pingfang/PINGFANG REGULAR.TTF'); 63 src:url('../fonts/pingfang/PINGFANG REGULAR.TTF');
64 } 64 }
  65 +@font-face {
  66 + font-family: 'MI_LANTING_REGULAR';
  67 + font-style: normal;
  68 + font-weight: normal;
  69 + src:url('../fonts/MI_LANTING_REGULAR.TTF');
  70 +}
65 * { 71 * {
66 margin: 0px; 72 margin: 0px;
67 padding: 0px; 73 padding: 0px;
@@ -1996,6 +2002,7 @@ blockquote:before { @@ -1996,6 +2002,7 @@ blockquote:before {
1996 font-size: 16px; 2002 font-size: 16px;
1997 color:#666; 2003 color:#666;
1998 font-family: 'PingFang-SC-medium'; 2004 font-family: 'PingFang-SC-medium';
  2005 + line-height: 32px;
1999 } 2006 }
2000 .info-character{ 2007 .info-character{
2001 padding:0 50px; 2008 padding:0 50px;
@@ -2200,6 +2207,7 @@ blockquote:before { @@ -2200,6 +2207,7 @@ blockquote:before {
2200 } 2207 }
2201 .pro-advantage-ul{ 2208 .pro-advantage-ul{
2202 font-size: 14px; 2209 font-size: 14px;
  2210 + max-width:249px;
2203 } 2211 }
2204 .pro-advantage-ul li{ 2212 .pro-advantage-ul li{
2205 padding:5px 0; 2213 padding:5px 0;
@@ -2211,6 +2219,8 @@ blockquote:before { @@ -2211,6 +2219,8 @@ blockquote:before {
2211 } 2219 }
2212 .maintenance-advantage.info-title{ 2220 .maintenance-advantage.info-title{
2213 color:#fff; 2221 color:#fff;
  2222 + margin-top: 30px;
  2223 + margin-bottom: 30px;
2214 } 2224 }
2215 .maintenance-advantage-num{ 2225 .maintenance-advantage-num{
2216 font-size: 90px; 2226 font-size: 90px;
@@ -3109,6 +3119,9 @@ blockquote:before { @@ -3109,6 +3119,9 @@ blockquote:before {
3109 } 3119 }
3110 .info-container-advantage .info-title{ 3120 .info-container-advantage .info-title{
3111 color:#fff; 3121 color:#fff;
  3122 + margin-top: 30px;
  3123 + margin-bottom: 30px;
  3124 + padding-bottom: 40px;
3112 } 3125 }
3113 .info-container-advantage .pro-advantage-style{ 3126 .info-container-advantage .pro-advantage-style{
3114 padding: 50px 30px 0; 3127 padding: 50px 30px 0;
@@ -3131,7 +3144,7 @@ blockquote:before { @@ -3131,7 +3144,7 @@ blockquote:before {
3131 } 3144 }
3132 @media (min-width: 1260px) { 3145 @media (min-width: 1260px) {
3133 .Aview-container { 3146 .Aview-container {
3134 - max-width: 1200px; 3147 + max-width: 1080px;
3135 } 3148 }
3136 } 3149 }
3137 .Aview-advantage-con:last-child .pro-advantage-style{ 3150 .Aview-advantage-con:last-child .pro-advantage-style{
@@ -3189,10 +3202,159 @@ blockquote:before { @@ -3189,10 +3202,159 @@ blockquote:before {
3189 text-align: center; 3202 text-align: center;
3190 } 3203 }
3191 @media (min-width: 1400px) { 3204 @media (min-width: 1400px) {
3192 - .container.cloud { 3205 + .container.cloud,.container.cmdb {
3193 max-width: 1200px; 3206 max-width: 1200px;
3194 } 3207 }
3195 } 3208 }
3196 .banner-introduction .intro-intro{ 3209 .banner-introduction .intro-intro{
3197 padding-top:20px; 3210 padding-top:20px;
  3211 + line-height: 24px;
  3212 +}
  3213 +/*lsq cmdb样式 2022-10-13*/
  3214 +.func-top{
  3215 + width: 100%;
  3216 +}
  3217 +.func-top-item{
  3218 + font-size: 21px;
  3219 + color:#333;
  3220 + cursor: pointer;
  3221 +}
  3222 +.func-item-active{
  3223 + color:#e4312a;
  3224 +}
  3225 +.func-bottom{
  3226 + min-height: 425px;
  3227 +}
  3228 +.func-bottom-title{
  3229 + font-size: 36px;
  3230 + color:#ffffff;
  3231 + display: flex;
  3232 + align-items: center;
  3233 + justify-content: space-around;
  3234 +}
  3235 +.func-bottom-title span,.funcIntro-span{
  3236 + flex:1;
  3237 +}
  3238 +.funcIntro-span{
  3239 + min-height: 82px;
  3240 +}
  3241 +.func-bottom-intro{
  3242 + font-size: 16px;
  3243 + color:#ffffff;
  3244 + font-family: 'PingFang-SC-medium';
  3245 + padding:40px;
  3246 + display: flex;
  3247 + align-items: center;
  3248 + justify-content: center;
  3249 +}
  3250 +.func-bg{
  3251 + position: absolute;
  3252 + width: 100%;
  3253 + left: 0;
  3254 + top: 33%;
  3255 + z-index: 0;
  3256 +}
  3257 +.container.cmdb{
  3258 + z-index: 1;
  3259 + position: relative;
  3260 +}
  3261 +
  3262 +@media (min-width: 992px){
  3263 + .func-top .func-top-item{
  3264 + max-width:20% ;
  3265 + flex: 20%;
  3266 + }
  3267 +}
  3268 +.cmdb .info-title{
  3269 + padding-top:20px;
  3270 +}
  3271 +.func-symbol{
  3272 + font-size: 80px;
  3273 + height:45%;
  3274 + display: flex;
  3275 + align-items: flex-start;
  3276 + font-family: 'MI_LANTING_REGULAR';
  3277 +}
  3278 +.func-l-p.func-bottom-intro{
  3279 + padding-left:63px;
  3280 +}
  3281 +.lifeCycle-item{
  3282 + background: #f3f5f8;
  3283 + border-radius: 5px;
  3284 + font-family: 'PingFang-SC-medium';
  3285 + font-size: 18px;
  3286 + color:#666;
  3287 + padding: 20px 30px;
  3288 + line-height: 32px;
  3289 +}
  3290 +.lifeCycle-item:nth-child(1){
  3291 + margin-bottom: 20px;
  3292 + color:#ffffff;
  3293 + font-size: 16px;
  3294 + background: url("../img/serviceSecond/cmdb/lifeCycle-1.png");
  3295 + background-size: cover;
  3296 + text-indent: 32px;
  3297 +}
  3298 +.lifeCycle-item-title{
  3299 + color:#333;
  3300 +}
  3301 +.lifeCycle-intro{
  3302 + display: flex;
  3303 + align-items: center;
  3304 + justify-content: space-between;
  3305 +}
  3306 +.lifeCycle-item:nth-child(2){
  3307 + padding: 30px;
  3308 +}
  3309 +.lifeCycle-item:nth-child(2) .lifeCycle-intro{
  3310 + padding-top:20px;
  3311 +}
  3312 +.app-title{
  3313 + font-size: 24px;
  3314 + color:#666;
  3315 +}
  3316 +.app-bg{
  3317 + background: #f6f9fd;
  3318 + border-radius: 5px;
  3319 + padding: 20px;
  3320 +}
  3321 +.info-app-intro{
  3322 + font-size: 16px;
  3323 + color:#666;
  3324 + font-family: 'PingFang-SC-regular';
  3325 + min-height: 158px;
  3326 +}
  3327 +.app-advantage-style{
  3328 + border-right:1px solid #525a6a;
  3329 + padding:60px 20px 0;
  3330 + height:100%;
  3331 +}
  3332 +.Aview-advantage-con:last-child .app-advantage-style{
  3333 + border:none;
  3334 +}
  3335 +.app-advantage-bg{
  3336 + background: url("../img/serviceSecond/cmdb/advantage-bg.png");
  3337 + background-size: cover;
  3338 + position: absolute;
  3339 + height: 100%;
  3340 + width: 100%;
  3341 + left: 0;
  3342 + top: 0;
  3343 + z-index: -1;
  3344 +}
  3345 +.app-advantage-ul{
  3346 + font-size: 14px;
  3347 + max-width: 249px;
  3348 + min-height: 174px;
  3349 +}
  3350 +.app-advantage-ul li{
  3351 + line-height: 36px;
  3352 + list-style: disc;
  3353 +}
  3354 +
  3355 +.cmdb-advantage-con .app-advantage-ul,.Aview-advantage-con:last-child .app-advantage-ul{
  3356 + max-width: 100%;
  3357 +}
  3358 +.cmdb-advantage-con .app-advantage-style{
  3359 + padding:60px 40px 0;
3198 } 3360 }
No preview for this file type
@@ -457,7 +457,7 @@ export function alarm() { @@ -457,7 +457,7 @@ export function alarm() {
457 457
458 return res 458 return res
459 } 459 }
460 -//综合监控管理A-view todo 460 +//综合监控管理A-view
461 export function Aview() { 461 export function Aview() {
462 let res={ 462 let res={
463 title:'综合监控管理A-view', 463 title:'综合监控管理A-view',
@@ -623,98 +623,165 @@ export function Aview() { @@ -623,98 +623,165 @@ export function Aview() {
623 623
624 return res 624 return res
625 } 625 }
626 -//CMDB资产管理 todo 626 +//CMDB资产管理
627 export function cmdb() { 627 export function cmdb() {
628 let res={ 628 let res={
629 title:'CMDB资产管理', 629 title:'CMDB资产管理',
630 - introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。', 630 + introduction:'CMDB（Configuration Management Database 配置管理数据库）存储与管理IT架构中设备的各种配置信息，它与所有服务支持和服务交付流程都紧密相联，支持这些流程的运转、发挥配置信息的价值，同时依赖于相关流程保证数据的准确性。面向应用的CMDB是构建其它ITIL流程的基础，是运维自动化的前提。',
631 data:[ 631 data:[
632 { 632 {
633 title:'产品信息', 633 title:'产品信息',
634 - introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。', 634 + introData:['CMDB（Configuration Management Database 配置管理数据库）存储与管理IT架构中设备的各种配置信息，它与所有服务支持和服务交付流程都紧密相联，支持这些流程的运转、发挥配置信息的价值，同时依赖于相关流程保证数据的准确性。面向应用的CMDB是构建其它ITIL流程的基础，是运维自动化的前提。',
  635 + '构建CMDB也是一个重新审视和剖析现有IT系统与数据的过程，通过CMDB的建设，将建立起集中、统一、标准、可控、服务化的平台型数据管理和消费模式，有利于数据的管理、利用，更有利于提升数据的质量和消费价值。'
  636 + ],
635 type:'info' 637 type:'info'
636 }, 638 },
637 { 639 {
638 - title:'产品特点', 640 + title:'产品价值',
639 introduction:'', 641 introduction:'',
640 - data:[ 642 + dataC:[
641 { 643 {
642 - icon:'assets/img/serviceSecond/information/character-1.png',  
643 - title:'工单信息集中管理',  
644 - introduction:'实现工单信息自动化汇总，工单数据集中化管理，工单流程实时共享。' 644 + img:'assets/img/serviceSecond/cmdb/value-1.png',
  645 + title:'提供统一的配置基础数据和IT架构全景图',
  646 + introData:['产品作为企业CMDB的技术载体，能够为系统监控、服务管理、自动化操作、安全管理、运维大数据、Devops等软件平台提供配置数据服务，帮助企业深入了解和掌控复杂的IT服务及资源组件。']
645 }, 647 },
646 { 648 {
647 - icon:'assets/img/serviceSecond/information/character-2.png',  
648 - title:'提高工作效率',  
649 - introduction:'运用智能化管理工具，降低人工沟通成本，缩短沟通时间。实时跟进工单问题的处理情况，提高工作效率。' 649 + img:'assets/img/serviceSecond/cmdb/value-2.png',
  650 + title:'支持面向业务的CMDB动态建模',
  651 + introData:['系统支持面向业务视角的CMDB分层模型，可以根据实际环境进行配置项分类，配置项属性、配置项状态、CI与CI之间关系的定义和动态调整，提供面向业务的整体IT架构画像。']
650 }, 652 },
651 { 653 {
652 - icon:'assets/img/serviceSecond/information/character-3.png',  
653 - title:'实时处理单数据',  
654 - introduction:'全方位、多维度实时进行工单统计数据，及时掌握工单执行过程中的问题，帮助决策者获取数据支撑。' 654 + img:'assets/img/serviceSecond/cmdb/value-3.png',
  655 + title:'支持自动化的CMDB数据维护',
  656 + introData:['系统内置业内领先的CMDB 自动发现组件，同时支持有代理和无代理两种工作模式，通过自动发现机制发现并收集从公有云/私有云到传统IT的各类 IT 资源配置信息、关联关系，为 CMDB 提供第一手的数据，避免手工方式带来的工作量大，数据更新不及时不准确等问题。']
  657 + },
  658 + {
  659 + img:'assets/img/serviceSecond/cmdb/value-4.png',
  660 + title:'多场景的消费API，基于IT架构驱动运维管理',
  661 + introData:['系统提供场景、配置项、关系等各个层面的数据消费Restful API，实现与监控、ITSM、云管、自动化运维、Devops工具等各种第三方系统对接，实现高性能的查询、更改、推送操作，完成组织内各种运维工具间的基础信息共享和任务协同，实现基于IT架构驱动的运维管理。']
  662 + },
  663 + {
  664 + img:'assets/img/serviceSecond/cmdb/value-5.png',
  665 + title:'面向运维的知识图谱',
  666 + introData:['提供面向运维的知识图谱，从物理连接、部署关系、调用关系、业务关联等多个维度清晰展现配置项关联关系，为故障分析、风险评估、架构管理等复杂运维工作提供支撑。']
  667 + },
  668 + {
  669 + img:'assets/img/serviceSecond/cmdb/value-6.png',
  670 + title:'关联关系可视化展现，提高工作效率',
  671 + introData:['提供从机房位置视角、网络环境视角、业务逻辑视角等可视化展现IT设备之间、IT设备和业务之间、业务和业务之间的关联关系，通过可视化展示方式，使IT管理人员对信息的理解和应用清晰和便捷，能够对这种关联一目了然，从而提高工作效率。']
655 } 672 }
656 ], 673 ],
657 - type:'character' 674 + type:'value'
658 }, 675 },
659 { 676 {
660 title:'系统框架', 677 title:'系统框架',
661 - introduction:'安全运维服务流程的系统架构',  
662 - img:'assets/img/serviceSecond/information/system.png', 678 + introduction:'',
  679 + img:'assets/img/serviceSecond/cmdb/system.png',
663 type:'system' 680 type:'system'
664 }, 681 },
665 { 682 {
666 - title:'产品优势', 683 + title:'CMDB主要实现五个方面的功能',
667 introduction:'', 684 introduction:'',
668 - dataSecond:[ 685 + dataFunc:[
669 { 686 {
670 - icon:'assets/img/serviceSecond/information/advantage-1.png',  
671 - title:'“护网””等保”各规章变成“流程”强制性管控',  
672 - introduction:'特点：规章落地 提前约束 流程强制 全程留痕',  
673 - img:'assets/img/serviceSecond/information/advantageImg.png' 687 + title:'数据模型管理',
  688 + introduction:'提供配置类别、配置项模型和配置关系的自定义。提供图形化界面定义CMDB的数据结构，包括CI类型、每个CI类型包含的属性、对应的CI状态取值、允许的关系类型、CI实例唯一性判断规则，定义每个CI属性字段的数据类型、合法性校验规则、数据调和规则。',
  689 + img:'assets/img/serviceSecond/cmdb/func-1.png'
674 }, 690 },
675 { 691 {
676 - icon:'assets/img/serviceSecond/information/advantage-2.png',  
677 - title:'通过”安全流程“提前管控日常操作、留痕',  
678 - introduction:'',  
679 - img:'assets/img/serviceSecond/information/advantageImg.png' 692 + title:'配置数据收集',
  693 + introduction:'提供企业级配置自动化发现模块，实现对IT环境中各类环境设施、IT基础架构、应用系统和业务服务信息的收集。 ',
  694 + img:'assets/img/serviceSecond/cmdb/func-2.png'
680 }, 695 },
681 { 696 {
682 - icon:'assets/img/serviceSecond/information/advantage-3.png',  
683 - title:'税务局业务流程目录、展示、流程的分类管理',  
684 - introduction:'',  
685 - img:'assets/img/serviceSecond/information/advantageImg.png' 697 + title:'配置数据管理',
  698 + introduction:'采用非结构化数据库技术，完成对海量CMDB信息的管理，包括维护模型、配置项、关系映射的版本，对采集获取的管理对象数据进行模型化和实例化，并将配置项实例映射到应用服务和业务服务。',
  699 + img:'assets/img/serviceSecond/cmdb/func-3.png'
686 }, 700 },
687 { 701 {
688 - icon:'assets/img/serviceSecond/information/advantage-4.png',  
689 - title:'工作组、用户权限的灵活配置',  
690 - introduction:'',  
691 - img:'assets/img/serviceSecond/information/advantageImg.png' 702 + title:'数据消费服务',
  703 + introduction:'提供可视化拓扑展现、报表、访问权限控制等功能。同时为外部运维场景消费CMDB中存储的各类资源配置数据提供标准Restful API接口。',
  704 + img:'assets/img/serviceSecond/cmdb/func-4.png'
  705 + },
  706 + {
  707 + title:'关系可视化展现',
  708 + introduction:'提供从应用视角、网络环境视角、业务逻辑视角等可视化展现IT设备之间、IT设备和业务之间、业务和业务之间的关联关系，使IT管理人员对信息的理解和应用关联一目了然。',
  709 + img:'assets/img/serviceSecond/cmdb/func-5.png'
692 } 710 }
693 ], 711 ],
694 - type:'advantage' 712 + type:'func'
695 }, 713 },
696 { 714 {
697 - title:'平台价值',  
698 - introduction:'魔镜“智能流程协同管理平台”通过信息整合，全局掌控省税务局工单流程每个节点状态，协同流转，处理审批；清晰分类了解流程情况，实时统计工单数据。', 715 + title: 'IT资产生命周期流程化管理',
  716 + introduction: '',
  717 + icon:'assets/img/serviceSecond/cmdb/lifeCycle.png',
  718 + dataLife:[
  719 + {
  720 + title:'',
  721 + introData:['CMDB是数据管道、ITSM是流程管道”，CMDB支持ITSM流程的运转，并于流程所经之处在CMDB留痕，对IT资产的生命周期内业务相关流程进行管理，从而实现全生命周期的信息记录和审计']
  722 + },
  723 + {
  724 + title:'资产续保',
  725 + introData:['维保到期提醒','维保到期维护','维保信息稽核']
  726 + }
  727 + ],
  728 + type:'lifeCycle'
  729 + },
  730 + {
  731 + title:'CMDB的高阶应用',
  732 + data:[
  733 + {
  734 + icon:'assets/img/serviceSecond/cmdb/app-icon-1.png',
  735 + title:'故障处理',
  736 + introduction:'构建故障特征库，以监控故障发生特征，结合CMDB配置信息及关系数据，分析故障发生时的业务影响状态及范围，并实施故障自愈处理。'
  737 + },
  738 + {
  739 + icon:'assets/img/serviceSecond/cmdb/app-icon-2.png',
  740 + title:'能力分析',
  741 + introduction:'结合CMDB及关联数据，分析运维过程中涉及的业务资源、系统资源、运维能力的使用趋势，为系统容量调整提供数据支持。'
  742 + },
  743 + {
  744 + icon:'assets/img/serviceSecond/cmdb/app-icon-3.png',
  745 + title:'自动化运维',
  746 + introduction:'采用自动化运维工具来实施运维工作，管控因人工误操作带来的运维风险，减轻人工运维的工作量。'
  747 + },
  748 + {
  749 + icon:'assets/img/serviceSecond/cmdb/app-icon-4.png',
  750 + title:'系统配置管理',
  751 + introduction:'集中采集和管理各业务或应用系统的配置参数，为系统恢复或重建提供数据支持。实现配置数据的自动分发。'
  752 + },
  753 + ],
  754 + type:'app'
  755 + },
  756 + {
  757 + title:'产品优势',
  758 + introduction:'',
699 dataThird:[ 759 dataThird:[
700 { 760 {
701 - title:'标准化',  
702 - introduction:'信息、流程、时间全面统一，高效协同',  
703 - img:'assets/img/serviceSecond/information/value-bg.png' 761 + title:'随需而动的资源管理模型',
  762 + dataIntro:['灵活的配置管理数据模型，适应各种IT环境的管理需要','同时支持云环境以及传统IT环境的建模','资源分类、属性和关系可任意动态扩展']
704 }, 763 },
705 { 764 {
706 - title:'规范化',  
707 - introduction:'理清流程、制度落地，业务按标准执行',  
708 - img:'assets/img/serviceSecond/information/value-bg.png' 765 + title:'独有的双模自动发现能力',
  766 + dataIntro:['同时支持有代理和无代理模式的自动发现模式','适应不同安全管控模式下的客户IT环境','确保数据更新的准确性和及时性']
709 }, 767 },
710 { 768 {
711 - title:'透明化',  
712 - introduction:'流程申请、流程进度、流程审批全程可观',  
713 - img:'assets/img/serviceSecond/information/value-bg.png' 769 + title:'面向业务的关联分析',
  770 + dataIntro:['面向业务应用的资源统一管理','兼容传统IT架构和云环境的基础设施和应用','内置启发式搜索和关联分析算法','可自动发现连接、部署、调用等关系']
714 } 771 }
715 ], 772 ],
716 - type:'value'  
717 - }, 773 + dataThirdA:[
  774 + {
  775 + title:'丰富多样的服务化API',
  776 + dataIntro:['基于IT资源实现信息共享和运维协同','支持多种场景的CMDB消费调用服务','提供完整和开放的服务API，实现稳定、高效、敏捷运维']
  777 + },
  778 + {
  779 + title:'简单易用，零开发导入',
  780 + dataIntro:['系统采用参数化设计、向导式配置','内置行业最佳实践的CMDB模型和消费场景','实施周期短，维护成本低']
  781 + }
  782 + ],
  783 + type:'advantage'
  784 + }
718 ] 785 ]
719 } 786 }
720 787
@@ -27,42 +27,74 @@ @@ -27,42 +27,74 @@
27 </section> 27 </section>
28 28
29 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"> 30 +<section :class="['info-container','info-container-'+item.type,'info-container-cmdb', 'rel', 'pt-55',{'mb-70':item.type=='system'||item.type=='app','info-container-bg':item.type=='func'}]" v-for="(item,index) in cmdbData.data" :key="item">
31 <div class="div-type" :data-type="item.type"></div> 31 <div class="div-type" :data-type="item.type"></div>
32 - <div class="container"> 32 + <div :class="'container cmdb '+item.type">
33 <div class="info-title">{{item.title}}</div> 33 <div class="info-title">{{item.title}}</div>
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> 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> 35 + <div :class="['info-intro']" v-if="item.introData && item.introData.length>0">
  36 + <div class="info-intro-item" v-for="itemI in item.introData">{{itemI}}</div>
  37 + </div>
  38 + <div class="row pt-30" 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="app-bg pd-25">
  41 + <img class="" :src="itemC.icon" alt="">
  42 + <div class="pt-30 app-title">{{itemC.title}}</div>
  43 + <div class="info-app-intro font-size-14 pt-20">{{itemC.introduction}}</div>
  44 + </div>
40 </div> 45 </div>
41 </div> 46 </div>
42 <div class="info-system pt-30" v-if="item.img"> 47 <div class="info-system pt-30" v-if="item.img">
43 <img :src="item.img" alt=""> 48 <img :src="item.img" alt="">
44 </div> 49 </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> 50 + <div class="row pt-30 pd-40" v-if="item.dataC && item.dataC.length>0">
  51 + <div class="col-lg-6 pd-40" v-for="(itemA,indexA) in item.dataC">
  52 + <div class="div-img text-center">
  53 + <img :src="itemA.img" alt="">
  54 + </div>
  55 + <div class="cloud-c-title pt-30">{{itemA.title}}</div>
  56 + <ul :class="[{'row':indexA>=2}, {'flex-column-center':indexA<2} ,'pt-30','pl-20','pr-20']" v-if="itemA.introData.length>0">
  57 + <li :class="['list-style-li']" v-for="(itemV,indexV) in itemA.introData">{{itemV}}</li>
  58 + </ul>
  59 + </div>
  60 + </div>
  61 + <div class="row mt-40 pb-30" v-if="item.dataFunc && item.dataFunc.length>0">
  62 + <div class="func-top row">
  63 + <div @click="changeFunc(indexF)" :class="['col-lg-2', 'func-top-item',{'func-item-active':funcActive==indexF}]" v-for="(itemF,indexF) in item.dataFunc">
  64 + {{itemF.title}}
53 </div> 65 </div>
54 </div> 66 </div>
55 - <div class="col-lg-8">  
56 - <img :src="advantageImg" alt=""> 67 + <div class="func-bottom row pt-30">
  68 + <div class="col-lg-6 func-bottom-title"><span></span><span>{{funcTitle}}</span></div>
  69 + <div :class="['col-lg-6', 'func-bottom-intro',{'func-l-p':funcActive==1}]"><span class="func-symbol">“</span><span class="funcIntro-span">{{funcIntro}}</span></div>
  70 + </div>
  71 + </div>
  72 +
  73 + <div class="row pt-50" v-if="item.dataLife && item.dataLife.length>0">
  74 + <div class="col-lg-7">
  75 + <img :src="item.icon" alt="">
  76 + </div>
  77 + <div class="col-lg-5 lifeCycle-con flex-column-center">
  78 + <div class="lifeCycle-item" v-for="itemL in item.dataLife">
  79 + <div class="lifeCycle-item-title" v-if="itemL.title">{{itemL.title}}</div>
  80 + <div class="lifeCycle-intro">
  81 + <div class="lifeCycle-intro-item" v-for="itemI in itemL.introData">{{itemI}}</div>
  82 + </div>
  83 + </div>
57 </div> 84 </div>
58 </div> 85 </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> 86 + </div>
  87 + <div class="func-bg" v-if="item.type=='func'">
  88 + <img :src="funcImg" alt="">
  89 + </div>
  90 + <div class="Aview-con" v-if="item.dataThird && item.dataThird.length>0">
  91 + <div class="row Aview-container">
  92 + <div class="col-lg-4 Aview-advantage-con" v-for="(itemV,indexV) in item.dataThird">
  93 + <div class="info-value app-advantage-style pb-50" >
  94 + <div :class="['pro-info-title']">
  95 + <div class=" advantage-title-Aview">{{itemV.title}}</div>
  96 + <ul class="app-advantage-ul pt-30 advantage-intro-Aview"><li v-for="(itemP,indexP) in itemV.dataIntro">{{itemP}}</li></ul>
  97 + <div class="maintenance-advantage-num pt-50 pb-60">0{{indexV+1}}</div>
66 </div> 98 </div>
67 </div> 99 </div>
68 100
@@ -70,6 +102,20 @@ @@ -70,6 +102,20 @@
70 </div> 102 </div>
71 103
72 </div> 104 </div>
  105 + <div class=" Aview-con cmdb-advantage-con" v-if="item.dataThirdA && item.dataThirdA.length>0">
  106 + <div class="row Aview-container">
  107 + <div class="col-lg-6 Aview-advantage-con" v-for="(itemV,indexV) in item.dataThirdA">
  108 + <div class="info-value pb-50 app-advantage-style" >
  109 + <div :class="['pro-info-title']">
  110 + <div class=" advantage-title-Aview">{{itemV.title}}</div>
  111 + <ul class="app-advantage-ul pt-30 advantage-intro-Aview"><li v-for="(itemP,indexP) in itemV.dataIntro">{{itemP}}</li></ul>
  112 + <div class="maintenance-advantage-num pt-50 pb-60">0{{indexV+3}}</div>
  113 + </div>
  114 + </div>
  115 + </div>
  116 + </div>
  117 + </div>
  118 + <div class="app-advantage-bg" v-if="item.type=='advantage'"></div>
73 </section> 119 </section>
74 120
75 121
@@ -10,14 +10,44 @@ export default { @@ -10,14 +10,44 @@ export default {
10 let cmdbData=cmdb(); 10 let cmdbData=cmdb();
11 //页签高亮显示 11 //页签高亮显示
12 let tabActive=Vue.ref(0); 12 let tabActive=Vue.ref(0);
  13 + //cmdb实现五大功能的高亮显示
  14 + let funcActive=Vue.ref(0);
  15 + let funcTitle=Vue.ref();
  16 + let funcIntro=Vue.ref();
  17 + let funcImg=Vue.ref();
  18 + const funcData=()=>{
  19 + cmdbData.data.map(item=>{
  20 + if(item.type=='func'){
  21 + funcTitle.value=item.dataFunc[0].title;
  22 + funcIntro.value=item.dataFunc[0].introduction;
  23 + funcImg.value=item.dataFunc[0].img;
  24 + }
  25 + })
  26 + }
  27 + //五个功能change事件
  28 + let changeFunc=(index)=>{
  29 + funcActive.value=index;
  30 + cmdbData.data.map(item=>{
  31 + if(item.type=='func'){
  32 + funcTitle.value=item.dataFunc[index].title;
  33 + funcIntro.value=item.dataFunc[index].introduction;
  34 + funcImg.value=item.dataFunc[index].img;
  35 + }
  36 + })
  37 + }
13 // 挂载完 38 // 挂载完
14 Vue.onMounted(() => { 39 Vue.onMounted(() => {
15 - 40 + funcData();
16 }) 41 })
17 42
18 return { 43 return {
19 cmdbData, 44 cmdbData,
20 - tabActive 45 + tabActive,
  46 + funcActive,
  47 + funcTitle,
  48 + funcIntro,
  49 + funcImg,
  50 + changeFunc
21 } 51 }
22 } 52 }
23 53