From e6d24f4da2bdc2dc1c7fc3e056900f82b87b2e66 Mon Sep 17 00:00:00 2001
From: 鲁尚清 <lushangqing@honggroup.com.cn>
Date: Fri, 11 Feb 2022 17:28:38 +0800
Subject: [PATCH] 资源状态获取动态数据
---
report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-resource-status.js | 2 +-
report-ui/src/views/report/bigscreen/designer/widget/monitor/resourceStatus.vue | 77 +++++++++++++++++++++++++++++++++++++++++++----------------------------------
2 files changed, 44 insertions(+), 35 deletions(-)
diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-resource-status.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-resource-status.js
index db6a650..daf3ef8 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-resource-status.js
+++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-resource-status.js
@@ -63,7 +63,7 @@ export const monitorResourceStatus = {
name: 'imageAdressHealthBg',
required: false,
placeholder: '',
- value: require("../../../../../../../assets/images/healthStatus/state_bg.png"),
+ value: '',
},
{
type: 'custom-upload',
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/monitor/resourceStatus.vue b/report-ui/src/views/report/bigscreen/designer/widget/monitor/resourceStatus.vue
index 24fc8bc..c08bf1a 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/resourceStatus.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/resourceStatus.vue
@@ -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();
+ this.initImageUrl();
},
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();
+ this.initImageUrl();
},
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>
--
libgit2 0.24.0