monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by wangtao
Commit cbd2c281b3eab5e7ff6392b364a370e5ba6c0395 2 parents 0f798448 51e9b6da

Merge branch 'master-500-dev' of http://113.200.75.45:82/monitor_v3/hg-monitor-w… 

…eb into master-500-dev
Inline Side-by-side
Showing 36 changed files with 455 additions and 92 deletions
... ... @@ -317,8 +317,8 @@ layui.define(['form', 'admin', 'laydate', 'common', 'sessions', 'reskpilist'], f
charToExpr(data, 'commonlyExpr');
charToExpr(data, 'importantExpr');
charToExpr(data, 'seriousExpr');
form.on('submit(add-alarmpolicy-form)', function () {
//lsq 告警策略编辑不了，id值应该选择的是submit的按钮的lay-filter，不是add-alarmpolicy-form， 2022-09-27
form.on('submit(alarmpolicy-form-save-id)', function () {
delete data.noticeMergeFlagExpr;
admin.req({
url: domainName + '/api-web/alarmPolicy/save?access_token=' + accessToken
... ...
... ... @@ -407,7 +407,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
var $html = addIconByValue(valueStr);
var resStyle = obj.alarmEleMatchStyle(ar.flag, ar.kpiId);
span += ' <span ' + menuId + ' style="text-align:left;width:40%">' + ar.kpiName + '</span>' +
'<span title="' + titleStr + '" style="width:60%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' + resStyle + '">'
'<span title="' + titleStr + '" style="width:60%;overflow: hidden !important;text-overflow: ellipsis;white-space: nowrap;' + resStyle + '">'
+ $html + valueStr +unit+ '</span>';
//补充空白区域
if (v.length < cols) {
... ... @@ -4554,6 +4554,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
//lsq 状态信息无其他下探 2022-06-08
var statusF = $menu.data('statusf');
var one = $menu.data('one');
//lsq 只有kpiIdent==1时才有性能趋势 2022-09-27
var kpiIdent=$menu.data('ident');
var menubox = '<div class="detail_menubox" id="detail_menubox_id" style="color:#666;"><ul>';
//lsq 只有状态指标下探的标识
if (one == 1) {
... ... @@ -4567,7 +4569,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
if (!hideM) {
menubox += '<li type="m"><i class="layui-icon">&#xe64d;</i>过滤多指标</li>';
}
if (!nature) {
if (!nature && kpiIdent==1) {
menubox += '<li type="t"><i class="layui-icon">&#xe62c;</i>性能趋势</li>';
}
// if(!statusF){
... ...
... ... @@ -144,7 +144,6 @@ layui.define(['form', 'admin', 'layer', 'common', 'sessions', 'xmSelect', 'resli
//保存
$("#jgraph-form-save-id").on("click", function (e, flag) {
//当flag为true,为保存并设计，当flag为false时，为保存
form.on('submit(form-grapheditor)', function () {
var topoTitle = $("#jgraph_topo_name").val();
if (!topoTitle) {
layer.msg('请输入拓扑名称！', {icon: 7, time: 3000});
... ... @@ -235,7 +234,6 @@ layui.define(['form', 'admin', 'layer', 'common', 'sessions', 'xmSelect', 'resli
}
});
return false;//必须要写，解决禁用submit提交，ajax方法才能正确执行，且表单不会自动刷新
})
form.render();
});
renderGraphTopoInfo();
... ...
... ... @@ -246,18 +246,22 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
//监听ckecked选中事件
table.on('checkbox(reslist_resListTable)', function (obj) {
var reslist = [];
if (obj.checked == true) {
if (obj.type == 'one' && resListSelectIds.indexOf(obj.data.resId) === -1) {//勾选单条
resListSelectIds.push(obj.data.resId);
reslist.push(obj.data);
}
if (obj.type == 'all') {//勾选全部
for (var i = 0; i < table_data.length; i++) {
reslist.push(table_data[i]);
if (resListSelectIds.indexOf(obj.data.resId) === -1) {
resListSelectIds.push(table_data[i].resId);
}
}
}
} else {
reslist.push(obj.data);
if (obj.type == 'one') {
for (var i = 0; i < resListSelectIds.length; i++) {
if (resListSelectIds[i] == obj.data.resId) {
... ... @@ -281,7 +285,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
// 跨域发送信息，不能删除
obj.data["checked"] = obj.checked;
window.top.postMessage({res: obj.data}, "*");
window.top.postMessage({res: reslist}, "*");
})
... ...
... ... @@ -95,7 +95,8 @@ layui.define(['table', 'form', 'laydate', 'treeTable', 'admin', 'layer', 'laytpl
templet: '<div><span role-data-edit="{{d.id}}" data-name="{{d.name}}" ' +
'data-code="{{d.code}}" data-remark="{{d.remark}}" class="layui-table-link">{{d.name}}</span></div>'
}
, {field: 'userNames', title: '角色用户', align: 'left', width: '25%'}
, {field: 'code', title: '编码', align: 'left', width: '10%'}
, {field: 'userNames', title: '角色用户', align: 'left', width: '20%'}
, {field: 'remark', title: '角色描述', align: 'left',}
, {
field: 'updateTime',
... ...
... ... @@ -8660,3 +8660,11 @@ form.layui-card-header.layuiadmin-card-header-auto {
width: 16px;
height: 16px;
}
/*lsq 快照管理详情页基本信息悬浮样式修改 2022-09-27*/
#base-info-tips>.info-table>li span,#base-info-tips>.info-table>li span .div-link-state-list{
display: flex;
align-items: center;
}
#base-info-tips>.info-table>li span:nth-child(2n){
flex:2;
}
... ...
... ... @@ -345,8 +345,8 @@
</div>
</div>
</div>
<button type="submit" lay-submit class="layui-btn hide" id="alarmpolicy-form-save-id">保存</button>
<!--lsq 告警策略编辑不了，按钮没有lay-filter 2022-09-27-->
<button type="submit" lay-submit class="layui-btn hide" lay-filter="alarmpolicy-form-save-id" id="alarmpolicy-form-save-id">保存</button>
</form>
<script>
layui.use('alarmpolicyAdd', function (fn) {
... ...
... ... @@ -54,7 +54,8 @@
<label class="layui-form-label">发送用户</label>
<div style="width: calc(100% - 110px)">
<div class="layui-input-inline" style="width: calc(100% - 10px);display: inline-flex;">
<div class="tags" id="select_noticeTimely_id_user" style="width: calc(100% - 20px);border: solid 1px #D2D2D2;margin-top: 0px;height: 36px;"></div>
<!--lsq 选择用户过多时，超出高度滚动 2022-09-27-->
<div class="tags" id="select_noticeTimely_id_user" style="width: calc(100% - 20px);border: solid 1px #D2D2D2;margin-top: 0px;min-height:36px; height: auto; max-height: 200px; overflow: auto;"></div>
<i class="layui-icon form-btn-icon" id="noticeTimely-form-select-users" style="line-height: 36px;margin-left: 5px;">&#xe615;</i>
</div>
</div>
... ...
... ... @@ -56,6 +56,12 @@
font-weight: normal;
src:url('../fonts/pingfang/PINGFANG EXTRALIGHT.TTF');
}
@font-face {
font-family: 'PingFang-SC-regular';
font-style: normal;
font-weight: normal;
src:url('../fonts/pingfang/PINGFANG REGULAR.TTF');
}
* {
margin: 0px;
padding: 0px;
... ... @@ -1977,13 +1983,19 @@ blockquote:before {
}
.info-container-bg{
background:#f3f5f8;
}
.info-title{
text-align: center;
font-size: 30px;
color:#333;
}
.info-intro{
padding-top:20px;
text-indent:28px;
font-size: 16px;
color:#666;
font-family: 'PingFang-SC-medium';
}
.info-character{
padding:0 50px;
... ... @@ -2195,6 +2207,9 @@ blockquote:before {
border-bottom:1px solid #525a6a;
margin-bottom: 0;
}
.maintenance-advantage.info-title{
color:#fff;
}
.maintenance-advantage-num{
font-size: 90px;
color:#2d3340;
... ... @@ -2891,3 +2906,241 @@ blockquote:before {
.compatible-item .title-style{
font-size:28px;
}
/*lsq 综合监控A-view样式 2022-09-28*/
.col-lg-service-3{
max-width: 20%;
}
.info-child-title{
font-size: 21px;
color:#333;
font-family: 'PingFang SC';
}
.info-child-intro{
font-size: 18px;
color:#333;
font-family: 'PingFang-SC-regular';
}
.info-child-title-Heavy{
font-size: 30px;
color:#fff;
font-family: 'PingFang-SC-heavy';
}
.info-child-intro-m{
font-size: 18px;
color:#fff;
font-family: 'PingFang-SC-medium';
}
.info-challenge-bg{
position: absolute;
height: 100%;
width: 90%;
top: 0;
z-index: -1;
background-size: cover;
}
.info-challenge-bg-1{
background-image: url("../img/serviceSecond/Aview/challenge-bg-1.png");
}
.info-challenge-bg-2{
background-image: url("../img/serviceSecond/Aview/challenge-bg-2.png");
}
.info-challenge-bg-3{
background-image: url("../img/serviceSecond/Aview/challenge-bg-3.png");
}
.challenge-con .info-character{
padding: 0 20px;
}
.intro-item{
padding:10px;
}
.Aview .tab-item-li{
margin-right: 56px;
}
.info-container-bg-Aview{
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: -2;
}
.info-container-bg-challenge{
height: 60%;
}
.info-container-service .info-character{
padding:0;
}
.info-service.info-character img{
}
.dataAbility-con{
position: relative;
flex: 1;
max-height: 500px;
}
.dataAbility-bg{
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: -2;
background-size: contain;
background-image: url("../img/serviceSecond/Aview/ability-bg.png");
background-repeat: no-repeat;
background-position: center;
}
.dataAbility-bg-logo{
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: -1;
display: flex;
align-items: center;
flex-flow: column;
justify-content: center;
}
.dataAbility-item-title{
font-size: 21px;
color:#fff;
font-family: 'PingFang-SC-heavy';
}
.dataAbility-item-intro{
font-size: 16px;
color:#fff;
font-family: 'PingFang-SC-regular';
}
.info-container-ability .container{
height:100%;
display: flex;
flex-flow: column;
}
.dataAbility-col{
display: flex;
}
.dataAbility-item{
flex:1;
display: flex;
flex-flow: column;
justify-content: center;
padding: 0 15px;
}
.dataAbility-item-intro-item{
min-height: 24px;
}
.dataAbility-col:nth-child(2n) .dataAbility-item{
margin-left: 30%;
}
.dataAbility-col:nth-child(3) .dataAbility-item .dataAbility-item-intro-item:first-child{
max-width: 67%;
}
@media (min-width: 992px){
.dataAbility-col{
height:50%;
}
}
.logo-title{
color:#fff;
font-size: 21px;
}
.info-characterP{
cursor: pointer;
}
.info-characterP .info-characterP-bg{
background:url("../img/serviceSecond/Aview/characterP-bg.png");
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: -1;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.info-characterP:hover .info-characterP-bg{
background:url("../img/serviceSecond/Aview/characterP-bg-active.png");
}
.info-character.info-characterP{
padding:30px;
position: relative;
}
.characterP-con{
display: flex;
justify-content: center;
align-items: center;
padding:10px 15px;
}
.characterP-con .info-character-intro{
min-height: 140px;
}
.info-child-title-character{
width: 100%;
font-size: 21px;
color:#333;
font-family: 'PingFang-SC-heavy';
}
.info-child-intro-character{
font-size: 16px;
color:#666;
font-family: 'PingFang-SC-regular';
}
.info-characterP:hover .info-child-title-character,.info-characterP:hover .info-child-intro-character{
color:#fff;
}
.Aview-advantage-bg{
background: url("../img/serviceSecond/Aview/advantage-bg.png");
background-size: cover;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -1;
}
.advantage-title-Aview{
font-size: 24px;
color:#fff;
}
.advantage-intro-Aview{
font-size: 18px;
color:#fff;
font-family: 'PingFang-SC-regular';
}
.info-container-advantage .info-title{
color:#fff;
}
.info-container-advantage .pro-advantage-style{
padding: 50px 30px 0;
}
.info-container-advantage .pro-advantage-ul{
min-height: 120px;
box-sizing: content-box;
}
.Aview-advantage-con{
padding:0;
}
.Aview-advantage-con .maintenance-advantage-num{
color:#2a303c;
}
.Aview-con{
border-top:1px solid #525a6a;
}
.Aview-container{
margin:auto;
}
@media (min-width: 1260px) {
.Aview-container {
max-width: 1200px;
}
}
.Aview-advantage-con:last-child .pro-advantage-style{
border:none;
}
.Aview-advantage-con:hover{
position: relative;
z-index: 2;
transform: scale(1.1,1);
background:#1a6ab7;
}
.Aview-advantage-con:hover .maintenance-advantage-num{
color:#1665b1;
}
... ...
... ... @@ -461,94 +461,163 @@ export function alarm() {
export function Aview() {
let res={
title:'综合监控管理A-view',
introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
introduction:'建立智能IT运维监控平台， 对网络、硬件、安全设备、操作系统、数据库、中间件、应用系统等资源实时监控采集，能够自动地收集信息系统中各类IT资源设备运行状态、数据库状态、中间件运行状态和网络状态等，发现各类IT资源运行过程中的异常。依据业务视角和设备视角分析发现已发生和潜在的各类资源问题，及时通知相关责任人和启动相关运维流程。',
data:[
{
title:'产品信息',
introduction:'魔镜智能将为“智慧税务”提供一个可视化、全局化、智能化、标准化、自动化的“全流程击穿协同管理”平台。实时洞察数字化业务与用户体验、主动保障核心征管、电子税务局等核心业务系统稳定、持续高效运行，构建基于“人工智能+大数据”底座的异常检测、智能告警分析、高效信息协同的大运维工作体系。',
introduction:'建立智能IT运维监控平台， 对网络、硬件、安全设备、操作系统、数据库、中间件、应用系统等资源实时监控采集，能够自动地收集信息系统中各类IT资源设备运行状态、数据库状态、中间件运行状态和网络状态等，发现各类IT资源运行过程中的异常。依据业务视角和设备视角分析发现已发生和潜在的各类资源问题，及时通知相关责任人和启动相关运维流程。',
type:'info'
},
{
title:'产品特点',
title:'智能运维带来的新挑战',
introduction:'',
data:[
{
icon:'assets/img/serviceSecond/information/character-1.png',
title:'工单信息集中管理',
introduction:'实现工单信息自动化汇总，工单数据集中化管理，工单流程实时共享。'
icon:'assets/img/serviceSecond/Aview/challenge-1.png',
title:'海量资源',
introData:['资源数量、资源种类','资源纳管能力','自动化运维能力','资源纳管扩展能力']
},
{
icon:'assets/img/serviceSecond/information/character-2.png',
title:'提高工作效率',
introduction:'运用智能化管理工具，降低人工沟通成本，缩短沟通时间。实时跟进工单问题的处理情况，提高工作效率。'
icon:'assets/img/serviceSecond/Aview/challenge-2.png',
title:'双模场景',
introData:['传统数据中心&云数据中心','公有云、私有云、传统数据','中心的统一运维管理','云基础设施监控精细']
},
{
icon:'assets/img/serviceSecond/information/character-3.png',
title:'实时处理单数据',
introduction:'全方位、多维度实时进行工单统计数据，及时掌握工单执行过程中的问题，帮助决策者获取数据支撑。'
icon:'assets/img/serviceSecond/Aview/challenge-3.png',
title:'用户场景兼容',
introData:['云环境多租户逻辑隔离，管理统一','多张网物理隔离，统一管理','多机构运维融合']
}
],
type:'character'
type:'challenge'
},
{
title:'系统框架',
introduction:'安全运维服务流程的系统架构',
img:'assets/img/serviceSecond/information/system.png',
type:'system'
title:'洞悉客户数字化运维服务需求',
introduction:'',
data:[
{
icon:'assets/img/serviceSecond/Aview/service-1.png',
title:'前瞻性',
introData:['业务前瞻、模式前瞻','架构前瞻']
},
{
title:'产品优势',
introduction:'',
dataSecond:[
icon:'assets/img/serviceSecond/Aview/service-2.png',
title:'一站式',
introData:['全生命周期','全IT领域']
},
{
icon:'assets/img/serviceSecond/information/advantage-1.png',
title:'“护网””等保”各规章变成“流程”强制性管控',
introduction:'特点：规章落地 提前约束 流程强制 全程留痕',
img:'assets/img/serviceSecond/information/advantageImg.png'
icon:'assets/img/serviceSecond/Aview/service-3.png',
title:'敏捷性',
introData:['支持业务更快速','更高质量的发布']
},
{
icon:'assets/img/serviceSecond/information/advantage-2.png',
title:'通过”安全流程“提前管控日常操作、留痕',
icon:'assets/img/serviceSecond/Aview/service-4.png',
title:'场景化',
introData:['不同的业务场景','提供差异化服务']
},
{
icon:'assets/img/serviceSecond/Aview/service-5.png',
title:'智能化',
introData:['通过智能分析和','自动化提高运营效率']
}
],
type:'service'
},
{
title:'系统架构',
introduction:'',
img:'assets/img/serviceSecond/information/advantageImg.png'
img:'assets/img/serviceSecond/Aview/system.png',
type:'system'
},
{
icon:'assets/img/serviceSecond/information/advantage-3.png',
title:'税务局业务流程目录、展示、流程的分类管理',
title:'综合监控A-VIEW平台能力',
subTitle:'综合监控平台能力',
icon:'assets/img/serviceSecond/Aview/logo.png',
introduction:'',
img:'assets/img/serviceSecond/information/advantageImg.png'
dataAbility:[
{
title:'全行业全场景覆盖',
introData:['深度分析行业运维需求、场景化需求，','发布行业版本',' ',' ']
},
{
icon:'assets/img/serviceSecond/information/advantage-4.png',
title:'工作组、用户权限的灵活配置',
title:'用户导向',
introData:['用户视角，全新用户体验','场景化视角，便捷简单操作']
},
{
title:'一体化',
introData:['全域视角，监控网络、安全、计算存储、虚拟化、容器、云资源、用户终端等IT架构元素，实现从应用到芯片级端到端的运维管理','业务视角，打通业务到底层资源的逻辑连接，数据关联，深度分析','全局视角，场景化自动编排调度，智能联动，自动闭环解决场景化问题']
},
{
title:'持续扩展',
introData:['通过微服务架构，平台具备强大的可扩展能力，保证平台功能、处理能力及管理容量的弹性扩展','开放接口，定制开发，持续扩展']
}
],
type:'ability'
},
{
title:'产品特点',
introduction:'',
img:'assets/img/serviceSecond/information/advantageImg.png'
data:[
{
title:'强化主动监控，实现集中管理',
introduction:'以应用性能和应用系统为监控主线，集成各类监控工具，构建统一集中的IT系统资源监控平台， 能够主动及时发现问题，解决被动服务的局面。同时以自主运维为目的，主动监控，自动更新，自动实现IT运维监控管理。',
},
{
title:'灵活定制的自动化巡检',
introduction:'面向多厂商主流IT产品，根据客户灵活定制自动化巡检指标，对IT资源进行全面运行状态自动化检测分析，深度感知IT基础架构运行状态。同时，实时输出准确、详实的分析报告及改进建议，预防IT资源运行中可能出现的各种风险，发现网络潜在的性能瓶颈。',
},
{
title:'帮助定位故障，快速恢复系统运行。',
introduction:'建立针对IT资源的集中告警分析机制和故障预警机制，提供自动化故障处理能力，当故障产生时，可以进行故障的快速定位，很快发现问题根源并找到相应的解决方案，从而缩短故障解决时间，减少维护成本。',
},
{
title: '提高运行效率，合理利用IT资源。',
introduction: '建立统一IT资源监控平台后，可以实时了解全部IT资源的使用和运行情况，根据IT业务需要从整体角度考虑资源的使用，甚至可以根据业务高峰期的不同来调剂业务系统对资源的使用。',
},
{
title:'提供统计分析和决策支持',
introduction:'通过提供各类资源的性能分析报表、资源统计报表和运维分析报表，从各个侧面、各个角度反映系统的运行状况、性能情况和运维人员工作情况，为系统升级、改造、扩容提供科学依据。',
},
{
title:'全面直观的系统展示。',
introduction:'通过一个统一的门户系统，有效的展示内部的IT资源运行情况、性能状况、服务工单情况等，使得领导、管理者、技术人员能迅速了解自己关心的问题。',
}
],
type:'advantage'
type:'characterP'
},
{
title:'平台价值',
introduction:'魔镜“智能流程协同管理平台”通过信息整合，全局掌控省税务局工单流程每个节点状态，协同流转，处理审批；清晰分类了解流程情况，实时统计工单数据。',
title:'产品优势',
introduction:'',
dataThird:[
{
title:'标准化',
introduction:'信息、流程、时间全面统一，高效协同',
img:'assets/img/serviceSecond/information/value-bg.png'
title:'一体化监控',
dataIntro:['一体化设备监、管、控，一个平台满足用户多种需求完成所有IT基础资源的监控。']
},
{
title:'规范化',
introduction:'理清流程、制度落地，业务按标准执行',
img:'assets/img/serviceSecond/information/value-bg.png'
title:'监控配置灵活',
dataIntro:['灵活定义监控设备、资源，并可差异化设置监控指标。']
},
{
title:'透明化',
introduction:'流程申请、流程进度、流程审批全程可观',
img:'assets/img/serviceSecond/information/value-bg.png'
title:'秒级故障监控',
dataIntro:['领先的秒级监控能力与多线程任务并发技术，监测频率提升到秒级。']
}
],
type:'value'
dataThirdA:[
{
title:'实时性能监测',
dataIntro:['获取实时性能数据，动态可视化展示当前设备性能和性能变化趋势。']
},
{
title:'业务数据综合展示',
dataIntro:['强大的业务数据综合展示能力，实现跨网络业务数据整合']
},
{
title:'巡检灵活可配',
dataIntro:['巡检方案高度支持自定义，全网全流程覆盖，随时监控，分析回顾设备生命周期表现。']
}
],
type:'advantage'
}
]
}
... ...
... ... @@ -6,7 +6,7 @@
<section class="rel rpt-150 rpb-0 text-left" >
<div class="container">
<div class="container product">
<div class="row banner-height pt-90 pb-90">
<div class="banner-introduction color-white col-lg-6">
<h2 class="intro-title color-white">{{AviewData.title}}</h2>
... ... @@ -17,7 +17,7 @@
<div class="intro-Con"></div>
</section>
<section class="intro-tab">
<div class="container">
<div class="container product Aview">
<ul class="intro-tab-container">
<li class="tab-item-li" v-for="(item,index) in AviewData.data" :key="item">
<span :class="['tab-item','scroll-to-target',{'tab-item-active':tabActive==index}]" :data-target="'[data-type='+item.type+']'">{{item.title}}</span>
... ... @@ -27,42 +27,54 @@
</section>
<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in AviewData.data" :key="item">
<section :class="['info-container','info-container-'+item.type, 'rel','pt-55', {'mb-50':item.type!='ability' && item.type!='characterP' && item.type!='advantage','pb-50':item.type=='characterP','all-height':item.type=='ability'}]" v-for="(item,index) in AviewData.data" :key="item">
<div class="div-type" :data-type="item.type"></div>
<div class="container">
<h3 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 class="container product">
<div class="info-title">{{item.title}}</div>
<div :class="['info-intro','mt-40',{'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','pt-60',{'challenge-con':item.type=='challenge'}]" v-if="item.data && item.data.length>0">
<div :class="[ {'col-lg-4':item.type=='challenge','col-lg-3':item.type=='service','col-lg-service-3':item.type=='service','col-lg-6':item.type=='characterP','characterP-con':item.type=='characterP'}]" v-for="(itemC,indexC) in item.data">
<div :class="['info-character','info-'+item.type] ">
<img v-if="itemC.icon" :class="[{'pt-50':item.type=='challenge'}]" :src="itemC.icon" alt="">
<div :class="[{'info-child-title':item.type=='service','info-child-title-character':item.type=='characterP','info-child-title-Heavy':item.type=='challenge', 'pt-40':item.type=='challenge', 'pt-20':item.type!='challenge'}]">{{itemC.title}}</div>
<div :class="['info-character-intro', 'pt-30',{'info-child-intro-character':item.type=='characterP'}]" v-if="itemC.introduction">{{itemC.introduction}}</div>
<div :class="['info-character-intro', {'pt-40':item.type=='challenge','pb-40':item.type=='challenge','pt-20':item.type!='challenge','info-child-intro':item.type=='service','info-child-intro-m':item.type=='challenge'}]" v-if="itemC.introData && itemC.introData.length>0">
<div :class="[{'intro-item':item.type=='challenge'}, 'text-center']" v-for="itemI in itemC.introData">{{itemI}}</div>
</div>
<div v-if="item.type=='challenge'" :class="['info-challenge-bg','info-challenge-bg-'+(indexC+1)]"></div>
<div v-if="item.type=='characterP'" class="info-characterP-bg"></div>
</div>
</div>
</div>
<div class="info-system pt-30" v-if="item.img">
<div class="info-system pt-60" 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 mt-60 dataAbility-con" v-if="item.dataAbility && item.dataAbility.length>0">
<div class="col-lg-6 dataAbility-col" v-for="(itemD,indexD) in item.dataAbility">
<div class="dataAbility-item">
<div class="dataAbility-item-title">{{itemD.title}}</div>
<div class="dataAbility-item-intro pt-20">
<div class="dataAbility-item-intro-item" v-for="(itemI,indexI) in itemD.introData">{{itemI}}</div>
</div>
</div>
</div>
<div class="col-lg-8">
<img :src="advantageImg" alt="">
<div class="dataAbility-bg" v-if="item.type=='ability'"></div>
<div class="dataAbility-bg-logo">
<img :src="item.icon" alt="">
<div class="logo-title pt-20">{{item.subTitle}}</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="mt-30 Aview-con" v-if="item.dataThird && item.dataThird.length>0">
<div class="row Aview-container">
<div class="col-lg-4 Aview-advantage-con" v-for="(itemV,indexV) in item.dataThird">
<div class="info-value pro-advantage-style pb-50" >
<div :class="['pro-info-title']">
<div class=" advantage-title-Aview">{{itemV.title}}</div>
<ul class="pro-advantage-ul pt-30 advantage-intro-Aview"><li v-for="(itemP,indexP) in itemV.dataIntro">{{itemP}}</li></ul>
<div class="maintenance-advantage-num pt-50 pb-60">0{{indexV+1}}</div>
</div>
</div>
... ... @@ -70,6 +82,21 @@
</div>
</div>
<div class=" Aview-con" v-if="item.dataThirdA && item.dataThirdA.length>0">
<div class="row Aview-container">
<div class="col-lg-4 Aview-advantage-con" v-for="(itemV,indexV) in item.dataThirdA">
<div class="info-value pro-advantage-style pb-50" >
<div :class="['pro-info-title']">
<div class=" advantage-title-Aview">{{itemV.title}}</div>
<ul class="pro-advantage-ul pt-30 advantage-intro-Aview"><li v-for="(itemP,indexP) in itemV.dataIntro">{{itemP}}</li></ul>
<div class="maintenance-advantage-num pt-50 pb-60">0{{indexV+3}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="Aview-advantage-bg" v-if="item.type=='advantage'"></div>
<div v-if="item.type=='challenge' || item.type=='characterP'" :class="['info-container-bg','info-container-bg-Aview', {'info-container-bg-challenge':item.type=='challenge'}]"></div>
</section>
... ...
... ... @@ -30,7 +30,7 @@
<section :class="['info-container','alarm-info-container', 'rel', {'mb-70': item.type=='lifeCycle' || item.type=='inclusive'}, 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in alarmData.data" :key="item">
<div class="div-type" :data-type="item.type" ></div>
<div class="container">
<h3 class="info-title">{{item.title}}</h3>
<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="info-system pt-30" v-if="item.img">
<img :src="item.img" alt="">
... ...
... ... @@ -30,7 +30,7 @@
<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>
<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.subTitle">{{item.introduction}}</div>
<div class="row" v-if="item.subTitle">
<div class="col-lg-6 pd-40">
... ...
... ... @@ -30,7 +30,7 @@
<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cloudData.data" :key="item">
<div class="div-type" :data-type="item.type"></div>
<div class="container">
<h3 class="info-title">{{item.title}}</h3>
<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">
<div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
... ...
... ... @@ -30,7 +30,7 @@
<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in cmdbData.data" :key="item">
<div class="div-type" :data-type="item.type"></div>
<div class="container">
<h3 class="info-title">{{item.title}}</h3>
<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">
<div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
... ...
... ... @@ -30,7 +30,7 @@
<section :class="['info-container', 'rel', 'mb-70', 'pt-55',{'info-container-bg':item.type=='advantage'}]" v-for="(item,index) in InformationData.data" :key="item">
<div class="div-type" :data-type="item.type"></div>
<div class="container">
<h3 class="info-title">{{item.title}}</h3>
<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">
<div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
... ...
... ... @@ -29,7 +29,7 @@
<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 v-if="item.type=='advantage'" :class="['info-title','pb-40','maintenance-advantage',{'color-white':item.type=='advantage'}]">{{item.title}}</div>
<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>
... ...
... ... @@ -30,7 +30,7 @@
<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>
<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">
<div class="info-character col-md-4" v-for="(itemC,indexC) in item.data">
... ...