仪表盘配置下探功能

鲁尚清
Commit 21000b980470488bf10872306d46d5009406e85b 1 parent b1193135
Showing 4 changed files with 68 additions and 14 deletions
report-ui/src/views/report/bigscreen/designer/designerComponents/customMenuBox.vue
report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-gauge-rate.js
report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue
report-ui/src/views/report/bigscreen/designer/widget/monitor/gaugeRate.vue
--- a/report-ui/src/views/report/bigscreen/designer/designerComponents/customMenuBox.vue
View file @21000b9
+++ b/report-ui/src/views/report/bigscreen/designer/designerComponents/customMenuBox.vue
View file @21000b9
@@ -53,7 +53,7 @@
           您确定要对当前指标进行过滤处理？
         </div>
         <div v-if="dialogName=='performance_trends'" class="txtScroll-top">
-<!--          <div>性能趋势{{pressingValue.kpiValue}}</div>-->
+          <div>性能趋势{{trendSrc}}</div>
           <iframe :src="trendSrc" class="layadmin-iframe"  style="height: 99.5%!important;width: 100%;"/>
         </div>
         <div v-if="dialogName=='pressing_times'" class="txtScroll-top">
@@ -88,6 +88,10 @@ export default {
   props: {
     heightStyle: String,
     marginStyle: String,
+    trendSrc:{
+      type:String,
+      default:'',
+    },
     tableDataValueHead:{
       type:Object,
       default: {},
@@ -150,7 +154,6 @@ export default {
       dialogVisible:false,//表格下探后的弹框
       widthStyle:';',//弹框宽度样式
       dialogName: '',
-      // trendSrc:'',//性能走势图地址
       // pressingVisible:'',
       pressingValue:'',//压制次数
       ignoreCnt:'',
@@ -158,7 +161,7 @@ export default {
       strategyValue:'',//告警策略值
       alarmListData:[],//告警列表数据
       alarmListValue:[],//告警列表值
-      trendSrc:'',//性能趋势图地址
+      // trendSrc:'',//性能趋势图地址
     }
   },
   watch: {
@@ -230,7 +233,7 @@ export default {
       }else if(itemMenu.type=='performance_trends'){
         this.widthStyle='';
-        this.setTrend(tableDataValueHead);
+        // this.setTrend(tableDataValueHead);
       }else if(itemMenu.type=='pressing_times'){
         this.widthStyle='width:400px;height: 200px;min-height: 200px;overflow: hidden;';
@@ -297,7 +300,7 @@ export default {
         })
       }
     },
-    //设置性能趋势图
+ /*   //设置性能趋势图
     setTrend(tableDataValueHead){
       let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.pressingValue.kpiId+'&flag='+this.pressingValue.flag+'&warning='+this.pressingValue.isWarning
         +'&ident='+this.pressingValue.kpiIdent
@@ -306,7 +309,7 @@ export default {
         +'&name='+this.pressingValue.kpiName + " " + tableDataValueHead.name;
       let baseUrl=getTrendBaseUrl();
       this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token;
-    },
+    },*/
     //获取告警策略列表数据
     async getAlarmPolicyData(kpiId){
       let obj=this.getUrlToken;
--- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-gauge-rate.js
View file @21000b9
+++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-gauge-rate.js
View file @21000b9
@@ -433,7 +433,21 @@ export const monitorGaugeRate = {
         relactiveDom: 'dataType',
         relactiveDomValue: 'staticData',
         value: [
-          {"num":50}
+          {
+            canCA: true,
+            flag: "cpu",
+            id: "KPI7054BC34",
+            ident: "1",
+            inCAing: false,
+            isWarning: 0,
+            kpiLevel: 1,
+            kpiName: "CPU使用率",
+            kpiUnit: "%",
+            name: "CPU使用率",
+            resType: "ALI_CLOUD_ECS",
+            trend: 1,
+            value: "38"
+          }
         ],
       },
       {
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue
View file @21000b9
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue
View file @21000b9
@@ -34,7 +34,7 @@
               v-for="(itemChild, idx) in header"
               :key="idx"
               :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
-                 @mouseenter="pressingTimes(index,idx)"
+                 @mouseenter="pressingTimes(index,idx,item[itemChild.key],itemChild)"
                  :data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx,'')"
             >
               <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsis[index+'-'+idx]"  ref="elTooltip" trigger="hover" >
@@ -53,6 +53,7 @@
                     :tableDataValue="item[itemChild.key]" :flg="''"
                     :tableDataValueHead="itemChild"
                     :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
+                    :trendSrc="trendSrc"
                     :resType="resType"
                 ></customMenuBox>
             </div>
@@ -92,7 +93,7 @@
                      v-for="(itemChild, idx) in headerAll"
                      :key="idx"
                      :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
-                     @mouseenter="pressingTimes(index,idx)"
+                     @mouseenter="pressingTimes(index,idx,item[itemChild.key],itemChild)"
                      :data-tip="tableFiledMaxWidth('isOverflow1'+index+'-'+idx,index,idx,'more')"
                 >
                   <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsisMore[index+'-'+idx]"  ref="elTooltip" trigger="hover" >
@@ -118,6 +119,7 @@
                                   :tableDataValue="item[itemChild.key]" :flg="''"
                                   :tableDataValueHead="itemChild"
                                   :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
+                                  :trendSrc="trendSrc"
                                   :resType="resType"
                   ></customMenuBox>
                 </div>
@@ -677,8 +679,10 @@ export default {
       }
     },
-    pressingTimes(index,idx){
+    pressingTimes(index,idx,item,itemChild){
       this.pressingVisible=index+'-'+idx;
+      this.pressingValue=item;
+      this.setTrend(itemChild)
     },
     closePressingDialog(){
       // this.pressingVisible=false;
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/gaugeRate.vue
View file @21000b9
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/gaugeRate.vue
View file @21000b9
 <template>
-  <div :style="styleObj" @click="isDisplay=false;">
-    <div class="title-div flex-start" :style="styleColor"  @mouseenter="isDisplay=true;">
+  <div :style="styleObj" >
+    <div class="title-div flex-start" :style="styleColor"  @mouseenter.stop="isDisplay=true;">
       <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress"  alt="">
       <div v-if="imgStyle.titleName"  class="title-name">{{imgStyle.titleName}}</div>
       <customMenuBox ref="customMenu"  v-if="imgStyle.probeDown && isDisplay"
@@ -8,6 +8,7 @@
                      :tableDataValue="tableDataValue" :flg="''"
                      :tableDataValueHead="tableDataValueHead"
                      :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="imgStyle.titleName"
+                     :trendSrc="trendSrc"
                      :resType="resType"
       ></customMenuBox>
@@ -19,6 +20,8 @@
 <script>
 import echarts from "echarts";
 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
+import {getTrendBaseUrl} from "@/api/platform";
+
 export default {
   name: "gaugeRate",
   components: {customMenuBox},
@@ -28,11 +31,12 @@ export default {
   },
   data() {
     return {
+      trendSrc:'',//性能趋势图地址
       marginStyle:'',//弹框距离顶部距离
       heightStyle:'',//弹框遮罩层高度
       widthStyle:';',//弹框宽度样式
       isDisplay:false,
-      tableDataValue: {},
+      tableDataValue: {kpiId:''},
       tableDataValueHead: {},
       resType:'',
       options: {
@@ -213,12 +217,27 @@ export default {
       }
       return detailMenuBox;
     },
+    //设置
     kpiIdStyle(){
+      this.$set(this.tableDataValue,'kpiId',this.optionsSetup.kpiId)
+      this.tableDataValue.kpiId=this.optionsSetup.kpiId;
+      console.log("111",this.tableDataValue)
       let obj={
         kpiId:this.optionsSetup.kpiId,
         targetId:this.optionsSetup.targetId
       }
       return obj;
+    },
+    //获取url地址中的token
+    getUrlToken(){
+      let locationUrl=this.$route.query;
+      let resId=locationUrl.resId;
+      let token=locationUrl.access_token;
+      let urlObj={
+        resId:resId,
+        token:token
+      }
+      return urlObj;
     }
   },
   watch: {
@@ -341,7 +360,7 @@ export default {
     staticDataFn(val) {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
-      const num = val[0]['num'];
+      const num = val[0]['value'];
       const data = [
         {
           value: num
@@ -356,6 +375,8 @@ export default {
       }
       series[0].data = data
       series[0].detail = detail
+      console.log("val",val)
+      this.setTrend(val[0])
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
@@ -371,6 +392,7 @@ export default {
     getEchartData(val) {
       const data = this.queryEchartsData(val);
       data.then(res => {
+        this.setTrend(res.map)
         this.renderingFn(res);
       });
     },
@@ -392,6 +414,17 @@ export default {
       series[0].data = data
       series[0].detail = detail
     },
+
+   //设置性能趋势图
+   setTrend(data){
+     let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+'&flag='+data.flag+'&warning='+data.isWarning
+       +'&ident='+data.ident
+       +'&trend='+data.trend
+       +'&name='+data.name;
+     let baseUrl=getTrendBaseUrl();
+     this.resType=data.resType;
+     this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token;
+   },
     handleScroll(e){
       let serviceTop = 44;