Authored by 王涛

Merge branch 'master-v32-xwx' into 'master'

故障管理基础资源提示框



See merge request !797
... ... @@ -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);
}
... ...
... ... @@ -45,13 +45,13 @@
<div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #75af49;">
<img src="../src/style/img/fault/success.png" style="width: 22px;height: 22px;">
<span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px">正常</span>
<h class="text-link" style="font-size: 24px">{{ getFaultItemValue(dialTest,'normal')}}</h>
<h class="text-link" style="font-size: 24px"@click="openDiagnosticItem('normal')" >{{ getFaultItemValue(dialTest,'normal')}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #febb1a;" @click="openAlarm">
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #febb1a;">
<img src="../src/style/img/fault/error.png" style="width: 22px;height: 22px;">
<span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px"> 异常</span>
<h class="text-link" style="font-size: 24px">{{ getFaultItemValue(dialTest,'abnormal') }}</h>
<h class="text-link" style="font-size: 24px" @click="openDiagnosticItem('abnormal')">{{ getFaultItemValue(dialTest,'abnormal') }}</h>
</div>
</div>
</div>
... ...
... ... @@ -76,12 +76,7 @@ export default {
console.log(cardData.value)
}
const openAlarm = () => {
service.sendEventAlarmDialog(emit, {
faultNo: props.faultNo,
targetType: props.targetType
});
}
const openBusScenarios = () => {
let param = [{
... ... @@ -107,6 +102,9 @@ export default {
const openMoreDialog = () => {
service.sendEventMoreDialog(emit, proxy.$global, card.value);
}
const openDiagnosticItem = (type) => {
service.sendEventNormalDialog(emit, proxy.$global, props.faultNo, props.targetType.toLocaleLowerCase(), '',type);
}
// 挂载完
Vue.onMounted(() => {
... ... @@ -119,13 +117,13 @@ export default {
cardName,
cardOpen,
dialTest,
openAlarm,
getDialtestCard,
cardData,
openMoreDialog,
openBusScenarios,
openKpiList,
getFaultItemValue: service.getFaultItemValue,
openDiagnosticItem
}
}
}
... ...
... ... @@ -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,
... ...
... ... @@ -41,7 +41,7 @@
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: red">
<img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;">
<span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px;"> 告警</span>
<h style="font-size: 24px" class="text-link">{{getFaultItemValue(cardList,'abnormal')}}</h>
<h style="font-size: 24px" class="text-link" @click="openAlarm()">{{getFaultItemValue(cardList,'abnormal')}}</h>
</div>
</div>
</div>
... ... @@ -74,16 +74,16 @@
<el-col :span="12" class="align-right border-solid p-6">
{{item.linkState}}
</el-col>
<el-col :span="12" class="align-left border-solid p-6" >
<el-col :span="12" class="align-left border-solid p-6" v-if="resClass!='database'">
CPU
</el-col>
<el-col :span="12" class="align-right border-solid p-6">
<el-col :span="12" class="align-right border-solid p-6" v-if="resClass!='database'">
{{item.cpu}}
</el-col>
<el-col :span="12" class="align-left border-solid p-6">
<el-col :span="12" class="align-left border-solid p-6" v-if="resClass!='database'">
内存
</el-col>
<el-col :span="12" class="align-right border-solid p-6">
<el-col :span="12" class="align-right border-solid p-6" v-if="resClass!='database'">
{{item.men}}
</el-col>
<el-col :span="12" class="align-left border-solid p-6">
... ...
... ... @@ -47,7 +47,8 @@ export default {
}
}
let faultNo=props.faultNo;
let targetType=props.targetType;
let targetType=props.targetType.toLocaleLowerCase();
let resClass=props.cardList.resClass;
let getDialtestList = (data) => {
for (let i = 0; i < data.length; i++) {
let resItem={
... ... @@ -82,25 +83,28 @@ 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';
}
}
const openAlarm = () => {
service.sendEventAlarmDialog(emit, {
service.sendEventAlarmDialog(props.parentEmit, {
cardList: props.cardList,
targetType: props.targetType
targetType: targetType,
faultNo: faultNo,
resClass:resClass
});
}
const openMoreDialog = () => {
service.sendEventMoreDialog(emit, proxy.$global, cardList.faultFixInfoList);
}
//诊断资源
const openBusScenarios = () => {
let param = [{
... ... @@ -109,12 +113,21 @@ export default {
},{
prop: 'ip',
label: 'IP地址',
},{
prop: 'resTypeName',
label: '资源类型',
},{
prop: 'os',
label: '操作系统',
},{
prop: 'createBy',
label: '创建用户',
}]
service.sendEventDiagnoseBusinessScenarios(props.parentEmit, props.faultNo,props.targetType.toLocaleLowerCase(),param,props.cardList.resClass);
service.sendEventDiagnoseBusinessScenarios(props.parentEmit, faultNo,targetType,param,resClass);
}
//诊断指标
const openKpiList = () => {
service.sendEventDiagnoseKpiList(props.parentEmit, props.faultNo,props.targetType.toLocaleLowerCase());
service.sendEventDiagnoseKpiList(props.parentEmit, faultNo,targetType);
}
// 挂载完
... ... @@ -136,7 +149,8 @@ export default {
faultNo,
targetType,
openBusScenarios,
openKpiList
openKpiList,
resClass
}
}
}
... ...
... ... @@ -70,18 +70,18 @@
<p style="width: 290px;margin-left: 40px;font-size: 16px">{{item.streamName}}</p>
<div style="margin-top: 35px;">
<p style="width: 85%;text-align: left;padding-left: 50px;">业务量
<h style="margin-left: 6px;text-decoration: underline">{{item.busNum}}</h>
<h class="text-link" style="margin-left: 6px;">{{item.busNum}}</h>
</p>
</div>
<div style="display: flex;text-align: left;margin-top: -17px;margin-left: 50px;">
<p style="width: 50%;">响应率
<h style="margin-left: 6px;text-decoration: underline"
:style="{color: item.responseColor}">{{item.responseNum}}%
<h class="text-link" style="margin-left: 6px;"
:style="{color: item.responseColor}" @click="openResPonse(item.kpiId,item.resId)">{{item.responseNum}}%
</h>
</p>
<p style="width: 50%;">成功率
<h style="margin-left: 6px;text-decoration: underline"
:style="{color: item.successColor}">{{item.successNum}}%
<h class="text-link" style="margin-left: 6px;"
:style="{color: item.successColor}" @click="openResPonse(item.kpiId,item.resId)">{{item.successNum}}%
</h>
</p>
</div>
... ...
... ... @@ -47,10 +47,14 @@ export default {
successNum:'0',
successColor:'red',
responseNum:'0',
responseColor:'red'
responseColor:'red',
kpiId:'',
resId:''
}
for (let j = 0; j < data[i].length; j++) {
resItem.streamName=data[i][j].streamName;
resItem.kpiId=data[i][j].kpiId;
resItem.resId=data[i][j].resId;
if (data[i][j].kpiId=='KPI5F8CCDA0'){
resItem.busNum=data[i][j].diagnosisResult;
}else if (data[i][j].kpiId=='KPIFE85BE59'){
... ... @@ -80,12 +84,6 @@ export default {
console.log(e);
})
}
const openAlarm = () => {
service.sendEventAlarmDialog(emit, {
faultNo: props.faultNo,
targetType: props.targetType
});
}
const openMoreDialog = () => {
service.sendEventMoreDialog(emit, proxy.$global, card.value);
}
... ... @@ -101,6 +99,16 @@ export default {
service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param);
}
let openResPonse = (kpiId,redId) =>{
let param = {
faultNo: props.faultNo,
targetType: props.targetType.toLocaleLowerCase(),
resId: redId,
kpiId: kpiId
}
service.sendEventLineDialog(emit, param);
}
//诊断指标
const openKpiList = () => {
service.sendEventDiagnoseKpiList(emit, props.faultNo,props.targetType.toLocaleLowerCase());
... ... @@ -121,10 +129,10 @@ export default {
getDialtestCard,
cardData,
openMoreDialog,
openAlarm,
getFaultItemValue: service.getFaultItemValue,
openBusScenarios,
openKpiList
openKpiList,
openResPonse
}
}
}
... ...
... ... @@ -145,9 +145,9 @@ export default {
}
// 展示弹框
const openDialog = (type, {faultNo, targetType, resId, kpiId, flag}, obj) => {
const openDialog = (type, {faultNo, targetType, resId, kpiId, flag,resClass}, obj) => {
if (type === 'alarm') {
service.openAlarmDialog(proxy, faultNo, targetType, resId, kpiId, flag);
service.openAlarmDialog(proxy, faultNo, targetType, resId, kpiId, flag,resClass);
} else /*if (type === 'resList') {
service.handleClick(proxy, faultNo, targetType, resId, kpiId, flag);
} else*/ if (type === 'line') {
... ...
... ... @@ -85,7 +85,7 @@ const alarmService = () => {
// 基础更多查询需要传入对应的资源类型
resClass: resClass,
faultNo: faultNo,
type: targetType,
targetType: targetType,
resId: resId,
kpiId: kpiId,
flag: flag
... ... @@ -244,7 +244,8 @@ const faultEvent = () => {
targetType: '',
resId: '',
kpiId: '',
flag: ''
flag: '',
resClass:''
}, params);
}
... ...