monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 3659badf7e3ded63788338f35e35058ed8de42bf 1 parent e7c41e84

故障诊断调整

Inline Side-by-side
Showing 8 changed files with 98 additions and 52 deletions
... ... @@ -3,8 +3,8 @@
<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>
<a class="m-r-20" @click="">更多</a>
<a v-model="cardName" @click="openOrCloseApm()">{{cardName}}</a>
</div>
</div>
<el-divider/>
... ... @@ -57,7 +57,7 @@
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: 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[0].name}}</div>
<div style="color: white;font-size: 25px;">{{item[0].resClassName}}</div>
<img src="../src/style/img/apmAbout.png" style="padding-top: 30px;">
<div style="padding-top: 30px;font-size: 20px;">应用：<span>{{item[0].use}}</span></div>
<hr style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#aed6f4 size=1>
... ...
... ... @@ -18,10 +18,17 @@ export default {
let dialTest = Vue.ref();
let cardName = Vue.ref('展开');
let card = Vue.ref({})
let cardOpen = Vue.ref(false);
let openApmCard = () => {
cardOpen.value = true;
let openOrCloseApm = () => {
cardOpen.value = !cardOpen.value;
if (cardOpen.value){
cardName.value='收起';
}else {
cardName.value='展开';
}
}
let apmCard = Vue.ref({
item:[{
... ... @@ -40,9 +47,6 @@ export default {
error:2,
}]
})
let closeApmCard = () => {
cardOpen.value = false;
}
let getNpmList = () => {
let params = {
faultNo: "GZ202207220001",
... ... @@ -67,8 +71,8 @@ export default {
return {
card,
openApmCard,
closeApmCard,
openOrCloseApm,
cardName,
cardOpen,
dialTest,
apmCard
... ...
... ... @@ -3,8 +3,8 @@
<img src="../src/style/img/dialtest.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>
<a class="m-r-20" @click="">更多</a>
<a v-model="cardName" @click="openOrCloseDialtest()">{{cardName}}</a>
</div>
</div>
<el-divider/>
... ... @@ -53,7 +53,7 @@
</div>
</div>
</div>
<div v-if="cardOpen" style="margin-top: 10px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 6px;">
<div v-if="cardOpen" style="margin-top: 10px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 6px;max-height: 390px;overflow-y: auto;">
<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[0].color}"
... ...
... ... @@ -20,12 +20,17 @@ export default {
let dialTest = Vue.ref();
let card = Vue.ref({})
let cardOpen = Vue.ref(false);
let allCard = () => {
cardOpen.value = true;
}
let closeCard = () => {
cardOpen.value = false;
let cardName = Vue.ref('展开');
let openOrCloseDialtest = () => {
cardOpen.value = !cardOpen.value;
if (cardOpen.value){
cardName.value='收起';
}else {
cardName.value='展开';
}
}
let getDialtestList = () => {
let params = {
faultNo: props.faultNo,
... ... @@ -56,8 +61,8 @@ export default {
return {
card,
allCard,
closeCard,
openOrCloseDialtest,
cardName,
cardOpen,
dialTest,
openAlarm
... ...
... ... @@ -2,7 +2,7 @@
<div class="d-flex" v-model="cardList">
<div class="d-flex align-center" style="width: 187px;padding-left: 113px;">
<!--<span style="width: 10px;height: 10px;background-color: red;border-radius: 50%">&nbsp;</span>-->
<i class="iconfont icon-dian" style="font-size: 32px;color: red;"/>
<i :style="{color: alarmColor}" class="iconfont icon-dian" style="font-size: 32px;"/>
<img class="m-l-6" :src="'../src/style/img/fault/base/resType/'+cardList.resClass+'.png'" >
<a class="m-l-6">{{cardList.resClassName}}</a>
</div>
... ... @@ -47,12 +47,12 @@
</div>
</div>
<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>
<a class="m-r-20" @click="">更多</a>
<a v-model="cardName" @click="openOrCloseCard(cardList.faultFixInfoList)">{{cardName}}</a>
</div>
</div>
<div v-if="cardOpen"
style="margin-top: 10px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 6px;">
style="margin-top: 10px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 6px;max-height: 330px;overflow-y: auto;">
<div v-for="item in cardList.faultFixInfoList" style="width: 25%">
<div style="min-width: 338px;height: 160px;background: url(../src/style/img/fault/base/bg.png) no-repeat;background-size: 100% 100%;padding-top: 10px;">
<el-row style="height: 70px;padding: 10px 30px;">
... ... @@ -64,7 +64,7 @@
</el-col>
<el-col :span="16">
{{item[0].resName}}<br>
{{item[0].ipAddr}}
IP地址：{{item[0].ipAddr}}
</el-col>
<el-col :span="4" class="align-right">
<i class="iconfont icon-gengduo-shuxiang" style="font-size: 30px;"></i>
... ... @@ -72,7 +72,7 @@
</el-row>
<el-row style="height: 70px;padding: 10px 30px;" v-if="item[0].resClass=='system'">
<el-col :span="4" class="align-center">
<el-col :span="4" class="align-center" style="margin: auto;">
<img v-if="item[3].diagnosisResult =='连接成功'" src="../src/style/img/fault/base/linkSucccess.png" >
<img v-else src="../src/style/img/fault/base/linkError.png" >
</el-col>
... ... @@ -84,21 +84,18 @@
{{item[2].diagnosisResult}}
</el-col>
<el-col :span="1" style="line-height: 36px;color: gainsboro;">
|
</el-col>
<el-col :span="4" class="align-center">
<img src="../src/style/img/fault/base/内存.png"><br/>
{{item[1].diagnosisResult}}%
</el-col>
<el-col :span="1" style="line-height: 36px;color: gainsboro;">
|
</el-col>
<el-col :span="4" class="align-center">
<img src="../src/style/img/fault/base/alarm.png"><br/>
{{item[0].alarmNum}}
</el-col>
<el-col :span="1" style="line-height: 36px;color: gainsboro;">
|
</el-col>
<el-col :span="4" class="align-center">
<img src="../src/style/img/fault/base/时间-绿.png"><br/>
... ... @@ -106,11 +103,11 @@
</el-col>
</el-row>
<el-row style="height: 70px;padding: 10px 30px;" v-if="item[0].resClass!='system'">
<el-col :span="4" class="align-center" v-if="item[0].resClass!='middleware'">
<el-col :span="4" class="align-center" v-if="item[0].resClass!='middleware'" >
<img src="../src/style/img/fault/base/linkSucccess.png" v-if="item[0].diagnosisResult=='连接成功'">
<img src="../src/style/img/fault/base/linkError.png" v-else>
</el-col>
<el-col :span="4" class="align-center" v-else>
<el-col :span="4" class="align-center" v-else >
<img src="../src/style/img/fault/base/linkSucccess.png">
<img src="../src/style/img/fault/base/linkError.png">
</el-col>
... ...
... ... @@ -11,16 +11,40 @@ export default {
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let dialTest = Vue.ref();
let dialTest = Vue.ref({});
let card = Vue.ref({})
let cardOpen = Vue.ref(false);
let allCard = () => {
cardOpen.value = true;
let cardName = Vue.ref('展开');
let alarmColor = Vue.ref();
let openOrCloseCard = (data) => {
debugger
cardOpen.value = !cardOpen.value;
if (cardOpen.value){
cardName.value='收起';
}else {
cardName.value='展开';
getDialtestList(data)
}
}
let closeCard = () => {
cardOpen.value = false;
}
let getDialtestList = () => {
let getDialtestList = (data) => {
for (let i = 0; i < data.length; i++) {
let resName = '';
let ipAddr = '';
let linkState = '';
let cpu = '';
let men = '';
let alarm = '';
let collTime = '';
for (let j = 0; j < data[i].length; j++) {
if (data[i][j].flag=='mem'){
men=data[i][j].diagnosisResult
}else if (data[i][j].flag=='mem'){
men=data[i][j].diagnosisResult
}
}
dialTest.push()
}
// let params = {
// faultNo: props.faultNo,
// targetType: "dialtest"
... ... @@ -35,20 +59,33 @@ export default {
// console.log(e);
// })
}
let getAlarmColor = (cardList) =>{
if (cardList.alarmLevel = '0'){
alarmColor.value = '#05345d';
}else if (cardList.alarmLevel = '1'){
alarmColor.value = '#f97d04';
}else if (cardList.alarmLevel = '2'){
alarmColor.value = '#ffde00';
}else if (cardList.alarmLevel = '3'){
alarmColor.value = '#ff0000';
}
}
// 挂载完
Vue.onMounted(() => {
let cardList = props.cardList
let cardList = props.cardList;
getAlarmColor(cardList);
getDialtestList();
})
return {
card,
allCard,
closeCard,
openOrCloseCard,
cardName,
cardOpen,
dialTest
dialTest,
alarmColor
}
}
}
... ...
... ... @@ -3,8 +3,8 @@
<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>
<a class="m-r-20" @click="">更多</a>
<a v-model="cardName" @click="openOrCloseNpm()">{{cardName}}</a>
</div>
</div>
<el-divider/>
... ... @@ -53,7 +53,7 @@
</div>
</div>
</div>
<div v-if="cardOpen" style="margin-top:10px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 6px;">
<div v-if="cardOpen" style="margin-top:10px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 6px;max-height: 330px;overflow-y: auto;">
<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>
... ...
... ... @@ -20,11 +20,14 @@ export default {
let dialTest = Vue.ref();
let card = Vue.ref({})
let cardOpen = Vue.ref(false);
let openNpmCard = () => {
cardOpen.value = true;
}
let closeNpmCard = () => {
cardOpen.value = false;
let cardName = Vue.ref('展开');
let openOrCloseNpm = () => {
cardOpen.value = !cardOpen.value;
if (cardOpen.value){
cardName.value='收起';
}else {
cardName.value='展开';
}
}
let getNpmList = () => {
let params = {
... ... @@ -50,8 +53,8 @@ export default {
return {
card,
openNpmCard,
closeNpmCard,
cardName,
openOrCloseNpm,
cardOpen,
dialTest
}
... ...