perf:model 页面url图表默认显示调整

nezha-fronted/src/components/charts/chart-alert-list.vue

@@ -1042,64 +1042,7 @@ export default {
         },
         // 设置数据, filter区分
         setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
-          if(errorMsg && errorMsg!==''){
-            this.isError = true;
-            this.errorContent = errorMsg;
-          }else {
-            this.isError = false;
-            this.errorContent = '';
-          }
-            if(area==='showFullScreen'){//全屏按时间查询
-              this.data = chartItem;
-              this.unit = chartDataFormat.getUnit(this.data.unit);
-              this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-              this.searchTime[1] = filter.end_time;
-              // this.seriesItemScreen = seriesItem;
-              this.storedScreanTableData=seriesItem;
-              this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
-              this.screenPageObj.total=this.storedScreanTableData.length;
-              this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj);
-              this.endLoading('screen');
-            }else{
-              //设置高度 chart-table
-              this.$nextTick(() => {
-                const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
-                let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
-                if(height<this.minHeight){
-                  height = this.minHeight;
-                }
-                chartBox.style.height = `${height-this.chartSpaceHeight}px`;
-                const tableBox = document.getElementById('tableContainer'+this.chartIndex);
-                tableBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.pageHeight}px`;// -75-32
-              });
-              this.divFirstShow = true;
 
-              this.firstShow = true; // 展示操作按键
-
-              this.panelIdInner = panelId;
-              this.data = chartItem;
-              this.unit = chartDataFormat.getUnit(this.data.unit);
-              // this.seriesItem = seriesItem;
-              // this.seriesItemScreen = seriesItem;
-              this.storedTableData =seriesItem;
-              this.storedScreanTableData=seriesItem;
-              this.storedTableData=Object.assign([],this.storedTableData.reverse());
-              this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
-              this.pageObj.total=this.storedTableData.length;
-              this.screenPageObj.total=this.storedScreanTableData.length;
-              this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj);
-              this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj)
-              if (filter) { // 保存数据,用于同步时间
-                this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-                this.searchTime[1] = filter.end_time;
-                this.oldSearchTime[0] = this.searchTime[0];
-                this.oldSearchTime[1] = this.searchTime[1];
-              }
-
-              this.endLoading();
-              //this.showTable = true;
-              //this.tableLoading = false;
-            }
         },
 
     },

nezha-fronted/src/components/charts/chart-list.vue

@@ -1367,10 +1367,11 @@ export default {
         duplicateChart.next = duplicateChartBack.next;
         duplicateChart.title = duplicateChartBack.title;
         duplicateChart.elements = duplicateChartBack.elements;
+        duplicateChart.param = JSON.parse(duplicateChartBack.param);
         if(chartNext){
           chartNext.prev = duplicateChartId;
         }
-
+        console.log(duplicateChart)
         this.dataList.splice(chartNextIndex,0,duplicateChart);
 
         let indexInTotal = this.dataTotalList.indexOf(chart);
@@ -1393,9 +1394,14 @@ export default {
 
         this.currentRecordNum = this.currentRecordNum+1;
         let chartData = this.chartDataCacheGroup.get(chart.id);
-        console.log("__chartItem00__",JSON.stringify(chartData))
+        // console.log("__chartItem00__",JSON.stringify(chartData))
-
+        let duplicateChartData ={};
-        let duplicateChartData = JSON.parse(JSON.stringify(chartData));
+        try{
+          duplicateChartData = JSON.parse(JSON.stringify(chartData));
+        }catch (e) {
+          console.warn(e);
+        }
+        console.log(chartData)
         /*
         let chartData2 = {
           chartItem:chartItem,

nezha-fronted/src/components/charts/chart-url.scss

@@ -134,7 +134,7 @@
       cursor: pointer;
       padding: 5px 15px;
       border-right: 1px solid #ccc;
-      
+
     }
     .set-icon:hover{
       background: $btn-light-background-color-hover;
@@ -193,4 +193,15 @@
     border-top: 1px solid #dfe7f2;
     margin-top:-25px;
   }
+  .center-content{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100px;
+    margin: auto;
+    text-align: center;
+  }
 }

nezha-fronted/src/components/charts/chart-url.vue

@@ -7,7 +7,7 @@
   }
 </style>
 <template>
-    <div class="chart-url"  :id="'chartUrlDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+    <div class="chart-url"  :id="'chartUrlDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
         <loading  :ref="'localLoading'+chartIndex"></loading>
 
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
@@ -34,19 +34,24 @@
 
         </div>
         <div :id="'chartUrl'+chartIndex" class="mt-10 url-container"  v-show="firstShow" >
-            <iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
+            <iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto v-if="!showStatic"
                     style="z-index:5000;padding-bottom:6px;"
             ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
         </div>
+      <div style="position: relative;width: 100%;height: 100%;" v-if="showStatic">
+        <div  :id="'staticContainer'+chartIndex" class="center-content"></div>
+      </div>
         <!--全屏-->
           <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%" @opened="initDialog"  @close="screenModal = false" >
             <div slot="title">
               <span class="nz-dialog-title">{{data.title}}</span>
             </div>
-            <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto
+            <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
                     style="z-index:5000;padding-bottom:6px;"
             ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
-
+            <div style="position: relative;width: 100%;height: 100%;" v-if="showStatic">
+              <div  :id="'staticContainerFull'+chartIndex" class="center-content"></div>
+            </div>
             <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
       <span class="vue-resizable-handle" @mousedown="dragResize"></span>
@@ -97,6 +102,7 @@ export default {
             titleHeight:38,//title-height:28,magrin-bottom:10
             paddingBottom:6,
             divFirstShow:false,
+            showStatic:false,
         };
     },
     created() {
@@ -105,6 +111,7 @@ export default {
     watch: {},
     methods: {
       showLoad(chartItem) {
+        console.log(chartItem)
         this.data = chartItem;
         this.panelIdInner = this.panelId;
         //设置高度
@@ -119,14 +126,29 @@ export default {
           urlBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.paddingBottom}px`;// -75-32
         });
         this.startLoading();
