Merge branch 'master-500-dev-lushangqing' into 'master-500-dev'

根据树结构的值以及接口的kpiId判断是否显示asm相关的水球，flag下拉，趋势图及预测图 See merge request !97

Merge branch 'master-500-dev-lushangqing' into 'master-500-dev'
根据树结构的值以及接口的kpiId判断是否显示asm相关的水球，flag下拉，趋势图及预测图 See merge request !97
王涛
Commit 6956fee5bd2cb027e9d04c916e086c8ac4dfe4db 2 parents 7108ba1d 9e5e0538
Showing 5 changed files with 95 additions and 112 deletions
report-ui/src/views/report/bigscreen/designer/widget/monitor/customBarLineChart.vue
report-ui/src/views/report/bigscreen/designer/widget/monitor/customLineTrend.vue
report-ui/src/views/report/bigscreen/designer/widget/monitor/customLiquidFillChart.vue
report-ui/src/views/report/bigscreen/designer/widget/monitor/selectOption.vue
report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape.vue
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/customBarLineChart.vue
View file @6956fee
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/customBarLineChart.vue
View file @6956fee
 <template>
-  <div :style="styleObj" v-if="isDisplay">
+  <div :style="styleObj" v-if="display">
     <v-chart v-if="hackReset" :options="options" autoresize/>
   </div>
 </template>
