Authored by 鲁尚清

【无】 【公司网站】智能多运维平台

... ... @@ -2189,6 +2189,7 @@ blockquote:before {
}
.pro-info-title{
color:#fff;
padding:0 20px;
}
.pro-advantage-style{
border-right:1px solid #525a6a;
... ... @@ -2202,6 +2203,7 @@ blockquote:before {
}
.pro-advantage-ul li{
padding:5px 0;
line-height: 32px;
}
.maintenance-advantage{
border-bottom:1px solid #525a6a;
... ... @@ -3144,3 +3146,53 @@ blockquote:before {
.Aview-advantage-con:hover .maintenance-advantage-num{
color:#1665b1;
}
/*lsq 多运维平台样式 2022-10-12*/
.flex-warp-center{
display: flex;
justify-content: center;
}
.cloud-content{
background: #ffffff;
padding:10px;
border-radius: 5px;
box-shadow: 0 0 8px rgba(70,144,241,.3);
}
.cloud-title{
background: linear-gradient(to bottom, #9cc7fe 0%, #4690f1 100%);
padding:20px;
color:#ffffff;
font-size: 21px;
font-family: 'PingFang-SC-heavy';
border-radius: 6px;
}
.cloud-icon-item{
border-right:1px solid #eee;
margin:25px 0;
}
.cloud-icon-item-con{
align-items: center;
padding:10px;
}
.cloud-icon-title{
font-size: 18px;
color:#666;
}
.cloud-content-public .cloud-icon-item:nth-child(3n),
.cloud-content-private .cloud-icon-item:nth-child(2n){
border:none;
}
.cloud-c-title{
font-size: 24px;
color:#333;
font-family: 'PingFang-SC-medium';
text-align: center;
}
@media (min-width: 1400px) {
.container.cloud {
max-width: 1200px;
}
}
.banner-introduction .intro-intro{
padding-top:20px;
}
\ No newline at end of file
... ...
... ... @@ -720,98 +720,127 @@ export function cmdb() {
return res
}
//魔镜智能多云运维平台 todo
//魔镜智能多云运维平台
export function cloud() {
let res={
title:'魔镜智能多云运维平台',
introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行,构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
introduction:'支持了国内外所有主流云厂商,包含混合云、多云环境下对计算资源的集中管理,自动化运维、监控、合规审计、多云纳管、云资源全生命周期等多个维度提供统一运维管控,提供系统映像、通过既定策略优化工作负载,系统运行状态,以及任务执行过程的可视化监控,并提供丰富的告警机制帮助客户进行快速处理,从而进行灵活的资源管理与运维。',
data:[
{
title:'产品信息',
introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行,构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
type:'info'
},
{
title:'产品特点',
introduction:'',
data:[
{
icon:'assets/img/serviceSecond/information/character-1.png',
title:'工单信息集中管理',
introduction:'实现工单信息自动化汇总,工单数据集中化管理,工单流程实时共享。'
},
{
icon:'assets/img/serviceSecond/information/character-2.png',
title:'提高工作效率',
introduction:'运用智能化管理工具,降低人工沟通成本,缩短沟通时间。实时跟进工单问题的处理情况,提高工作效率。'
},
{
icon:'assets/img/serviceSecond/information/character-3.png',
title:'实时处理单数据',
introduction:'全方位、多维度实时进行工单统计数据,及时掌握工单执行过程中的问题,帮助决策者获取数据支撑。'
}
],
type:'character'
introduction:'支持了国内外所有主流云厂商,包含混合云、多云环境下对计算资源的集中管理,自动化运维、监控、合规审计、多云纳管、云资源全生命周期等多个维度提供统一运维管控,提供系统映像、通过既定策略优化工作负载,系统运行状态,以及任务执行过程的可视化监控,并提供丰富的告警机制帮助客户进行快速处理,从而进行灵活的资源管理与运维。',
type:'info',
img:'assets/img/serviceSecond/cloud/info.png',
},
{
title:'系统框架',
introduction:'安全运维服务流程的系统架构',
img:'assets/img/serviceSecond/information/system.png',
type:'system'
title: '',
publicCloud: {
title: '公有云',
iconData: [
{
title: '阿里云',
icon: 'assets/img/serviceSecond/cloud/aliyun.png'
},
{
title: '腾讯云',
icon: 'assets/img/serviceSecond/cloud/tengxunyun.png'
},
{
title: 'HUAWEI',
icon: 'assets/img/serviceSecond/cloud/huawei.png'
},
{
title: 'Microsoft Azure',
icon: 'assets/img/serviceSecond/cloud/microsoftAzure.png'
},
{
title: 'UCLOUD',
icon: 'assets/img/serviceSecond/cloud/ucloud.png'
},
{
title: '京东云',
icon: 'assets/img/serviceSecond/cloud/jdyun.png'
},
{
title: '青云',
icon: 'assets/img/serviceSecond/cloud/qingyun.png'
},
{
title: 'AWS',
icon: 'assets/img/serviceSecond/cloud/aws.png'
},
{
title: '百度云',
icon: 'assets/img/serviceSecond/cloud/baiduyun.png'
},
]
},
privateCloud: {
title: '私有云',
iconData: [
{
title: 'openstack',
icon: 'assets/img/serviceSecond/cloud/openstack.png'
},
{
title: 'vmware',
icon: 'assets/img/serviceSecond/cloud/vmware.png'
},
{
title: '物理服务器',
icon: 'assets/img/serviceSecond/cloud/PCservice.png'
},
{
title: '虚拟机',
icon: 'assets/img/serviceSecond/cloud/vmware1.png'
},
{
title: '路由器/交换机',
icon: 'assets/img/serviceSecond/cloud/route.png'
},
{
title: '存储设备',
icon: 'assets/img/serviceSecond/cloud/storage.png'
}
]
},
type:'icon'
},
{
title:'产品优势',
title:'产品特点',
introduction:'',
dataSecond:[
dataC:[
{
icon:'assets/img/serviceSecond/information/advantage-1.png',
title:'“护网””等保”各规章变成“流程”强制性管控',
introduction:'特点:规章落地 提前约束 流程强制 全程留痕',
img:'assets/img/serviceSecond/information/advantageImg.png'
},
{
icon:'assets/img/serviceSecond/information/advantage-2.png',
title:'通过”安全流程“提前管控日常操作、留痕',
introduction:'',
img:'assets/img/serviceSecond/information/advantageImg.png'
},
{
icon:'assets/img/serviceSecond/information/advantage-3.png',
title:'税务局业务流程目录、展示、流程的分类管理',
introduction:'',
img:'assets/img/serviceSecond/information/advantageImg.png'
img:'assets/img/serviceSecond/cloud/character-1.png',
title:'多云资源统一管理',
introData:[
'可纳管多家主流私有云、公有云的计算、存储、网络等资源,实现资源台账可视化、资源操作便捷化以及多租户多层级的资源配额管理和数据分权。'
]
},
{
icon:'assets/img/serviceSecond/information/advantage-4.png',
title:'工作组、用户权限的灵活配置',
introduction:'',
img:'assets/img/serviceSecond/information/advantageImg.png'
}
],
type:'advantage'
},
{
title:'平台价值',
introduction:'魔镜“智能流程协同管理平台”通过信息整合,全局掌控省税务局工单流程每个节点状态,协同流转,处理审批;清晰分类了解流程情况,实时统计工单数据。',
dataThird:[
{
title:'标准化',
introduction:'信息、流程、时间全面统一,高效协同',
img:'assets/img/serviceSecond/information/value-bg.png'
img:'assets/img/serviceSecond/cloud/character-2.png',
title:'多云环境自动化编排',
introData:[
'通过对云资源的蓝图设计、服务发布、服务申请、工单管理以及资源回收等,帮助客户实现资源的自动化运维和全生命周期管理。'
]
},
{
title:'规范化',
introduction:'理清流程、制度落地,业务按标准执行',
img:'assets/img/serviceSecond/information/value-bg.png'
img:'assets/img/serviceSecond/cloud/character-3.png',
title:'多云资源统一运维和监控',
introData:[
'提供灵活可配的告警策略管理、微信邮件等多种方式的告警通知、资源性能指标和健康状态的统一分析等,帮助用户实时掌握全局资源的运行状态。'
]
},
{
title:'透明化',
introduction:'流程申请、流程进度、流程审批全程可观',
img:'assets/img/serviceSecond/information/value-bg.png'
img:'assets/img/serviceSecond/cloud/character-4.png',
title:'多维数据可视化',
introData:[
'通过自定义仪表盘实现资源用量的数据可视化分析;以资源池、集群、租户、主机等维度分析多云资源使用情况与变化趋势'
]
}
],
type:'value'
},
type:'character'
}
]
}
... ...
... ... @@ -19,7 +19,7 @@
<section class="intro-tab">
<div class="container">
<ul class="intro-tab-container">
<li class="tab-item-li" v-for="(item,index) in cloudData.data" :key="item">
<li class="tab-item-li" v-for="(item,index) in cloudData.data" :key="item" v-show="item.title">
<span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
</li>
</ul>
... ... @@ -27,9 +27,9 @@
</section>
<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cloudData.data" :key="item">
<section :class="['info-container', 'rel', 'pt-55',{'mb-70':item.type!='icon','pb-55':item.type=='icon','info-container-bg':item.type=='icon'}]" v-for="(item,index) in cloudData.data" :key="item">
<div class="div-type" :data-type="item.type"></div>
<div class="container">
<div class="container cloud">
<div class="info-title">{{item.title}}</div>
<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">
... ... @@ -39,36 +39,53 @@
<div class="info-character-intro">{{itemC.introduction}}</div>
</div>
</div>
<div class="info-system pt-30" v-if="item.img">
<div class="info-system pt-50" v-if="item.img">
<img :src="item.img" alt="">
</div>
<div class="row pt-30" v-if="item.dataSecond && item.dataSecond.length>0">
<div class="col-lg-4">
<div :class="['info-advantage',{'advantage-active':advantageActive==indexA}]" @mouseover="showHover(indexA)" @mouseleave="hideHover" v-for="(itemA,indexA) in item.dataSecond">
<img class="" :src="itemA.icon" alt="">
<div :class="['info-advantage-title']">
<div>{{itemA.title}}</div>
<div class="advantage-title-intro" v-if="itemA.introduction && advantageActive==indexA && isMouseover">{{itemA.introduction}}</div>
<div class="row" v-if="item.publicCloud && item.privateCloud">
<div class="col-lg-8">
<div class="cloud-content cloud-content-public">
<div class="cloud-title">{{item.publicCloud.title}}</div>
<div class="row cloud-icon-container flex-warp-center">
<div class="cloud-icon-item col-md-4" v-for="itemI in item.publicCloud.iconData">
<div class="cloud-icon-item-con flex-column-center">
<div class="cloud-img">
<img :src="itemI.icon" alt="">
</div>
<div class="cloud-icon-title pt-30">{{itemI.title}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<img :src="advantageImg" alt="">
<div class="col-lg-4 ">
<div class="cloud-content cloud-content-private">
<div class="cloud-title">{{item.privateCloud.title}}</div>
<div class="row cloud-icon-container flex-warp-center">
<div class="cloud-icon-item col-md-6" v-for="itemI in item.privateCloud.iconData">
<div class="cloud-icon-item-con flex-column-center">
<div class="cloud-img">
<img :src="itemI.icon" alt="">
</div>
<div class="cloud-icon-title pt-30">{{itemI.title}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row pt-30" v-if="item.dataThird && item.dataThird.length>0">
<div class="col-lg-4" v-for="(itemV,indexV) in item.dataThird">
<div class="info-value" >
<img class="" :src="itemV.img" alt="">
<div :class="['info-value-title']">
<h3>{{itemV.title}}</h3>
<div>{{itemV.introduction}}</div>
</div>
<div class="row pt-30 pd-40" v-if="item.dataC && item.dataC.length>0">
<div class="col-lg-6 pd-40" v-for="(itemA,indexA) in item.dataC">
<div class="div-img text-center">
<img :src="itemA.img" alt="">
</div>
<div class="cloud-c-title pt-30">{{itemA.title}}</div>
<ul :class="[{'row':indexA>=2}, {'flex-column-center':indexA<2} ,'pt-30','pl-20','pr-20']" v-if="itemA.introData.length>0">
<li :class="['list-style-li']" v-for="(itemV,indexV) in itemA.introData"><i class="list-style"></i>{{itemV}}</li>
</ul>
</div>
</div>
</div>
</section>
... ...