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

【无】门户网站二级页面-魔镜智能运维管理一体机



See merge request !978

@@ -1652,7 +1652,7 @@ blockquote:before {
 
 
 .footer-section {
 .footer-section {
     position: relative;
     position: relative;
-    background:#f4f2ff;
+    background:#242933;
 }
 }
 
 
 
 
@@ -1695,24 +1695,25 @@ blockquote:before {
 }
 }
 
 
 .footer-widget.links-widget li a {
 .footer-widget.links-widget li a {
-    color: #848484;
+    color: #ffffff;
     margin-bottom: 10px;
     margin-bottom: 10px;
     display: inline-block;
     display: inline-block;
     text-transform: capitalize;
     text-transform: capitalize;
     transition: .5s;
     transition: .5s;
 }
 }
 .footer-widget.links-widget li a:hover{
 .footer-widget.links-widget li a:hover{
-    color: #1C00AF;
+    color: #e43730;
     transition: .5s;
     transition: .5s;
 }
 }
 /*office info widget*/
 /*office info widget*/
 .office-info li {
 .office-info li {
     display: flex;
     display: flex;
     margin-bottom: 8px;
     margin-bottom: 8px;
+    color:#fff;
 }
 }
 
 
 .office-info li i {
 .office-info li i {
-    color: #1C00AF;
+    color: #ffffff;
     font-size: 18px;
     font-size: 18px;
     margin-right: 20px;
     margin-right: 20px;
 }
 }
@@ -1946,6 +1947,7 @@ blockquote:before {
     display: -webkit-box;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     -webkit-box-orient: vertical;
+    font-size: 12px;
 }
 }
 .height-50{
 .height-50{
     height: 50px;
     height: 50px;
@@ -2056,5 +2058,65 @@ blockquote:before {
     padding:40px;
     padding:40px;
 }
 }
 .pd-20{
 .pd-20{
+    padding:20px;
+}
+.pro-item{
+    position: relative;
+}
+.pro-item-content{
+    position: absolute;
+    top:0;
+    left:0;
+    padding: 40px 90px;
+    height: 100%;
+    color: #fff;
+    display: flex;
+    align-items: center;
+}
+.pro-advantage{
+    background: url("../img/serviceSecond/maintenance/advantage-bg.png");
+    background-size: cover;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: -1;
+}
+.pro-info-title{
+    color:#fff;
+}
+.pro-advantage-style{
+    border-right:1px solid #525a6a;
+    padding:50px 20px 0;
+}
+.maintenance-advantage-item:last-child .pro-advantage-style{
+    border-right: none;
+}
+.pro-advantage-ul{
+    font-size: 14px;
+}
+.pro-advantage-ul li{
+    padding:5px 0;
+}
+.maintenance-advantage{
+    border-bottom:1px solid #525a6a;
+    margin-bottom: 0;
+}
+.maintenance-advantage-num{
+    font-size: 90px;
+    color:#2d3340;
+}
+.maintenance-line{
+    border-top:1px solid #525a6a;
+    width:100%;
+}
+.footer-widget h4{
+    color:#fff;
+}
+.dot-item-title{
+    font-size: 14px;
 
 
+    font-weight: bold;
 }
 }
+

@@ -269,4 +269,117 @@ export function businessApp () {
     }
     }
 
 
     return res
     return res