@@ -18,7 +18,7 @@ export default {
     return {
       hackReset:true,
       chartData:[],
-      isDisplay:true,
+      display:true,
       kpiUnit:'',
       options: {
         color: [],
@@ -134,7 +134,7 @@ export default {
       return {
         position: this.ispreview ? "absolute" : "static",
         width: this.optionsStyle.width + "px",
-        height: this.isDisplay?this.optionsStyle.height + "px":'0',
+        height: this.display?this.optionsStyle.height + "px":'0',
         left: this.optionsStyle.left + "px",
         top: this.optionsStyle.top + "px",
         background: this.optionsSetup.background
@@ -284,6 +284,23 @@ export default {
       this.setOptionsLegend();
       this.setOptionsColor();
       this.setOptionsToolbox();
+      this.setIsDisplay();
+    },
+    setIsDisplay(){
+      let propType=this.$route.query.propType;
+      if(propType=='res'){
+        let kpiId='';
+        if(this.optionsSetup.vuexFlagKpiId){
+          kpiId=this.optionsSetup.vuexFlagKpiId
+        }
+        if(kpiId=='KPI922F8FF7'){
+          this.display=this.$route.query.display=='true'?true:false;
+        }else{
+          this.display=true;
+        }
+      }else{
+        this.display=true;
+      }
     },
     // 标题修改
     setOptionsTitle() {
@@ -826,23 +843,6 @@ export default {
         })
       }
       this.options.series=series;
-      // let arr=[];
-      // this.options.series.map(item=>{
-      //   arr.push(item.data)
-      // })
-      // let min=this.calMin(arr);
-      // let max=this.calMax(arr);
-      // if(min<0){
-      //   this.options.yAxis[1].min=-20;
-      // }
-      // this.options.yAxis[0].max=max;
-      // this.options.yAxis[0].min=min;
-      // this.options.yAxis[0].interval=(max-min)/7
-     /* if(this.chartData.indexOf(this.optionsData.dynamicData.contextData.flag)!=-1){
-        this.isDisplay=true;
-      }else{
-        this.isDisplay=false;
-      }*/
     }
   }
 };
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLineTrend.vue
View file @6956fee
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLineTrend.vue
View file @6956fee
 <template>
-  <div :style="styleObj">
+  <div :style="styleObj"  v-if="display">
     <v-chart v-if="hackReset" :options="options" autoresize/>
   </div>
 </template>
@@ -17,6 +17,7 @@ export default {
   data() {
     return {
       hackReset:true,
+      display:true,
       options: {
         grid: {},
         /*legend: {
@@ -73,7 +74,7 @@ export default {
       return {
         position: this.ispreview ? "absolute" : "static",
         width: this.optionsStyle.width + "px",
-        height: this.optionsStyle.height + "px",
+        height: this.display?this.optionsStyle.height + "px":'0',
         left: this.optionsStyle.left + "px",
         top: this.optionsStyle.top + "px",
         background: this.optionsSetup.background
@@ -125,6 +126,23 @@ export default {
       this.setOptionsMargin();
       // this.setOptionsLegend();
       this.setOptionsData();
+      this.setIsDisplay();
+    },
+    setIsDisplay(){
+      let propType=this.$route.query.propType;
+      if(propType=='res'){
+        let kpiId='';
+        if(this.optionsData.dynamicData && this.optionsData.dynamicData.contextData){
+          kpiId=this.optionsData.dynamicData.contextData.kpiId
+        }
+        if(kpiId=='KPI922F8FF7'){
+          this.display=this.$route.query.display=='true'?true:false;
+        }else{
+          this.display=true;
+        }
+      }else{
+        this.display=true;
+      }
     },
     // 标题修改
     setOptionsTitle() {
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLiquidFillChart.vue
View file @6956fee
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLiquidFillChart.vue
View file @6956fee
 <template>
-  <div :style="styleObj">
+  <div :style="styleObj" v-if="display" class="fillchart">
     <div class="fillContainer-title" :style="titleStyle">
       {{ optionsSetup.titleName }}
 <!--      <span>(这里是结论建议及结论建议)</span>-->
@@ -33,7 +33,6 @@
 </template>
 <script>
-var per = 60;
 import {mapGetters} from "vuex";
 export default {
   name: "customLiquidFillChart",//百分比图参考：https://www.makeapie.com/editor.html?c=xFkzKG-bpl
@@ -45,85 +44,8 @@ export default {
   data() {
     return {
       visible:false,
-      // topStyle:'',//水波纹的大小
+      display:true,
       fillData:[],//数据
-      // topNum:0,//水波纹的大小
-      // nums:0,
-     /* options: {
-        title: {
-          text: '{nums|' + per + '}{percent|%}',
-          x: 'center',
-          y: 'center',
-          textStyle: {
-            rich: {
-              nums: {
-                fontSize: 60,
-                color: '#29EEF3',
-              },
-              percent: {
-                fontSize: 30,
-                color: '#29EEF3',
-              },
-            },
-          },
-        },
-        legend: {
-          type: 'plain',
-          orient: 'vertical',
-          right: 0,
-          top: '10%',
-          align: 'auto',
-          data: [{
-            name: '1',
-            icon: "circle"
-          }, {
-            name: '2',
-            icon: "circle"
-          }, {
-            name: '3',
-            icon: "circle"
-          }, {
-            name: '4',
-            icon: "circle"
-          }],
-          textStyle: {
-            color: 'white',
-            fontSize: 16,
-            padding: [10, 1, 10, 0],
-          },
-          selectedMode: false,
-        },
-        series: [
-          {
-            type: "liquidFill",
-            data: [0.47],
-            direction: "right", //波浪方向或者静止
-            radius: "80%",
-            // 水球颜色
-            color: ["#00c2ff"],
-            center: ["50%", "50%"], //水球位置
-            // outline  外边
-            outline: {
-              // show: false
-              borderDistance: 3, //内环padding值
-              itemStyle: {
-                borderWidth: 8, //圆边线宽度
-                borderColor: "#00c2ff",
-                shadowBlur: 10,
-                shadowColor: 'rgba(63, 218, 255, 0.5)'
-              }
-            },
-            backgroundStyle: {
-              // borderWidth: 5,
-              // borderColor: 'rgb(255,0,255,0.9)',
-              color: 'rgb(255,0,255,0.01)'
-            },
-            label: {
-              show: false
-            }
-          }
-        ],
-      },*/
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
@@ -148,7 +70,7 @@ export default {
       return {
         position: this.ispreview ? "absolute" : "static",
         width: this.optionsStyle.width + "px",
-        height: this.optionsStyle.height + "px",
+        height: this.display?this.optionsStyle.height + "px":'0',
         left: this.optionsStyle.left + "px",
         top: this.optionsStyle.top + "px",
         background: this.optionsSetup.background,
@@ -219,7 +141,7 @@ export default {
     titleStyle(){
       let optionsSetup=this.optionsSetup;
       return{
-        'display':optionsSetup.isTitle?'block':'none',
+        'display':this.display?(optionsSetup.isTitle?'block':'none'):this.display,
         'font-size':optionsSetup.titleFontSize+'px',
         color: optionsSetup.titleColor,
         'font-weight': optionsSetup.titleFontWeight,
@@ -286,7 +208,11 @@ export default {
      * 获取使用增长率名称
      */
     getIndex2Name(){
-      switch (this.optionsData.dynamicData.contextData.dataScope) {
+      let dataScope='';
+      if(this.optionsData.dynamicData && this.optionsData.dynamicData.contextData.dataScope){
+        dataScope=this.optionsData.dynamicData.contextData.dataScope;
+      }
+      switch (dataScope) {
         case 'month':
           return "月使用增长率"
         case 'quarter':
@@ -299,6 +225,23 @@ export default {
     },
     editorOptions() {
       this.setOptionsData();
+      this.setIsDisplay();
+    },
+    setIsDisplay(){
+      let propType=this.$route.query.propType;
+      if(propType=='res'){
+        let kpiId='';
+        if(this.optionsData.dynamicData && this.optionsData.dynamicData.contextData){
+          kpiId=this.optionsData.dynamicData.contextData.kpiId
+        }
+        if(kpiId=='KPI922F8FF7'){
+          this.display=this.$route.query.display=='true'?true:false;
+        }else{
+          this.display=true;
+        }
+      }else{
+        this.display=true;
+      }
     },
     // 数据解析
     setOptionsData() {
@@ -352,12 +295,10 @@ export default {
           }else{
             this.fillData=[res[0].object];
-
           }
         }else{
           this.fillData=[{num:0,name:'当前使用率'},{num:0,name:'当前增长率'}]
         }
-
       });
     },
   }
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/selectOption.vue
View file @6956fee
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/selectOption.vue
View file @6956fee
 <template>
-  <div class="select-option-container" :style="styleObj">
+  <div class="select-option-container" :style="styleObj" v-if="display">
     <div class="select-option-title" :style="titleStyle">
       <img :src="imgStyle.titleIcon" alt="" class="icon-title">
       {{elTreeBtnTitleName}}{{ transStyle.titleName }}
@@ -28,6 +28,7 @@ export default {
   data() {
     return {
       selectVal:'',
+      display:true,
       selectOption:[],
       options: {},
       optionsSetUp: {},
@@ -78,7 +79,7 @@ export default {
       return {
         position: this.ispreview ? "absolute" : "static",
         width: allStyle.width + "px",
-        height: allStyle.height + "px",
+        height: this.display?allStyle.height + "px":'0',
         left: allStyle.left + "px",
         top: allStyle.top + "px",
         'background':this.transStyle.bgColor,
@@ -120,6 +121,7 @@ export default {
         this.optionsData = val.data;
         this.optionsPosition = val.position;
         this.handlerData();
+        this.setIsDisplay();
       },
       deep: true
@@ -133,9 +135,26 @@ export default {
     this.optionsPosition = this.value.position;
     this.handlerData();
     // this.selectChange(null)
-
+    this.setIsDisplay();
   },
   methods: {
+  setIsDisplay(){
+    let propType=this.$route.query.propType;
+    if(propType=='res'){
+      let kpiId='';
+
+      if(this.optionsData.dynamicData && this.optionsData.dynamicData.contextData){
+        kpiId=this.optionsData.dynamicData.contextData.kpiId
+      }
+      if(kpiId=='KPI922F8FF7'){
+        this.display=this.$route.query.display=='true'?true:false;
+      }else{
+        this.display=true;
+      }
+    }else{
+      this.display=true;
+    }
+  },
     //选项是否加全部
     pushAll(){
       if(this.optionsSetUp.isAll){
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape.vue
View file @6956fee
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape.vue
View file @6956fee
@@ -249,8 +249,13 @@ export default {
         btnTitleName='&btnTitleName='+data.typeName;
         titleName='&titleName='+data.typeName;
       }
-
-      this.iframeSrc=srcName+tokenUrl+busId+resId+resType+btnTitleName+titleName;
+      let display='&propType='+data.propType;
+      if(data.propType=='res'){
+        display+='&display='+(data.display?data.display:false);
+      }else{
+        display+='&display=true';
+      }
+      this.iframeSrc=srcName+tokenUrl+busId+resId+resType+btnTitleName+titleName+display;
     },
     editorOptions() {
       this.setOptionsData();