monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 1ac93ef8573c04803e2f9244f91abe9adb3fb7bb 2 parents 37f9ed6b b14f47b8

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

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



See merge request !978
Inline Side-by-side
Showing 28 changed files with 443 additions and 9 deletions
... ... @@ -1652,7 +1652,7 @@ blockquote:before {
.footer-section {
position: relative;
background:#f4f2ff;
background:#242933;
}
... ... @@ -1695,24 +1695,25 @@ blockquote:before {
}
.footer-widget.links-widget li a {
color: #848484;
color: #ffffff;
margin-bottom: 10px;
display: inline-block;
text-transform: capitalize;
transition: .5s;
}
.footer-widget.links-widget li a:hover{
color: #1C00AF;
color: #e43730;
transition: .5s;
}
/*office info widget*/
.office-info li {
display: flex;
margin-bottom: 8px;
color:#fff;
}
.office-info li i {
color: #1C00AF;
color: #ffffff;
font-size: 18px;
margin-right: 20px;
}
... ... @@ -1946,6 +1947,7 @@ blockquote:before {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
font-size: 12px;
}
.height-50{
height: 50px;
... ... @@ -2056,5 +2058,65 @@ blockquote:before {
padding:40px;
}
.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
}
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
}
\ No newline at end of file
... ...
... ... @@ -104,7 +104,7 @@
<!--====================================================================
Start footer section
=====================================================================-->
<footer class="footer-section mt-125 pt-100">
<footer class="footer-section pt-100">
<div class="container">
<div class="row">
... ... @@ -116,7 +116,7 @@
<div class="col-sm-4">
<div class="footer-widget logo-widget mr-35">
<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 class="widget-content">
<div class="footer-social-icon mt-20 text-center">
... ...
... ... @@ -37,6 +37,12 @@ const routes = [
name: 'businessApp',
component: () => myImport('views/serviceSecond/businessApp/index')
},
//魔镜智能运维管理一体机
{
path: '/services/maintenance',
name: 'maintenance',
component: () => myImport('views/serviceSecond/maintenance/index')
},
];
const router = VueRouter.createRouter({
... ...
... ... @@ -28,7 +28,7 @@
</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="container">
<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 :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="container">
<h3 class="info-title">{{item.title}}</h3>
... ...
... ... @@ -206,7 +206,7 @@
</ol>
</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">
<img src="assets/img/services/p7.png" style="border-radius: 10px;">
</div>
... ...
... ... @@ -14,6 +14,8 @@ export default {
proxy.$router.push({path:'/services/securityLog'})
}else if(type == 'business'){
proxy.$router.push({path:'/services/businessApp'})
}else if(type == 'maintenance'){
proxy.$router.push({path:'/services/maintenance'})
}
}
return {
... ...