+}
+export function maintenance() {
+    let res={
+        title:'魔镜智能运维管理一体机',
+        introduction:'智能运维服务一体机提供数据中心各类计算存储设备、网络安全设备、虚拟化/云平台、数据库、中间件、容器、微服务、Hadoop 业务应用等设备进行实时采集、实时分析、异常报警、集中存储和事后分析功能，具备全南的监控分析能力。帮助用户有效降低系统故障，降任运维成本及管理的复杂度，异著提高系统格体的安全性，可靠性和运行效率，保障设备7x24小时正常、持续、稳定运行。',
+        data:[
+            {
+                title:'产品信息',
+                introduction:'智能运维服务一体机提供数据中心各类计算存储设备、网络安全设备、虚拟化/云平台、数据库、中间件、容器、微服务、Hadoop 业务应用等设备进行实时采集、实时分析、异常报警、集中存储和事后分析功能，具备全南的监控分析能力。帮助用户有效降低系统故障，降任运维成本及管理的复杂度，异著提高系统格体的安全性，可靠性和运行效率，保障设备7x24小时正常、持续、稳定运行。',
+                type:'info',
+                img:'assets/img/serviceSecond/maintenance/info.png'
+            },
+            {
+                title:'问题与挑战',
+                introduction:'',
+                dataPro:[
+                    {
+                        introduction:'运维数据种类多，规模大，标准化程度低且质量不高，数据管理和应用缺乏统一的管控工具',
+                        img:'assets/img/serviceSecond/maintenance/problems-1.png'
+                    },
+                    {
+                        introduction:'缺乏预警机制，当故障被发现时，用户体验已受到极大影响',
+                        img:'assets/img/serviceSecond/maintenance/problems-2.png'
+                    },
+                    {
+                        introduction:'系统故障根因定位困难，"主要依靠专家经验或手工分析，耗时费力，无法快速判定故障点',
+                        img:'assets/img/serviceSecond/maintenance/problems-3.png'
+                    },
+                    {
+                        introduction:'如何确保IT资产在业务应用中从始至终得到很好的管理和服务?',
+                        img:'assets/img/serviceSecond/maintenance/problems-4.png'
+                    }
+                ],
+                type:'problems'
+            },
+            {
+                title:'产品特点',
+                introduction:'',
+                dataFour:[
+                    {
+                        img:'assets/img/serviceSecond/maintenance/character-1.png',
+                        title:'动态关联IT与业务',
+                        introduction:'从业务视角出发，将不同维度的IT资源关联整合，以简洁易懂的界面呈现业务与资源的关联关系。广泛的资源监控能力，任何影响业务的因素都及时体现，使IT运维效率得到大幅提升。',
+                        isDisplay:true
+                    },
+                    {
+                        img:'assets/img/serviceSecond/maintenance/character-2.png',
+                        title:'业务健康随时掌控',
+                        introduction:'预置业务运维综合评价机制，基于“繁忙度”“健康度”“可用性”等多维度的业务性能监控指标，以业务运维状态卡片的方式直观展现业务状态，确保业务的正常运行。',
+                        isDisplay:true
+                    },
+                    {
+                        img:'assets/img/serviceSecond/maintenance/character-3.png',
+                        title:'故障根因分析溯源',
+                        introduction:'业务系统出现故障时，根据实际业务服务模型，通过业务视图与IT资源间的关联性，实时映射基础设施监控（IM）中影响服务的告警事件，准确定位故障根源、快速恢复业务，并可设置优先级.',
+                        isDisplay:true
+                    },
+                    {
+                        img:'assets/img/serviceSecond/maintenance/character-4.png',
+                        title:'智能告警中心',
+                        introduction:'实现现有的多种告警源的通知方式及工单系统进行联动，实现统一接入、分级展示、告警降噪、告警处理、告警推送、告警关闭这一系列告警事件的闭环管理，支持告警升/降级，根据故障影响范围和终端用户判定处理优先级。',
+                        isDisplay:true
+                    },
+                    {
+                        img:'assets/img/serviceSecond/maintenance/character-5.png',
+                        title:'提供IT规划参考依据',
+                        introduction:'提供的业务负载情况及增长趋势曲线，可以对IT资源与业务情况进行评估，定位系统性能瓶颈和容量预警，为管理者提供扩容建议和参考，为IT投资提供量化依据。',
+                        isDisplay:true
+                    },
+                    {
+                        img:'assets/img/serviceSecond/maintenance/character-6.png',
+                        title:'低代码开发技术设计，实现可视化服务编排',
+                        introduction:'提供低代码开发、降低使用门槛，运维人员不必重新构建基础工具，利用平台能力随需进行快速轻量级开发。支持多语言框架，包括但不限于Python、Java、shell、perl等语言，提供可拖拽式前端开发工具，实现前端布局可视化。提供自动化编译、构建、部署、执行等操作，实现自动部署，集成统一登录、WEB 安全防护模块、功能组件模块等通用模块。',
+                        isDisplay:true
+                    },
+                    {
+                        img:'assets/img/serviceSecond/maintenance/character-7.png',
+                        title:'形成以面向业务场景为驱动的服务型CMDB',
+                        introduction:'构建符合云架构、智能监控、自动化运维的轻量级CMDB，并形成数据中心枢纽，支持多种业务场景，比如资产管理、资源可视化、运维监控、自动化运维、多云管理等等。',
+                        isDisplay:true
+                    },
+                    {
+                        img:'assets/img/serviceSecond/maintenance/character-8.png',
+                        title:'丰富的分析算法 拖拽式算法模型 对运维数据应用提供了无限可能',
+                        introduction:'提供AI算法涵盖聚类、分类、回归、自然语言处理、时间序列、关联、综合评价、推荐等8大类机器学习算法。用户基干这些算法构建模型，从而开展深度数据分析，发掘蕴藏在业务数据中价值。算法分析提供了拖拽式可视化的建模功能，让用户可以通过拖拽的方式搭建机器学习实验。根据算法的不同特点选用Spark、Python等不同框架进行实现，真正做到成熟、稳定、简单、易用。',
+                        isDisplay:true
+                    }
+                ],
+                type:'character'
+            },
+            {
+                title:'产品优势',
+                introduction:'',
+                dataThird:[
+                    {
+                        title:'便捷',
+                        dataIntro:['硬件一体化，快速部署','监控对象灵活添加','丰富灵活的报表报告','个性化的首页展示']
+                    },
+                    {
+                        title:'适应',
+                        dataIntro:['分布式数据信息采集','全面支持各类监控设备','大数据分析处理','灵活的系统配置']
+                    },
+                    {
+                        title:'智能',
+                        dataIntro:['建立关联分析引擎','智能精准告警、分级告警','容量智能监测、分析','自动化的运维处理']
+                    }
+                ],
+                type:'advantage'
+            },
+        ]
+    }
+
+    return res
 }
 }

