资源状态获取动态数据

鲁尚清
Commit e6d24f4da2bdc2dc1c7fc3e056900f82b87b2e66 1 parent 6162083b
Showing 2 changed files with 42 additions and 33 deletions
report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-resource-status.js
report-ui/src/views/report/bigscreen/designer/widget/monitor/resourceStatus.vue
--- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-resource-status.js
View file @e6d24f4
+++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-resource-status.js
View file @e6d24f4
@@ -63,7 +63,7 @@ export const monitorResourceStatus = {
         name: 'imageAdressHealthBg',
         required: false,
         placeholder: '',
-        value: require("../../../../../../../assets/images/healthStatus/state_bg.png"),
+        value: '',
       },
       {
         type: 'custom-upload',
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/resourceStatus.vue
View file @e6d24f4
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/resourceStatus.vue
View file @e6d24f4
@@ -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>