monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 286b6ccb886722c6c4cd38e0eef9269483e0df90 2 parents a36f0d64 b64ade08

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

故障管理弹窗



See merge request !794
Inline Side-by-side
Showing 8 changed files with 101 additions and 39 deletions
... ... @@ -3,8 +3,8 @@
<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">
<a class="m-r-20" s @click="">更多</a>
<a v-model="cardName" @click="openOrCloseApm()">{{cardName}}</a>
<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>
</div>
<el-divider/>
... ... @@ -15,32 +15,32 @@
<div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
<img src="../src/style/img/fault/npm/npmLink.png">
<span style="margin: 0px 6px 0px 6px;width: 105px">诊断应用</span>
<h class="text-link">{{dialTest && dialTest.diagnosticResources ?dialTest.diagnosticResources:0}}</h>
<h class="text-link">{{getFaultItemValue(dialTest,'diagnosticResources')}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
<img src="../src/style/img/fault/disKpi.png">
<span style="margin: 0px 6px 0px 6px;width: 105px">诊断指标</span>
<h class="text-link">{{dialTest && dialTest.diagnosticIndicators ?dialTest.diagnosticIndicators:0}}</h>
<h class="text-link">{{getFaultItemValue(dialTest,'diagnosticIndicators')}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
<img src="../src/style/img/fault/disItem.png">
<span style="margin: 0px 6px 0px 6px;width: 105px"> 诊断项</span>
<h class="text-link">{{dialTest && dialTest.diagnosticItem ?dialTest.diagnosticItem:0}}</h>
<h class="text-link">{{getFaultItemValue(dialTest,'diagnosticItem')}}</h>
</div>
</div>
<div style="text-align: left;display: flex;margin-top: 10px;">
<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">{{dialTest && dialTest.normal ?dialTest.normal:0}}</h>
<h class="text-link" style="font-size: 24px">{{getFaultItemValue(dialTest,'normal')}}</h>
</div>
|
<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">{{dialTest && dialTest.abnormal ?dialTest.abnormal:0}}</h>
<h class="text-link" style="font-size: 24px">{{getFaultItemValue(dialTest,'abnormal')}}</h>
</div>
</div>
</div>
... ...
import store from '/vue3/src/store/index.js';
import service from '/vue3/src/views/faultDiagnosis/result/service.js';
export default {
name: 'apm',
... ... @@ -8,6 +9,10 @@ export default {
faultNo: {
type: String,
default: ''
},
targetType: {
type: String,
default: ''
}
},
data() {
... ... @@ -26,7 +31,6 @@ export default {
cardOpen.value = !cardOpen.value;
if (cardOpen.value) {
cardName.value = '收起';
debugger
if (dialTest.value != '' && dialTest.value != null) {
getDialtestCard(dialTest.value.faultFixInfoList);
}
... ... @@ -40,7 +44,7 @@ export default {
let getNpmList = () => {
let params = {
faultNo: props.faultNo,
targetType: "apm"
targetType: props.targetType.toLocaleLowerCase()
}
store.dispatch('getFaultList', params).then((res) => {
... ... @@ -79,6 +83,15 @@ export default {
}
console.log(cardData.value)
}
const openAlarm = () => {
service.sendEventAlarmDialog(emit, {
faultNo: props.faultNo,
targetType: props.targetType
});
}
const openMoreDialog = () => {
service.sendEventMoreDialog(emit, proxy.$global, card.value);
}
// 挂载完
Vue.onMounted(() => {
... ... @@ -94,7 +107,10 @@ export default {
dialTest,
apmCard,
cardData,
getDialtestCard
getDialtestCard,
openMoreDialog,
openAlarm,
getFaultItemValue: service.getFaultItemValue
}
}
}
... ...
... ... @@ -3,8 +3,8 @@
<img src="../src/style/img/fault/base.gif">
<h3 style="margin-left: 10px;color: #666666;font-size: 18px">基础资源</h3>
<div style="width: calc(100% - 200px);line-height: 54px;" class="align-right">
<a class="m-r-20" @click="">更多</a>
<a v-model="cardName" @click="openOrCloseBase()">{{cardName}}</a>
<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="openOrCloseBase()">{{cardName}}</a>
</div>
</div>
<el-divider/>
... ... @@ -15,32 +15,32 @@
<div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
<img src="../src/style/img/fault/disRes.png">
<span style="margin: 0px 6px 0px 6px;width: 105px;">诊断资源</span>
<h>{{dialTest && dialTest.diagnosticResources ?dialTest.diagnosticResources:0}}</h>
<h class="text-link">{{getFaultItemValue(dialTest,'diagnosticResources')}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
<img src="../src/style/img/fault/disKpi.png">
<span style="margin: 0px 6px 0px 6px;width: 105px">诊断指标</span>
<h>{{dialTest && dialTest.diagnosticIndicators ?dialTest.diagnosticIndicators:0}}</h>
<h class="text-link">{{getFaultItemValue(dialTest,'diagnosticIndicators')}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
<img src="../src/style/img/fault/disItem.png">
<span style="margin: 0px 6px 0px 6px;width: 105px">诊断项</span>
<h>{{dialTest && dialTest.diagnosticItem ?dialTest.diagnosticItem:0}}</h>
<h class="text-link">{{getFaultItemValue(dialTest,'diagnosticItem')}}</h>
</div>
</div>
<div style="text-align: left;display: flex;margin-top: 10px;">
<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 style="font-size: 24px">{{dialTest && dialTest.normal ?dialTest.normal:0}}</h>
<h style="font-size: 24px" class="text-link">{{getFaultItemValue(dialTest,'normal')}}</h>
</div>
|
<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 style="font-size: 24px">{{dialTest && dialTest.abnormal ?dialTest.abnormal:0}}</h>
<h style="font-size: 24px" class="text-link">{{getFaultItemValue(dialTest,'abnormal')}}</h>
</div>
</div>
</div>
... ...
import store from '/vue3/src/store/index.js';
import service from '/vue3/src/views/faultDiagnosis/result/service.js';
export default {
name: 'faultDialTest',
... ... @@ -12,6 +14,10 @@ export default {
faultNo: {
type: String,
default: ''
},
targetType: {
type: String,
default: ''
}
},
data() {
... ... @@ -35,7 +41,7 @@ export default {
let getDialtestList = () => {
let params = {
faultNo: props.faultNo,
targetType: "base"
targetType: props.targetType.toLocaleLowerCase()
}
store.dispatch('getFaultList', params).then((res) => {
... ... @@ -51,7 +57,15 @@ 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);
}
// 挂载完
Vue.onMounted(() => {
getDialtestList();
... ... @@ -62,7 +76,10 @@ export default {
cardOpen,
dialTest,
cardName,
openOrCloseBase
openOrCloseBase,
openMoreDialog,
openAlarm,
getFaultItemValue: service.getFaultItemValue
}
}
}
... ...
... ... @@ -10,44 +10,44 @@
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
<img src="../src/style/img/fault/disRes.png">
<span style="margin: 0px 6px 0px 6px;width: 105px">诊断资源</span>
<h>{{cardList && cardList.diagnosticResources ?cardList.diagnosticResources:0}}</h>
<h class="text-link">{{getFaultItemValue(cardList,'diagnosticResources')}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
<img src="../src/style/img/fault/disKpi.png">
<span style="margin: 0px 6px 0px 6px;width: 105px">诊断指标</span>
<h>{{cardList && cardList.diagnosticIndicators ?cardList.diagnosticIndicators:0}}</h>
<h class="text-link">{{getFaultItemValue(cardList,'diagnosticIndicators')}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
<img src="../src/style/img/fault/disItem.png">
<span style="margin: 0px 6px 0px 6px;width: 105px">诊断项</span>
<h>{{cardList && cardList.diagnosticItem ?cardList.diagnosticItem:0}}</h>
<h class="text-link">{{getFaultItemValue(cardList,'diagnosticItem')}}</h>
</div>
</div>
<div style="text-align: left;display: flex;margin-top: 10px;">
<div style="width: 200px;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 style="font-size: 20px">{{cardList && cardList.normal ?cardList.normal:0}}</h>
<h style="font-size: 20px" class="text-link">{{getFaultItemValue(cardList,'normal')}}</h>
</div>
|
<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 style="font-size: 24px">{{cardList && cardList.abnormal ?cardList.abnormal:0}}</h>
<h style="font-size: 24px" class="text-link">{{getFaultItemValue(cardList,'abnormal')}}</h>
</div>
|
<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">{{cardList && cardList.abnormal ?cardList.abnormal:0}}</h>
<h style="font-size: 24px" class="text-link">{{getFaultItemValue(cardList,'abnormal')}}</h>
</div>
</div>
</div>
<div class="align-center" style="flex: 1;text-align: right;margin-right: 80px;">
<a class="m-r-20" @click="">更多</a>
<a v-model="cardName" @click="openOrCloseCard()">{{cardName}}</a>
<a class="m-r-20" v-if="cardList.faultFixInfoList && cardList.faultFixInfoList.length > 0" @click="openOrCloseNpm()">更多</a>
<a v-model="cardName" v-if="cardList.faultFixInfoList && cardList.faultFixInfoList.length > 0" @click="openOrCloseCard()">{{cardName}}</a>
</div>
</div>
<div v-if="cardOpen"
... ...
import store from '/vue3/src/store/index.js';
import service from '/vue3/src/views/faultDiagnosis/result/service.js';
export default {
name: 'faultDialTest',
... ... @@ -72,6 +73,14 @@ export default {
alarmColor.value = '#ff0000';
}
}
const openAlarm = () => {
service.sendEventAlarmDialog(emit, {
cardList: props.cardList
});
}
const openMoreDialog = () => {
service.sendEventMoreDialog(emit, proxy.$global, cardList.faultFixInfoList);
}
// 挂载完
... ... @@ -87,7 +96,10 @@ export default {
cardName,
cardOpen,
dialTest,
alarmColor
alarmColor,
openMoreDialog,
openAlarm,
getFaultItemValue: service.getFaultItemValue
}
}
}
... ...
... ... @@ -3,8 +3,8 @@
<img src="../src/style/img/fault/npm.gif">
<h3 style="margin-left: 10px;color: #666666;font-size: 18px">NPM</h3>
<div style="width: calc(100% - 170px);line-height: 54px" class="align-right">
<a class="m-r-20" @click="">更多</a>
<a v-model="cardName" @click="openOrCloseNpm()">{{cardName}}</a>
<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="openOrCloseNpm()">{{cardName}}</a>
</div>
</div>
<el-divider/>
... ... @@ -14,33 +14,33 @@
<div class="d-flex align-left">
<div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
<img src="../src/style/img/fault/npm/npmLink.png">
<span style="margin: 0px 6px 0px 6px;width: 105px">诊断链路场景</span>
<h>{{dialTest && dialTest.diagnosticResources ?dialTest.diagnosticResources:0}}</h>
<span style="margin: 0px 6px 0px 6px;width: 105px" >诊断链路场景</span>
<h class="text-link">{{getFaultItemValue(dialTest,'diagnosticResources')}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
<img src="../src/style/img/fault/disKpi.png">
<span style="margin: 0px 6px 0px 6px;width: 105px">诊断指标</span>
<h>{{dialTest && dialTest.diagnosticIndicators ?dialTest.diagnosticIndicators:0}}</h>
<h class="text-link">{{getFaultItemValue(dialTest,'diagnosticIndicators')}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
<img src="../src/style/img/fault/disItem.png">
<span style="margin: 0px 6px 0px 6px;width: 105px"> 诊断项</span>
<h>{{dialTest && dialTest.diagnosticItem ?dialTest.diagnosticItem:0}}</h>
<h class="text-link">{{getFaultItemValue(dialTest,'diagnosticItem')}}</h>
</div>
</div>
<div style="text-align: left;display: flex;margin-top: 10px;">
<div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #75af49;">
<img src="../src/style/img/fault/success.png" style="width: 20px;height: 20px">
<span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px">正常</span>
<h style="font-size: 24px">{{dialTest && dialTest.normal ?dialTest.normal:0}}</h>
<h style="font-size: 24px" class="text-link">{{getFaultItemValue(dialTest,'normal')}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #febb1a;">
<img src="../src/style/img/fault/error.png" style="width: 20px;height: 20px">
<span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px"> 异常</span>
<h style="font-size: 24px">{{dialTest && dialTest.abnormal ?dialTest.abnormal:0}}</h>
<h style="font-size: 24px" class="text-link">{{getFaultItemValue(dialTest,'abnormal')}}</h>
</div>
</div>
</div>
... ...
import store from '/vue3/src/store/index.js';
import service from '/vue3/src/views/faultDiagnosis/result/service.js';
export default {
name: 'npm',
... ... @@ -8,6 +9,10 @@ export default {
faultNo: {
type: String,
default: ''
},
targetType: {
type: String,
default: ''
}
},
data() {
... ... @@ -63,7 +68,7 @@ export default {
let getNpmList = () => {
let params = {
faultNo: props.faultNo,
targetType: "npm"
targetType: props.targetType.toLocaleLowerCase()
}
store.dispatch('getFaultList', params).then((res) => {
... ... @@ -75,6 +80,15 @@ 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);
}
// 挂载完
Vue.onMounted(() => {
... ... @@ -89,7 +103,10 @@ export default {
cardOpen,
dialTest,
getDialtestCard,
cardData
cardData,
openMoreDialog,
openAlarm,
getFaultItemValue: service.getFaultItemValue
}
}
}
... ...