monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit e6d24f4da2bdc2dc1c7fc3e056900f82b87b2e66 1 parent 6162083b

资源状态获取动态数据

Inline Side-by-side
Showing 2 changed files with 42 additions and 33 deletions
... ... @@ -63,7 +63,7 @@ export const monitorResourceStatus = {
name: 'imageAdressHealthBg',
required: false,
placeholder: '',
value: require("../../../../../../../assets/images/healthStatus/state_bg.png"),
value: '',
},
{
type: 'custom-upload',
... ...
... ... @@ -5,7 +5,7 @@
<img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
<div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
</div>
<el-row class="padding-top-30">
<el-row class="padding-top-30" v-if="hackReset">
<!-- <el-col class="flex-around" :span="imgStyle.spanNum" v-for="item in healthDataComputed" :key="item.id">-->
<el-col class="flex-around" :span="24" >
<div class="health-service">
... ... @@ -16,17 +16,20 @@
<div class="health-num-item">
<span class="health-color"></span>
<span class="health-num-title">严重告警：</span>
<span class="health-num">{{ healthNumData.yz }}</span>
<span class="health-num" v-if="healthNumData.yz && healthNumData.yz!='null'">{{ healthNumData.yz }}</span>
<span class="health-num" v-if="!healthNumData.yz || healthNumData.yz=='null'">0</span>
</div>
<div class="health-num-item">
<span class="health-color"></span>
<span class="health-num-title">重要告警：</span>
<span class="health-num">{{ healthNumData.zy }}</span>
<span class="health-num" v-if="healthNumData.zy && healthNumData.zy!='null'">{{ healthNumData.zy }}</span>
<span class="health-num" v-if="!healthNumData.zy || healthNumData.zy=='null'">0</span>
</div>
<div class="health-num-item">
<span class="health-color"></span>
<span class="health-num-title">一般告警：</span>
<span class="health-num">{{ healthNumData.yb }}</span>
<span class="health-num" v-if="healthNumData.yb && healthNumData.yb!='null'">{{ healthNumData.yb }}</span>
<span class="health-num" v-if="!healthNumData.yb || healthNumData.yb=='null'">0</span>
</div>
</div>
</el-col>
... ... @@ -44,15 +47,16 @@ export default {
name: "resourceStatus",
data() {
return {
hackReset: true,
options: {},
spanNum:24,//col的span的个数
healthStatusUrl:'',
healthNumData:{
healthNumData:{/*
icon: "worse",
state: "量",
state: "良",
yb: "0",
yz: "0",
zy: "1"
zy: "1"*/
},//资源状态告警个数数据 good worse worst
healthData:[
... ... @@ -123,21 +127,13 @@ export default {
},
imgStyleHealth() {
return {
imageAdressHealthBg:this.transStyle.imageAdressHealthBg?this.transStyle.imageAdressHealthBg:require("../../../../../../assets/images/healthStatus/state_bg.png"),
imageAdressHealthBg:this.transStyle.imageAdressHealthBg,
imageAdressHealthGood:this.transStyle.imageAdressHealthGood?this.transStyle.imageAdressHealthGood:require("../../../../../../assets/images/healthStatus/state_01.png"),
imageAdressHealthWorse:this.transStyle.imageAdressHealthWorse?this.transStyle.imageAdressHealthWorse:require("../../../../../../assets/images/healthStatus/state_02.png"),
imageAdressHealthBad:this.transStyle.imageAdressHealthBad?this.transStyle.imageAdressHealthBad:require("../../../../../../assets/images/healthStatus/state_03.png"),
dataNum:this.transStyle.dataNum?this.transStyle.dataNum:'3'
};
},
/* healthDataComputed(){
let healthData=this.healthData;
healthData=this.initImageUrl();
if(this.imgStyleHealth.dataNum){
healthData=healthData.slice(0,this.imgStyleHealth.dataNum);
}
return healthData;
}*/
},
watch: {
value: {
... ... @@ -146,10 +142,9 @@ export default {
this.optionsSetUp = val.setup;
this.optionsPosition = val.position;
this.optionsData=val.data;
// this.init();
this.handlerData();
this.initImageUrl();
this.getHealthData();
},
deep: true
... ... @@ -161,10 +156,9 @@ export default {
this.optionsSetUp = this.value.setup;
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
// this.init();
this.handlerData();
this.initImageUrl();
this.getHealthData();
},
methods: {
... ... @@ -188,8 +182,12 @@ export default {
},
async init(){
const reportCode = this.$route.query.reportCode;
const { code, data } = await getData(reportCode);
if (code != 200) return;
console.log("aaa",this.$route.query)
let locationUrl=this.$route.query;
let resId=locationUrl.resId;
let token=locationUrl.access_token;
// const { code, data } = await getData(reportCode);
// if (code != 200) return;
},
handlerData() {
const resData = this.optionsData;
... ... @@ -200,28 +198,39 @@ export default {
},
handlerStaticData(data) {
this.healthNumData = data;
this.initImageUrl();
},
handlerDynamicData(data, refreshTime) {
if (!data) return;
/* if (this.ispreview) {
console.log("资源",data)
if (this.ispreview) {
this.getEchartData(data);
this.flagInter = setInterval(() => {
this.getEchartData(data);
}, refreshTime);
} else {
this.getEchartData(data);
}*/
}
},
async getHealthData(){
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
console.log("def",res)
if(res && res[0].code==0){
this.healthNumData = res[0].data;
/*
const { code, data } = await getHealth();
if (code != 200) return;
this.healthNumData=data;
console.log("health",data)*/
}
this.hackResetFun();
this.initImageUrl();
});
},
// vue hack 之强制刷新组件
hackResetFun() {
this.hackReset = false;
this.$nextTick(() => {
this.hackReset = true;
});
},
},
}
</script>
... ...