@@ -104,7 +104,7 @@
     <!--====================================================================
     <!--====================================================================
                             Start footer section
                             Start footer section
     =====================================================================-->
     =====================================================================-->
-    <footer class="footer-section mt-125 pt-100">
+    <footer class="footer-section pt-100">
         <div class="container">
         <div class="container">
 
 
             <div class="row">
             <div class="row">
@@ -116,7 +116,7 @@
                         <div class="col-sm-4">
                         <div class="col-sm-4">
                             <div class="footer-widget logo-widget mr-35">
                             <div class="footer-widget logo-widget mr-35">
                                 <div class="footer-logo">
                                 <div class="footer-logo">
-                                    <router-link to="/"><img src="assets/img/logo.png" alt="" title=""></router-link>
+                                    <router-link to="/"><img src="assets/img/logo-footer.png" alt="" title=""></router-link>
                                 </div>
                                 </div>
                                 <div class="widget-content">
                                 <div class="widget-content">
                                     <div class="footer-social-icon mt-20 text-center">
                                     <div class="footer-social-icon mt-20 text-center">

@@ -37,6 +37,12 @@ const routes = [
         name: 'businessApp',
         name: 'businessApp',
         component: () => myImport('views/serviceSecond/businessApp/index')
         component: () => myImport('views/serviceSecond/businessApp/index')
     },
     },
