monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 1fc9abc3884d0951542c9b3a33fd5bb3ae82b932 1 parent 0e4caa21

故障诊断拨测及npm页面

Inline Side-by-side
Showing 19 changed files with 267 additions and 1 deletions
... ... @@ -11,7 +11,18 @@ let getRuleAdvanced = (ruleId) => {
return get('/api-web/fault/conf/rule/getRuleAdvanced', {ruleId: ruleId});
}
/**
* 诊断报告
* http://192.168.0.59:3000/project/78/interface/api/3916
* @param ruleId
* @returns {Promise<*>}
*/
let getFaultList = (params) => {
return get('/api-web/fault/result/tableList', params);
}
export default {
getRuleAdvanced
getRuleAdvanced,
getFaultList
}
... ...
... ... @@ -13,6 +13,9 @@ export default {
actions: {
getRuleAdvanced(context, ruleId) {
return faultDiagnosisApi.getRuleAdvanced(ruleId);
},
getFaultList(context, params) {
return faultDiagnosisApi.getFaultList(params);
}
}
};
... ...
<div class="container" :style="{'height':height+'px','min-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/dialtest.gif">
<h3 style="margin-left: 10px">业务拨测</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="allCard()">更多</a>
<a style="color: #1E9FFF;cursor:pointer " @click="closeCard()">收起</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>
<div style="text-align: left;display: flex;">
<div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
<img src="../src/style/img/disRes.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 style="display:flex;width: 35%">
<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 card" style="width: 14%;overflow: hidden;">
<div style="width: 100%;min-height: 191px;background: url('../src/style/img/disBiz.png') no-repeat;background-size: 100% 100%;padding-top: 20px;margin-bottom: 26px;box-sizing: border-box;">
<div :style="{backgroundColor: item.color}"
style=" width: 100px;height: 100px;border-radius: 100px;-webkit-border-radius: 100px;margin: 0px auto 10px auto;display: flex;align-items: center;color: white;">
<span>{{item.shortName}}</span>
</div>
<p style="margin: -5px 0px 0px 16px;width: 85%;">{{item.taskName}}</p>
</div>
</div>
</div>
</div>
</div>
... ...
import store from '/vue3/src/store/index.js';
export default {
name: 'faultDialTest',
template: '',
components: {},
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 allCard = () => {
cardOpen.value = true;
}
let closeCard = () => {
cardOpen.value = false;
}
let getDialtestList = () => {
let params = {
faultNo: "GZ202204080012",
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);
})
}
// 挂载完
Vue.onMounted(() => {
getDialtestList();
})
return {
card,
allCard,
closeCard,
cardOpen,
dialTest
}
}
}
... ...
<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>
<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>
<div style="text-align: left;display: flex;">
<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 style="display:flex;width: 35%">
<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 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>
<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>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
... ...
import store from '/vue3/src/store/index.js';
export default {
name: 'npm',
template: '',
components: {},
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 openNpmCard = () => {
cardOpen.value = true;
}
let closeNpmCard = () => {
cardOpen.value = false;
}
let getNpmList = () => {
let params = {
faultNo: "GZ202204080012",
targetType: "npm"
}
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,
openNpmCard,
closeNpmCard,
cardOpen,
dialTest
}
}
}
... ...