-        this.setLoadFrame();
+
+        if(/\{\{.*?\}\}/g.test(this.data.param.url)){
+          this.showStatic=true;
+          this.setStaticContent();
+        }else{
+          this.showStatic=false;
+          this.setLoadFrame();
+        }
         this.divFirstShow = true;
       },
+      setStaticContent:function(){
+        let that = this;
+        this.$nextTick(() => {
+          let staticDiv = document.querySelector('#staticContainer'+this.chartIndex);
+          staticDiv.innerHTML=`<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
+          that.firstShow = true;
+          that.endLoading();
+        });
+      },
       setLoadFrame(){
         let that = this;
         this.$nextTick(() => {
           let iframe = document.querySelector('#urlContainer'+this.chartIndex);
-
           // 处理兼容行问题
           if (iframe.attachEvent) {
             iframe.attachEvent('onload', function () {
@@ -143,14 +165,21 @@ export default {
               that.endLoading();
             }
           }
-
+          console.log(that.data)
           iframe.src = that.data.param.url;
+          console.log(iframe)
         });
       },
       initDialog(){
         this.startLoading('screen');
+        if(/\{\{.*?\}\}/g.test(this.data.param.url)){
+          this.showStatic=true;
+          this.setStaticContentFull();
+        }else{
+          this.showStatic=false;
+          this.setLoadFrameFull();
+        }
 
-        this.setLoadFrameFull();
       },
       dragResize:function(e){
         var diffWidth =20; //界面的宽度空白的地方的宽度
@@ -389,6 +418,15 @@ export default {
           iframe.src = this.data.param.url;
         });
       },
+      setStaticContentFull:function(){
+        let that = this;
+        this.$nextTick(() => {
+          let staticDiv = document.querySelector('#staticContainerFull'+this.chartIndex);
+          staticDiv.innerHTML=`<span>${that.data.param.url}</span><span>${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</span>`
+          that.firstShow = true;
+          that.endLoading('screen');
+        });
+      },
     },
     mounted() {
         this.firstLoad = false;
@@ -398,3 +436,13 @@ export default {
     },
 };
 </script>
+<style>
+  .center-content .content-static-url{
+    font-weight: bold;
+    font-size: 24px;
+  }
+  .center-content .content-static-tip{
+    font-size: 18px;
+    color: lightgrey;
+  }
+</style>

nezha-fronted/src/components/common/language/cn.js

@@ -131,7 +131,8 @@ const cn = {
             label: "面积图"
           },
           url: {
-            label: "URL"
+            label: "URL",
+            staticTip:'双大括号中的内容将会在asset页面被替换',
           },
           singleStat:{
             label:"SingleStat"

nezha-fronted/src/components/common/language/en.js

@@ -142,7 +142,8 @@ const en = {
             label:"Stack Area"
           },
           url:{
-            label:"URL"
+            label:"URL",
+            staticTip:'The content in the double curly braces will be replaced on the Asset page',
           },
           singleStat:{
             label:"SingleStat"

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -949,6 +949,8 @@
         }else{
           if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){
             this.chart.param.threshold=data.param.threshold;
+          }else{
+            this.chart.param.threshold='';
           }
           this.setIsOtherChart();
           //this.getSuggestMetric();//获得指标列表
@@ -982,6 +984,8 @@
         this.chart.span = 12;
         this.chart.height = 400+'';
         this.chart.unit=2;
+        this.chart.param.url='';
+        this.chart.param.threshold='';
         this.elements = [1];
         this.elementTarget = [];
         bus.chartAddInfo.metricTarget = [];