feat:panel-chartBox-preview 添加alertList图表类型

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

@@ -7,7 +7,7 @@
   }
 </style>
 <template>
-    <div class="chart-table"  :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+    <div class="chart-table"  :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false" :style="{'border':isPreview?'unset':'1px solid #d8dce1','height':isPreview?'92%':'100%'}">
         <loading  :ref="'localLoading'+chartIndex"></loading>
       <!--
         <div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
@@ -30,7 +30,7 @@
                 <span class="panel-info-corner-inner"></span>
             </span>
           </el-popover>
-          <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+          <el-dropdown trigger="click" v-show="!isPreview&&firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{data.title}}</span>
@@ -51,9 +51,9 @@
           </el-dropdown>
 
         </div>
-        <div class="mt-10 table-container" v-cloak  v-show="firstShow">
+        <div class="mt-10 table-container" v-cloak  v-show="firstShow || isPreview">
           <transition name="el-zoom-in-bottom">
-            <div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0" style="top:10px">
+            <div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0" :style="{'top':isPreview?'-30px':'10px'}">
               <i style="cursor: pointer" class="el-icon-delete"></i>
             </div>
           </transition>
@@ -268,6 +268,7 @@
                  :title="$t('overall.detail')"
                  :visible.sync="graphShow"
                  width="90%"
+                 :append-to-body="true"
                  id="viewGraphDialog"
                  @close="dialogClose">
         <div slot="title">
@@ -278,7 +279,7 @@
         </div>
         <chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
       </el-dialog>
-      <span class="vue-resizable-handle" @mousedown="dragResize"></span>
+      <span class="vue-resizable-handle" @mousedown="dragResize" v-if="!isPreview"></span>
       <element-set
         path="/alertList"
         :table-title="tableTitle"
@@ -457,6 +458,7 @@ export default {
           chartDatas: [],
           chartUnit:5,
           deleteBox: {show: false, ids: "", remark: '', state: 2},
+          isPreview:false,
         };
     },
     created() {
@@ -633,7 +635,8 @@ export default {
           })
         }
       },
-        getAlertList: function (filterType) {
+        getAlertList: function (filterType,isPreview=false) {
+          this.isPreview = isPreview;
           let queryParam={
             pageSize:this.pageObj.pageSize,
             pageNo:this.pageObj.pageNo,

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

@@ -1372,6 +1372,7 @@ export default {
           chartNext.prev = duplicateChartId;
         }
         console.log(duplicateChart)
+
         this.dataList.splice(chartNextIndex,0,duplicateChart);
 
         let indexInTotal = this.dataTotalList.indexOf(chart);

nezha-fronted/src/components/charts/chartPreview.vue

@@ -128,6 +128,10 @@
         </div>
       </template>
 
+      <template v-if="chart.type === 'alertList'">
+        <chart-alert-list ref="alertListChart"></chart-alert-list>
+      </template>
+
       <loading  ref="loadingPreview"></loading>
     </el-dialog>
 </template>
@@ -139,12 +143,14 @@
   import chartDataFormat from './chartDataFormat'
   import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
   import timePicker from '../common/timePicker'
+  import chartAlertList from './chart-alert-list'
 
   export default {
     name: 'chartPreview',
     components: {
       'loading': loading,
-      'time-picker':timePicker
+      'time-picker':timePicker,
+      'chart-alert-list':chartAlertList,
     },
     props: {
       panelId:Number,
@@ -320,9 +326,17 @@
           this.dailogWidth = `${containerWidth*(size / 12)}px`;
         });
       },
+      getAlertListChartData:function(chartInfo,filterType){
+        this.$refs.alertListChart.getAlertList(filterType,true);
+        this.$refs.loadingPreview.endLoading();
+      },
       // 获取一个图表具体数据
       getChartData() {
         const chartItem = this.chart;
+        if(chartItem.type === 'alertList'){
+          this.getAlertListChartData(chartItem,null);
+          return;
+        }
         const len = chartItem.elements.length;
         // 没有数据的设置提示信息暂无数据-针对每一个图
         if (len === 0) {