feat：全屏图表添加手动刷新按钮

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

@@ -52,6 +52,7 @@
             ref="alertListTable"
             :form="'chartList'"
             :fromPath="'/alertList'"
+            :showTopBtn="false"
           ></alertMessageTable>
           <Pagination :pageObj="pageObj" @pageNo='pageNo'  @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
         </div>
@@ -61,6 +62,7 @@
             <span class="nz-dialog-title">{{data.title}}</span>
             <div class="float-right panel-calendar dialog-tool">
             </div>
+            <span class="float-right  dialog-tool" @click="screenRefreshChart"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
           </div>
           <alertMessageTable
             :tableData="storedScreanTableData"
@@ -71,6 +73,7 @@
             @tableDataSort="tableDataSort"
             @deleteMessage="deleteMessage"
             ref="alertListScreenTable"
+            :showTopBtn="false"
           ></alertMessageTable>
           <Pagination :pageObj="screenPageObj"  @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
@@ -550,30 +553,37 @@ export default {
           if (response.code == 200) {
             this.storedTableData = response.data.list;
             this.storedScreanTableData=response.data.list;
-            this.storedTableData.forEach((item) => {
+            let axiosAll=[]
-              item.labels = JSON.parse(item.labels);
+            this.$nextTick(() => {
-              let paramStr = JSON.stringify(this.promQueryParamConvert(item));
+             this.storedTableData.forEach((item) => {
-              if(paramStr&& paramStr !='""'){
+               item.labels = JSON.parse(item.labels);
-                this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
+               if(item.alertRule.buildIn != 1){
-                  let current = [];
+                 let paramStr = JSON.stringify(this.promQueryParamConvert(item));
-                  if (response2.data && response2.data.result && response2.data.result.length > 0) {
+                 axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")))
-                    current = response2.data.result[0].value.map((item, i) => {
+               }else{
-                      if (i == 0) {
+                 axiosAll.push('')
-                        return bus.computeTimezone(item);
+               }
-                      } else {
+             });
-                        return parseFloat(item).toFixed(2);
+             axios.all(axiosAll).then(res=>{
-                      }
+               res.forEach((item,index)=>{
-                    });
+                 let current = [];
-                  }
+                 let response2 = item.data;
-                  this.requestIndex+=1;
+                 if (response2.data && response2.data.result && response2.data.result.length > 0) {
-                  item.current=current;
+                   current = response2.data.result[0].value.map((item, i) => {
-                    if(this.requestIndex===this.storedTableData.length){
+                     if (i == 0) {
-                    this.$set(item, "current", current);
+                       return bus.computeTimezone(item);
-                    this.requestIndex=0;
+                     } else {
-                  }
+                       return parseFloat(item).toFixed(2);
-                });
+                     }
-              }
+                   });
-            });
+                 }else{
+                   current=[null,null]
+                 }
+                 this.storedTableData[index].current=current;
+               });
+               this.$set( this.storedTableData,[...this.storedTableData]);
+             })
+           });
             this.pageObj.total = response.data.total;
             this.isError = false;
             this.errorContent = '';
@@ -588,6 +598,100 @@ export default {
           }
         });
       },
