monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 895a1b14723b59a5f38b743c15afc58eabd93293 1 parent 5cfced17

故障管理基础资源提示框

Inline Side-by-side
Showing 5 changed files with 56 additions and 22 deletions
... ... @@ -2,7 +2,7 @@
<div class="d-flex">
<img src="../src/style/img/fault/apm.gif">
<h3 style="margin-left: 10px;color: #666666;font-size: 18px">APM</h3>
<div style="width: calc(100% - 170px);line-height: 54px;font-size: 14px" class="align-right">
<div style="width: calc(100% - 200px);line-height: 54px;font-size: 14px" class="align-right">
<a class="m-r-20" v-if="card && card.length > 0" @click="openMoreDialog">更多</a>
<a v-model="cardName" v-if="card && card.length > 0" @click="openOrCloseApm()">{{cardName}}</a>
</div>
... ... @@ -62,26 +62,26 @@
<div style="padding-top: 30px;font-size: 18px;color: #333333">应用：<span class="text-link">{{item.applicationName}}</span></div>
<hr style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#aed6f4 size=1>
<div style="text-align: left;display: flex;margin-top: 10px;margin-left: 76px;font-size: 18px;">
<div style="width: 200px;margin-left: 10px;display: flex;align-self: center;">
<div style="width: 230px;display: flex;align-self: center;">
<img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;">
<span style="margin: 0px 6px;width: 95px">响应时间:</span>
<span style="margin: 0px 6px;width: 133px;">响应时间告警量:</span>
<span class="text-link">{{item.responseNum}}</span>
</div>
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
<div style="width: 230px;margin-left: 20px;display: flex;align-self: center;">
<img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;">
<span style="margin: 0px 6px 0px 6px;width: 95px">Fullgc:</span>
<span style="margin: 0px 6px 0px 6px;width: 115px;">Fullgc告警量:</span>
<span class="text-link">{{item.FullGcNum}}</span>
</div>
</div>
<div style="text-align: left;display: flex;margin-top: 10px;margin-left: 76px;font-size: 18px;">
<div style="width: 200px;margin-left: 10px;display: flex;align-self: center;">
<div style="width: 230px;display: flex;align-self: center;">
<img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;">
<span style="margin: 0px 6px;width: 95px">线程总数:</span>
<span style="margin: 0px 6px;width: 133px;">线程总数告警量:</span>
<span class="text-link">{{item.threadNum}}</span>
</div>
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
<div style="width: 230px;margin-left: 20px;display: flex;align-self: center;">
<img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;">
<span style="margin: 0px 6px 0px 6px;width: 95px">错误率:</span>
<span style="margin: 0px 6px 0px 6px;width: 115px;">错误率告警量:</span>
<span class="text-link">{{item.errorNum}}</span>
</div>
</div>
... ...
... ... @@ -95,11 +95,20 @@ export default {
//诊断应用
const openBusScenarios = () => {
let param = [{
prop: 'taskName',
prop: 'extendCol3',
label: '名称',
},{
prop: 'taskType',
label: '类型',
prop: 'collProtocol',
label: '连接方式',
},{
prop: 'resName',
label: '资源名称',
},{
prop: 'resTypeName',
label: '资源类型',
},{
prop: 'os',
label: '操作系统',
}]
service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param);
}
... ...
... ... @@ -2,8 +2,18 @@
<div class="d-flex">
<img src="../src/style/img/fault/base.gif">
<h3 style="margin-left: 10px;color: #666666;font-size: 18px">基础资源</h3>
<div style="width: calc(100% - 225px);line-height: 54px;" class="align-right">
<a class="m-r-20" v-if="card && card.length > 0" @click="openMoreDialog">更多</a>
<div style="line-height: 60px;" class="m-l-6">
<el-tooltip
effect="light"
placement="top-start">
<template #content>
以图标方式展示每个资源类型的告警结果，颜色代表告警结果 <br/>
红色：存在严重告警； 橙色：存在重要告警; 橙色：存在一般告警; 绿色：无告警
</template>
<i class="iconfont icon-tishi" />
</el-tooltip>
</div>
<div style="width: calc(100% - 252px);line-height: 54px;" class="align-right">
<a v-model="cardName" v-if="card && card.length > 0" @click="openOrCloseBase()">{{cardName}}</a>
</div>
</div>
... ...
... ... @@ -65,9 +65,7 @@ export default {
targetType: props.targetType.toLocaleLowerCase()
});
}
const openMoreDialog = () => {
service.sendEventMoreDialog(emit, proxy.$global, card.value);
}
//诊断资源
const openBusScenarios = () => {
let param = [{
... ... @@ -76,6 +74,15 @@ export default {
},{
prop: 'ip',
label: 'IP地址',
},{
prop: 'resTypeName',
label: '资源类型',
},{
prop: 'os',
label: '操作系统',
},{
prop: 'createBy',
label: '创建用户',
}]
service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param);
}
... ... @@ -94,7 +101,6 @@ export default {
dialTest,
cardName,
openOrCloseBase,
openMoreDialog,
openAlarm,
getFaultItemValue: service.getFaultItemValue,
openBusScenarios,
... ...
... ... @@ -65,13 +65,13 @@ export default {
console.log(dialTest.value)
}
let getAlarmColor = (cardList) =>{
if (cardList.alarmLevel = '0'){
if (cardList.alarmLevel == '0'){
alarmColor.value = '#00A522';
}else if (cardList.alarmLevel = '1'){
}else if (cardList.alarmLevel == '1'){
alarmColor.value = '#f97d04';
}else if (cardList.alarmLevel = '2'){
}else if (cardList.alarmLevel == '2'){
alarmColor.value = '#ffde00';
}else if (cardList.alarmLevel = '3'){
}else if (cardList.alarmLevel == '3'){
alarmColor.value = '#ff0000';
}
}
... ... @@ -92,6 +92,15 @@ export default {
},{
prop: 'ip',
label: 'IP地址',
},{
prop: 'resTypeName',
label: '资源类型',
},{
prop: 'os',
label: '操作系统',
},{
prop: 'createBy',
label: '创建用户',
}]
service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param,props.cardList.resClass);
}
... ...