monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit bd64200f5894a6c91a14a719bfeeef878b27cd41 1 parent b02b7f04

故障诊断调整

Inline Side-by-side
Showing 11 changed files with 234 additions and 56 deletions
<div>
<div class="d-flex">
<img src="../src/style/img/apm.gif">
<h3 style="margin-left: 10px">APM</h3>
<div style="width: calc(100% - 170px);line-height: 54px" class="align-right">
<a class="m-r-20" @click="openApmCard()">更多</a>
<a @click="closeApmCard()">收起</a>
</div>
</div>
<el-divider/>
<div class="d-flex" v-model="dialTest">
<div style="width: 300px;text-align: center;"><a>汇总信息</a></div>
<div>
<div class="d-flex align-left">
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
<img src="../src/style/img/npmLink.png">
<span style="margin: 0px 6px 0px 6px;width: 95px">诊断应用</span>
<h>{{dialTest && dialTest.diagnosticResources ?dialTest.diagnosticResources:0}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
<img src="../src/style/img/disKpi.png">
<span style="margin: 0px 6px 0px 6px;width: 95px">诊断指标</span>
<h>{{dialTest && dialTest.diagnosticIndicators ?dialTest.diagnosticIndicators:0}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
<img src="../src/style/img/disItem.png">
<span style="margin: 0px 6px 0px 6px;width: 95px"> 诊断项</span>
<h>{{dialTest && dialTest.diagnosticItem ?dialTest.diagnosticItem:0}}</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: yellowgreen">
<img src="../src/style/img/success.png">
<span style="margin: 0px 6px 0px 6px;width: 95px;">正常</span>
<h style="font-size: 20px">{{dialTest && dialTest.normal ?dialTest.normal:0}}</h>
</div>
|
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #f8d305">
<img src="../src/style/img/error.png">
<span style="margin: 0px 6px 0px 6px;width: 95px;"> 异常</span>
<h style="font-size: 20px">{{dialTest && dialTest.abnormal ?dialTest.abnormal:0}}</h>
</div>
</div>
</div>
<div class="d-flex" style="flex: 1">
<div>正常占比</div>
<div class="progress-con">
<el-progress :text-inside="true" :stroke-width="26"
:percentage="dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0"
color="#64A64C"/>
</div>
</div>
</div>
<div v-if="cardOpen"
style="margin-top:20px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 26px 26px 0px 26px;">
<div v-for="item in apmCard.item" style="width: 50%;overflow: hidden;">
<div style="width: 566px;min-height: 357px;background: url('../src/style/img/apmCard.png') no-repeat;background-size: 100% 100%;margin: 0px 0px 26px 90px;box-sizing: border-box;text-align: center;margin: 0 auto;padding-top: 65px">
<div style="color: white;font-size: 25px;">{{item.name}}</div>
<img src="../src/style/img/apmAbout.png" style="padding-top: 30px;">
<div style="padding-top: 30px;font-size: 20px;">应用：<span>{{item.use}}</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;">
<span style="margin: 0px 6px;width: 95px">响应时间:</span>
<span>{{item.time}}</span>
</div>
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
<span style="margin: 0px 6px 0px 6px;width: 95px">响应时间:</span>
<span>{{item.Fullgc}}</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;">
<span style="margin: 0px 6px;width: 95px">线程总数:</span>
<span>{{item.count}}</span>
</div>
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
<span style="margin: 0px 6px 0px 6px;width: 95px">错误率:</span>
<span>{{item.error}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
... ...
import store from '/vue3/src/store/index.js';
export default {
name: 'apm',
template: '',
components: {},
props: {
faultNo: {
type: String,
default: ''
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let dialTest = Vue.ref();
let card = Vue.ref({})
let cardOpen = Vue.ref(false);
let openApmCard = () => {
cardOpen.value = true;
}
let apmCard = Vue.ref({
item:[{
name:'内网',
use:'234',
time:'235',
Fullgc:'2',
count:2,
error:2,
},{
name:'外网',
use:'234',
time:'235',
Fullgc:'2',
count:2,
error:2,
}]
})
let closeApmCard = () => {
cardOpen.value = false;
}
let getNpmList = () => {
let params = {
faultNo: "GZ202207220001",
targetType: "apm"
}
store.dispatch('getFaultList', params).then((res) => {
if (res.data && res.success) {
dialTest.value = res.data[0];
card.value = dialTest.value.faultFixInfoList;
}
}).catch(e => {
console.log(e);
})
}
// 挂载完
Vue.onMounted(() => {
getNpmList();
})
return {
card,
openApmCard,
closeApmCard,
cardOpen,
dialTest,
apmCard
}
}
}
... ...
... ... @@ -56,11 +56,11 @@
<div v-if="cardOpen" style="margin-top: 10px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 6px;">
<div v-for="item in card" style="width: 190px">
<div style="width: 190px;height: 190px;background: url(../src/style/img/disBiz.png) no-repeat;background-size: 100% 100%;padding-top: 10px;">
<div :style="{backgroundColor: item.color}"
style="background-color: orange;width: 100px;height: 100px;border-radius: 100px;margin: 0px auto 10px;margin-top: 10px;color: white;line-height: 100px;text-align: center;">
<span>{{item.shortName}}</span>
<div :style="{backgroundColor: item[0].color}"
style="width: 100px;height: 100px;border-radius: 100px;margin: 0px auto 10px;margin-top: 10px;color: white;line-height: 100px;text-align: center;">
<span>{{item[0].shortName}}</span>
</div>
<p style="text-align: center;word-break: break-all;padding: 0px 25px;">{{item.taskName}}</p>
<p style="text-align: center;word-break: break-all;padding: 0px 25px;">{{item[0].taskName}}</p>
</div>
</div>
</div>
... ...
... ... @@ -34,7 +34,7 @@ export default {
store.dispatch('getFaultList', params).then((res) => {
if (res.data && res.success) {
dialTest.value = res.data[0];
card.value = dialTest.value.faultFixInfoList[0];
card.value = dialTest.value.faultFixInfoList;
}
}).catch(e => {
console.log(e);
... ...
... ... @@ -2,10 +2,9 @@
<div class="d-flex">
<img src="../src/style/img/fault/base.gif">
<h3 style="margin-left: 10px">基础资源</h3>
<!--<div style="width: calc(100% - 200px);line-height: 54px" class="align-right">
<a class="m-r-20" @click="allCard()">更多</a>
<a @click="closeCard()">收起</a>
</div>-->
<div style="width: calc(100% - 200px);line-height: 54px" class="align-right">
<a class="m-r-20" @click="baseCard()">更多</a>
</div>
</div>
<el-divider/>
<div class="d-flex" v-model="dialTest">
... ... @@ -55,6 +54,6 @@
</div>
<res-item />
<res-item v-if="cardOpen" />
</div>
... ...
... ... @@ -23,7 +23,7 @@ export default {
let dialTest = Vue.ref();
let card = Vue.ref({})
let cardOpen = Vue.ref(false);
let allCard = () => {
let baseCard = () => {
cardOpen.value = true;
}
let closeCard = () => {
... ... @@ -32,11 +32,12 @@ export default {
let getDialtestList = () => {
let params = {
faultNo: props.faultNo,
targetType: "dialtest"
targetType: "base"
}
store.dispatch('getFaultList', params).then((res) => {
if (res.data && res.success) {
debugger
dialTest.value = res.data[0];
card.value = dialTest.value.faultFixInfoList[0];
}
... ... @@ -52,7 +53,7 @@ export default {
return {
card,
allCard,
baseCard,
closeCard,
cardOpen,
dialTest
... ...
... ... @@ -46,7 +46,7 @@
</div>
</div>
</div>
<div class="align-center" style="flex: 1">
<div class="align-center" style="flex: 1;text-align: right;margin-right: 80px;">
<a class="m-r-20" @click="allCard()">更多</a>
<a @click="closeCard()">收起</a>
</div>
... ...
... ... @@ -26,19 +26,19 @@ export default {
cardOpen.value = false;
}
let getDialtestList = () => {
let params = {
faultNo: props.faultNo,
targetType: "dialtest"
}
store.dispatch('getFaultList', params).then((res) => {
if (res.data && res.success) {
dialTest.value = res.data[0];
card.value = dialTest.value.faultFixInfoList[0];
}
}).catch(e => {
console.log(e);
})
// let params = {
// faultNo: props.faultNo,
// targetType: "dialtest"
// }
//
// store.dispatch('getFaultList', params).then((res) => {
// if (res.data && res.success) {
// dialTest.value = res.data[0];
// card.value = dialTest.value.faultFixInfoList[0];
// }
// }).catch(e => {
// console.log(e);
// })
}
// 挂载完
... ...
<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
<div class="cm-card" style="margin: 10px">
<div class="heard" style="display:flex;padding: 26px 26px 0px 26px">
<div style="display:flex;"><img src="../src/style/img/npm.gif">
<h3 style="margin-left: 10px">NPM</h3></div>
<div style="flex: 1;text-align: right;display: inline-block;margin-top: 33px;">
<a style="margin-right: 20px;color: #1E9FFF;cursor:pointer " @click="openNpmCard()">更多</a>
<a style="color: #1E9FFF;cursor:pointer " @click="closeNpmCard()">收起</a>
<div>
<div class="d-flex">
<img src="../src/style/img/npm.gif">
<h3 style="margin-left: 10px">NPM</h3>
<div style="width: calc(100% - 170px);line-height: 54px" class="align-right">
<a class="m-r-20" @click="openNpmCard()">更多</a>
<a @click="closeNpmCard()">收起</a>
</div>
</div>
<el-divider/>
<div class="content" v-model="dialTest" style="display:flex;padding: 26px 26px 26px 26px;">
<div style="height: 50px;text-align: left;margin-left: 4%;min-width: 20%;"><a>汇总信息</a></div>
<div class="d-flex" v-model="dialTest">
<div style="width: 300px;text-align: center;"><a>汇总信息</a></div>
<div>
<div style="text-align: left;display: flex;">
<div class="d-flex align-left">
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
<img src="../src/style/img/npmLink.png">
<span style="margin: 0px 6px 0px 6px;width: 95px">诊断链路场景</span>
... ... @@ -45,34 +44,38 @@
</div>
</div>
</div>
<div style="display:flex;width: 35%">
<div class="d-flex" style="flex: 1">
<div>正常占比</div>
<div class="progress-con">
<el-progress :text-inside="true" :stroke-width="26"
:percentage="dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0"
:percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0"
color="#64A64C"/>
</div>
</div>
</div>
<div v-if="cardOpen"
style="margin-top:20px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 26px 26px 0px 26px;">
<div v-for="item in card" style="width: 25%;overflow: hidden;">
<div style="width: 100%;min-height: 184px;background: url('../src/style/img/npmCard.png') no-repeat;background-size: 100% 100%;padding-top: 20px;margin-bottom: 26px;box-sizing: border-box;">
<p style="width: 85%;margin-left: -40px">{{item[0].streamName}}</p>
<div style="margin-top: 47px;">
<p style="width: 85%;text-align: left;padding-left: 50px;">{{item[1].kpiName}}<h
style="margin-left: 6px;text-decoration: underline">{{item[1].diagnosisResult}}</h></p>
<div v-if="cardOpen" style="margin-top:10px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 6px;">
<div v-for="item in card" style="width: 340px;">
<div style="width: 340px;min-height: 184px;background: url('../src/style/img/npmCard.png') no-repeat;background-size: 100% 100%;padding-top: 20px;margin-bottom: 26px;box-sizing: border-box;">
<p style="width: 290px;margin-left: 40px;font-size: 16px">{{item[0].streamName}}</p>
<div style="margin-top: 35px;">
<p style="width: 85%;text-align: left;padding-left: 50px;">{{item[0].kpiName}}
<h style="margin-left: 6px;text-decoration: underline">{{item[0].diagnosisResult}}</h>
</p>
</div>
<div style="display: flex;text-align: left;margin-top: -17px;margin-left: 50px;">
<p style="width: 50%;">{{item[2].kpiName}}<h style="margin-left: 6px;text-decoration: underline"
:style="{color: item[2].color}">{{item[2].diagnosisResult}}%</h>
<p style="width: 50%;">{{item[1].kpiName}}
<h style="margin-left: 6px;text-decoration: underline"
:style="{color: item[2].color}">{{item[1].diagnosisResult}}%
</h>
</p>
<p style="width: 50%;">{{item[0].kpiName}}<h style="margin-left: 6px;text-decoration: underline"
:style="{color: item[0].color}">{{item[0].diagnosisResult}}%</h>
<p style="width: 50%;">{{item[2].kpiName}}
<h style="margin-left: 6px;text-decoration: underline"
:style="{color: item[2].color}">{{item[2].diagnosisResult}}%
</h>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
... ...
... ... @@ -4,6 +4,12 @@ export default {
name: 'npm',
template: '',
components: {},
props: {
faultNo: {
type: String,
default: ''
}
},
data() {
return {}
},
... ... @@ -22,7 +28,7 @@ export default {
}
let getNpmList = () => {
let params = {
faultNo: "GZ202204080012",
faultNo: props.faultNo,
targetType: "npm"
}
... ...
... ... @@ -11,6 +11,9 @@ export default {
'npm-item': Vue.defineAsyncComponent(
() => myImport('components/page/faultDiagnosis/result/npm/index')
),
'apm-item': Vue.defineAsyncComponent(
() => myImport('components/page/faultDiagnosis/result/apm/index')
),
'netLinks': Vue.defineAsyncComponent(
() => myImport('components/page/faultDiagnosis/result/netLinks/index')
),
... ... @@ -60,7 +63,7 @@ export default {
}, {
faultType: 'APM',
faultTypeName: 'APM',
components: 'result-item',
components: 'apm-item',
color: '#F56C6C',
itemName: '检测指标',
detail: true,
... ... @@ -107,7 +110,7 @@ export default {
faultDetailDetailInfo.value.items[3].state= item.state
}
if(item.type.toUpperCase()=='APM'){
faultDetailDetailInfo.value.items[4].state= item.states
faultDetailDetailInfo.value.items[4].state= item.state
}
})
}
... ...