+      getAlerScreetList: function (filterType,isPreview=false,chartInfo) {
+        this.resize();
+        this.loadingTable=true;
+        this.isPreview = isPreview;
+        let queryParam={
+          pageSize:this.screenPageObj.pageSize,
+          pageNo:this.screenPageObj.pageNo,
+        }
+        let chart;
+        if(chartInfo){
+          chart=Object.assign({},chartInfo)
+        }else{
+          chart=Object.assign({},this.chartInfo)
+        }
+        if(chart && chart.param){ //按照粒度，project>module>endpoint  查询只传最细粒度
+          let param=chart.param;
+          if(param.endpointId&&param.endpointId != ''){
+            queryParam.endpointId=param.endpointId;
+          }else{
+            if(param.moduleId&&param.moduleId!=''){
+              queryParam.moduleId=param.moduleId;
+            }else{
+              if(param.projectId&&param.projectId!=''){
+                queryParam.projectId=param.projectId;
+              }
+            }
+          }
+
+          if(param.ruleId&&param.ruleId!=''){
+            queryParam.ruleId=param.ruleId;
+          }
+          if(param.severity&&param.severity!=''){
+            queryParam.severity=param.severity;
+          }
+          if(param.state&&param.state!=''){
+            queryParam.state=param.state;
+          }
+        }
+        if(this.searchLabel.orderBy){
+          queryParam.orderBy=this.searchLabel.orderBy;
+        }
+        this.startLoading(filterType);
+        this.$get('/alert/message', queryParam).then(response => {
+          if (response.code == 200) {
+            this.storedTableData = response.data.list;
+            this.storedScreanTableData=response.data.list;
+            let axiosAll=[]
+            this.$nextTick(() => {
+             this.storedScreanTableData.forEach((item) => {
+               item.labels = JSON.parse(item.labels);
+               if(item.alertRule.buildIn != 1){
+                 let paramStr = JSON.stringify(this.promQueryParamConvert(item));
+                 axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")))
+               }else{
+                 axiosAll.push('')
+               }
+             });
+             axios.all(axiosAll).then(res=>{
+               res.forEach((item,index)=>{
+                 let current = [];
+                 let response2 = item.data;
+                 if (response2.data && response2.data.result && response2.data.result.length > 0) {
+                   current = response2.data.result[0].value.map((item, i) => {
+                     if (i == 0) {
+                       return bus.computeTimezone(item);
+                     } else {
+                       return parseFloat(item).toFixed(2);
+                     }
+                   });
+                 }else{
+                   current=[null,null]
+                 }
+                 this.storedScreanTableData[index].current=current;
+               })
+               this.$set(this.storedScreanTableData,[...this.storedScreanTableData])
+             })
+           })
+            this.screenPageObj.total = response.data.total;
+            this.isError = false;
+            this.errorContent = '';
+            this.divFirstShow = true;
+
+            this.firstShow = true; // 展示操作按键
+            this.loadingTable=false;
+            this.endLoading(filterType);
+          }else{
+            this.isError = true;
+            this.errorContent = response.msg;
+          }
+        });
+      },
+      screenRefreshChart(){
+        this.getAlerScreetList();
+      },
       promQueryParamConvert(obj) {
         if(obj){
           return "(" + obj.alertRule.expr + ") and (" + function(){
@@ -649,11 +753,11 @@ export default {
 
         screenPageNo(val) {
           this.screenPageObj.pageNo = val;
-          this.getAlertList();
+          this.getAlerScreetList();
         },
         screenPageSize(val) {
           this.screenPageObj.pageSize = val;
-          this.getAlertList();
+          this.getAlerScreetList();
         },
         startLoading(area){
           if(area==='showFullScreen'){
@@ -764,6 +868,7 @@ export default {
             this.screenModal = true;
             this.deleteBox.ids=[];
             this.$refs.alertListTable.$refs.alertListTable.clearSelection();
+            this.screenPageObj={...this.pageObj}
         },
         // 设置数据, filter区分
         setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {

nezha-fronted/src/components/charts/chart-single-stat.vue

@@ -55,6 +55,7 @@
             <div class="float-right panel-calendar dialog-tool">
               <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
             </div>
+            <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
           </div>
           <div class="single-stat-screen-container"  >
             <div id="chartScreenContainer"  ref="chartScreenContainer" class="single-stat-content" >
@@ -319,6 +320,9 @@ export default {
         this.startLoading();
         this.divFirstShow = true;
       },
+      screenRefreshChart(){
+        this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
+      },
       // 重新请求数据 刷新操作-local
       refreshChart() {
         this.dropdownMenuShow=false;

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

@@ -81,6 +81,7 @@
               <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"
                            @change="dateChange"></time-picker>
             </div>
+            <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
           </div>
           <el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
                     tooltip-effect="light" v-scrollBar:el-table @sort-change="tableDataSortScreen">
@@ -297,6 +298,9 @@
         this.startLoading();
         this.divFirstShow = true;
       },
+      screenRefreshChart(){
+        this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
+      },
       // 重新请求数据 刷新操作-local
       refreshChart() {
         this.dropdownMenuShow = false;

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

@@ -41,6 +41,7 @@
         <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">{{chartData.title}}</span>
+            <!--<span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
           </div>
           <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
                   style="z-index:5000;padding-bottom:6px;"
@@ -197,6 +198,9 @@ export default {
     clearChart(){
       this.data = {};
     },
+    screenRefreshChart(){
+     ('urlContainerFull'+this.chartIndex).window.location.reload()
+    },
     // 重新请求数据 刷新操作-local
     refreshChart() {
         this.dropdownMenuShow=false;

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -132,7 +132,9 @@
             <div class="float-right panel-calendar dialog-tool">
 
               <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"  @change="dateChange"></time-picker>
+              <!--<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime"></pick-time>-->
             </div>
+            <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
           </div>
           <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
           <div class="chart-no-data" v-show="noData">No Data</div>
@@ -1148,6 +1150,9 @@
         this.firstShow = false;
         this.$emit('on-refresh-data', id);
       },
+      screenRefreshChart(){
+        this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
+      },
       initDialog(){
         //此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
         this.initChart(this.data, this.seriesItem, this.$refs.screenShowArea, 'screen',this.legend);

nezha-fronted/src/components/common/alert/alertMessageTable.vue

@@ -162,7 +162,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+    <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow &&showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
     <!--<弹窗>-->
     <!--导出-->
     <div class="export-xlsx">
@@ -238,6 +238,10 @@
       tableHeight:{},
       tableId:{},
       projectAlertId:{},
+      showTopBtn:{
+        type:Boolean,
+        default:true,
+      },
     },
     data() {
       vm = this;

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue

@@ -33,6 +33,7 @@
       @tableDataSort="tableDataSort"
       @deleteMessage="deleteMessage"
       @select-change="(selection)=>{this.batchDeleteObjs=selection}"
+      :showTopBtn="false"
     ></alertMessageTable>
     <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
     <!--导出-->
@@ -552,7 +553,7 @@
                     }
                     this.tableData[index].current=current;
                   })
-                  this.tableData=[...this.tableData];
+                  this.$set(this.tableData,[...this.tableData])
                 })
               });
               this.pageObj.total = response.data.total;

nezha-fronted/src/components/common/timePicker.vue

@@ -259,13 +259,19 @@ export default {
         this.$set(this.searchTime, 0, timeGroup[0]);
         this.$set(this.searchTime, 1, timeGroup[1]);
 
-        this.$set(this.showTime, 'id', 0);
+        this.nowTimeType={
-        this.$set(this.showTime, 'text', this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1]);
+          id:4,
+          text:this.$t("dashboard.panel.lastOneHour"),
+          type:'hour',
+          value:1,
+        };
+        this.$set(this.showTime, 'id',  this.nowTimeType.id);
+        this.$set(this.showTime, 'text',  this.nowTimeType.text);
       }
     },
     //left(){},
     //right(){},
-    timeChange(val) {
+    timeChange(val,from) {
       this.nowTimeType=val;
       this.$set(this.showTime, 'id', val.id);
       this.$set(this.showTime, 'text', val.text);
@@ -286,8 +292,13 @@ export default {
 
         let id = val.id;
         if(id===0){//custom
-          this.isCustom = true;
+         if(from==='chart'){
-          this.$refs.calendar.focus();
+           this.isCustom = false;
+           this.$emit('change', this.searchTime);
+         } else{
+           this.isCustom = true;
+           this.$refs.calendar.focus();
+         }
         }else {
           this.isCustom = false;
           if(this.showEmpty&& id === 12){

nezha-fronted/src/components/page/alert/list.vue

@@ -392,7 +392,7 @@
                   }
                   this.tableData[index].current=current;
                 })
-                this.tableData=[...this.tableData];
+                this.$set(this.tableData,[...this.tableData])
               })
             });
             this.deleteBox.ids='';