+    //魔镜智能运维管理一体机
+    {
+        path: '/services/maintenance',
+        name: 'maintenance',
+        component: () => myImport('views/serviceSecond/maintenance/index')
+    },
 ];
 ];
 
 
 const router = VueRouter.createRouter({
 const router = VueRouter.createRouter({

@@ -28,7 +28,7 @@
 </section>
 </section>
 
 
 
 
-<section :class="['info-container', 'rel', 'pt-55',{'info-container-bg':item.type=='character'}]" v-for="(item,index) in businessAppData.data" :key="item">
+<section :class="['info-container', 'rel', 'pt-55',{'info-container-bg':item.type=='character','pb-50':item.type=='value'}]" v-for="(item,index) in businessAppData.data" :key="item">
     <div class="div-type" :data-type="item.type"></div>
     <div class="div-type" :data-type="item.type"></div>
     <div class="container">
     <div class="container">
         <h3 class="info-title">{{item.title}}</h3>
         <h3 class="info-title">{{item.title}}</h3>

+<section class="hero-section rel  rpt-150 pb-130 rpb-0">
+    <div class="shape shapeAnimationOne l-10 t-60">
+        <img src="assets/img/shapes/shape1.png" alt="Shape">
+    </div>
+</section>
+
+
+<section class="intro-Con rel rpt-150 rpb-0 text-left" >
+    <img src="assets/img/serviceSecond/serviceSecond.jpg" alt="Shape">
+    <div class="container  banner-container">
+        <div class="row banner-height">
+            <div class="banner-introduction color-white col-lg-6">
+                <h2 class="intro-title color-white">{{maintenanceData.title}}</h2>
+                <span class="intro-intro">{{maintenanceData.introduction}}</span>
+            </div>
+        </div>
+    </div>
+
+</section>
+<section class="intro-tab">
+    <div class="container">
+        <ul class="intro-tab-container nav nav-pills">
+            <li class="col-lg-2" v-for="(item,index) in maintenanceData.data" :key="item">
+                <span :class="['tab-item',{'tab-item-active':tabActive==index}]" @click="goItemType(item.type)" >{{item.title}}</span>
+            </li>
+        </ul>
+    </div>
+</section>
+
+
+<section :class="['info-container', 'rel', {'mb-70':item.type=='system'||item.type=='problems' ||item.type=='character'}, 'pt-55']" v-for="(item,index) in maintenanceData.data" :key="item">
+    <div class="div-type" :data-type="item.type"></div>
+    <h3 v-if="item.type=='advantage'" :class="['info-title','pb-40','maintenance-advantage',{'color-white':item.type=='advantage'}]">{{item.title}}</h3>
+    <div class="container">
+        <h3 v-if="item.type!='advantage'" :class="['info-title']">{{item.title}}</h3>
+        <div :class="['info-intro',{'text-align-center':item.type=='system' || item.type=='value'},{'max-width-600':item.type=='value'}]" v-if="item.introduction">{{item.introduction}}</div>
+        <div class="row"  v-if="item.data && item.data.length>0">
+            <div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
+                <img class="pt-50" :src="itemC.icon" alt="">
+                <h4 class="pt-30">{{itemC.title}}</h4>
+                <div class="info-character-intro">{{itemC.introduction}}</div>
+            </div>
+        </div>
+        <div class="info-system pt-30 text-center" v-if="item.img">
+            <img :src="item.img" alt="">
+        </div>
+        <div class="row pd-40 " v-if="item.dataPro && item.dataPro.length>0">
+            <div class="col-lg-6 pt-30" v-for="(itemP,indexP) in item.dataPro">
+                <div class="pro-item">
+                    <img :src="itemP.img" alt="">
+                    <div class="pro-item-content">{{itemP.introduction}}</div>
+                </div>
+            </div>
+        </div>
+        <div :class="[{'pro-advantage':item.type=='advantage'}]"></div>
+        <div class="row pt-30" v-if="item.dataFour && item.dataFour.length>0">
+            <div class="row-top row" v-for="(itemC,indexC) in item.dataFour" >
+                <div class="col-lg-6" v-if="indexC==characterActive">
+                    <img class="" :src="itemC.img" alt="">
+                </div>
+                <div class="col-lg-6 flex-column-center " v-if="indexC==characterActive">
+                    <h3>{{itemC.title}}</h3>
+                    <div class="pt-30">{{itemC.introduction}}</div>
+                </div>
+            </div>
+            <div class="row-bottom row pt-30">
+                <i class="iconCharacter icon-left" @click="prev(item.dataFour.length)"></i>
+                <div class="dot-container row">
+                    <div @click="changeCharacter(indexC)" :class="['dot-item', 'col-lg-4', {'dot-item-active':indexC==characterActive,'div-hide':!itemC.isDisplay}]" v-for="(itemC,indexC) in item.dataFour">
+                        <div class="dot-item-title"  v-if="itemC.isDisplay">{{itemC.title}}</div>
+                        <div class="dot-item-intro"  v-if="itemC.isDisplay">{{itemC.introduction}}</div>
+                    </div>
+                </div>
+                <i class="iconCharacter icon-right"  @click="next(item.dataFour.length)"></i>
+            </div>
+        </div>
+        <div class="row"  v-if="item.dataThird && item.dataThird.length>0">
+            <div class="col-lg-4 maintenance-advantage-item" v-for="(itemV,indexV) in item.dataThird">
+                <div class="info-value pro-advantage-style  pb-50" >
+                    <div :class="['pro-info-title']">
+                        <h4 class="color-white">{{itemV.title}}</h4>
+                        <ul class="pro-advantage-ul pt-30"><li v-for="(itemP,indexP) in itemV.dataIntro">{{itemP}}</li></ul>
+                        <div class="maintenance-advantage-num pt-100 pb-80">0{{indexV+1}}</div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <div v-if="item.type=='advantage'" class="maintenance-line pb-80"></div>
+</section>
+
+
+

+import pageInit from "../../../minixs/pageInit.js";
+import {maintenance} from "../../../../assets/img/data/serviceSecond.js";
+export default {
+    name: 'maintenance',
+    template: '',
+    mixins:[pageInit],
+    components: {},
+    props: [],
+    setup(props, {attrs, slots, emit}) {
+        let maintenanceData=maintenance();
+        //页签高亮显示
+        let tabActive=Vue.ref(0);
+        //特点hover显示的图片
+        let characterImg=Vue.ref();
+        let setcharacter=()=>{
+            if(maintenanceData.data && maintenanceData.data.length>0){
+                maintenanceData.data.map(item=>{
+                    if(item.type=='character'){
+                        characterImg.value=item.dataFour[0].img;
+                    }
+
+
+                })
+            }
+        }
+        setcharacter();
+        //优势hover高亮显示
+        let characterActive=Vue.ref(0);
+
+        //页签点击跳转到对应的目标
+        let goItemType=(type)=>{
+            let top=$("[data-type='"+type+"']").offset().top;
+            let total=top-100;
+            let distance = document.documentElement.scrollTop || document.body.scrollTop
+            //计算每一小段的距离
+            let step=total/6;
+            (function smoothDown (){
+                if(distance < total){
+                    distance += step;
+                    //移动一小段
+                    document.body.scrollTop =distance;
+                    document.documentElement.scrollTop = distance;
+                    //设定每一次跳到的时间间隔为10ms
+                    setTimeout(smoothDown,10)
+                }else{
+                    //限制股东停止的距离
+                    document.body.scrollTop = total;
+                    document.documentElement.scrollTop = total;
+                }
+            })()
+        }
+        //特点的事件
+        let prev=(dataLength)=>{
+            if(characterActive.value>0){
+                characterActive.value--
+                if(characterActive.value == 0 || characterActive.value+1==dataLength-6){
+                    setDisplay();
+                }else if(characterActive.value+1==dataLength-3 ){
+                    changeDot(dataLength,2);
+                }
+            }else if(characterActive.value == 0){
+                characterActive.value=dataLength-1
+                changeDot(dataLength,1);
+            }
+        }
+        let next=(dataLength)=>{
+            if((characterActive.value+1)!=dataLength) {
+                characterActive.value++
+            }else{
+                characterActive.value=0;
+            }
+            changeDot(dataLength);
+        }
+        let changeCharacter=(indexC)=>{
+            characterActive.value=indexC;
+        }
+        //特点左右点击切换
+        let changeDot=(dataLength,flag)=>{
+            if(flag==1){
+                //当前为第一个时向前点击
+                maintenanceData.data.map((item,index)=>{
+                    if(item.type == 'character'){
+                        item.dataFour.map((v,i)=>{
+                            if(i>characterActive.value-3){
+                                v.isDisplay=true;
+                            }else{
+                                v.isDisplay=false;
+                            }
+                        })
+                    }
+                })
+            }else if(flag==2){
+                //向前点击
+                maintenanceData.data.map((item,index)=>{
+                    if(item.type == 'character'){
+                        item.dataFour.map((v,i)=>{
+                            if(i>characterActive.value-3 && i<=characterActive.value){
+                                v.isDisplay=true;
+                            }else{
+                                v.isDisplay=false;
+                            }
+                        })
+                    }
+                })
+            }else{
+                if(characterActive.value>2 && characterActive.value<dataLength){
+                    if(maintenanceData.data && maintenanceData.data.length>0){
+                        maintenanceData.data.map((item,index)=>{
+                            if(item.type == 'character'){
+                                item.dataFour[characterActive.value-3].isDisplay=false;
+                            }
+                        })
+                    }
+                }else{
+                    setDisplay();
+                }
+            }
+
+        }
+        //设置特点dot全部显示
+        let setDisplay=(flag)=>{
+            if(maintenanceData.data && maintenanceData.data.length>0){
+                if(flag==1){
+
+                }else{
+                    maintenanceData.data.map((item,index)=>{
+                        if(item.type == 'character'){
+                            item.dataFour.map(v=>{
+                                v.isDisplay=true;
+                            })
+                        }
+                    })
+                }
+
+            }
+        }
+        // 挂载完
+        Vue.onMounted(() => {
+
+        })
+
+        return {
+            characterImg,
+            maintenanceData,
+            tabActive,
+            characterActive,
+            setcharacter,
+            goItemType,
+            prev,
+            next,
+            changeCharacter,
+            changeDot,
+            setDisplay
+        }
+    }
+
+}

@@ -28,7 +28,7 @@
 </section>
 </section>
 
 
 
 
-<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">
+<section :class="['info-container', 'rel', {'mb-70':item.type=='system'}, 'pt-55',{'info-container-bg':item.type=='character','pb-50':item.type=='value'}]" v-for="(item,index) in securityLogData.data" :key="item">
     <div class="div-type" :data-type="item.type"></div>
     <div class="div-type" :data-type="item.type"></div>
     <div class="container">
     <div class="container">
         <h3 class="info-title">{{item.title}}</h3>
         <h3 class="info-title">{{item.title}}</h3>

@@ -206,7 +206,7 @@
                     </ol>
                     </ol>
                 </div>
                 </div>
             </div>
             </div>
-            <div class="col-lg-6">
+            <div class="col-lg-6" @click="jumpSecond('maintenance')">
                 <div class="service-left-image wow customFadeInLeft delay-0-1s slow">
                 <div class="service-left-image wow customFadeInLeft delay-0-1s slow">
                     <img src="assets/img/services/p7.png" style="border-radius: 10px;">
                     <img src="assets/img/services/p7.png" style="border-radius: 10px;">
                 </div>
                 </div>

@@ -14,6 +14,8 @@ export default {
                 proxy.$router.push({path:'/services/securityLog'})
                 proxy.$router.push({path:'/services/securityLog'})
             }else if(type == 'business'){
             }else if(type == 'business'){
                 proxy.$router.push({path:'/services/businessApp'})
                 proxy.$router.push({path:'/services/businessApp'})
+            }else if(type == 'maintenance'){
+                proxy.$router.push({path:'/services/maintenance'})
             }
             }
         }
         }
         return {
         return {