NEZ-290 feat: panel-alertList样式调整、resize实现

nezha-fronted/src/assets/stylus/main.scss

@@ -726,7 +726,7 @@ li{
 .nz-table .el-table__virtual-wrapper {
   width: 100% !important;
 }
-.chart-table .nz-table td {
+.chart-table .nz-table td, .chart-alert-info .nz-table td {
   background-color: white;
 }
 .nz-table td {

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

@@ -1,22 +1,12 @@
 <style lang="scss">
-@import './chart.scss';
+  @import './chart.scss';
-</style>
-<style>
-  .max-width-90{
-    max-width: 90px;
-  }
 </style>
 <template>
-    <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%'}">
+  <div class="nz-chart-resize">
+    <div class="resize-shadow" ref="resizeShadow"></div>
+    <div class="resize-box resize-box-alert" ref="resizeBox">
+      <div class="chart-alert-info" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
         <loading :ref="'localLoading'+chartIndex"></loading>
-      <!--
-        <div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
-          <div class="el-loading-spinner">
-            <img width="42px" height="42px"  src="../../assets/img/loading.gif"/>
-            <p class="el-loading-text loading-font">loading</p>
-          </div>
-        </div>
-        -->
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
           <el-popover
             v-if="isError"
@@ -25,7 +15,7 @@
             trigger="hover"
             popper-class="chart-error-popper">
             <div >{{errorContent}}</div>
-            <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
+            <span slot="reference" class="panel-info-corner panel-info-corner--error">
               <i class="nz-icon nz-icon-warning fa"></i>
               <span class="panel-info-corner-inner"></span>
             </span>
@@ -49,7 +39,6 @@
                 <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
             </ul>
           </el-dropdown>
-
         </div>
         <div class="mt-10 table-container" v-cloak  v-show="firstShow || isPreview">
           <transition name="el-zoom-in-bottom">
@@ -60,9 +49,9 @@
           <el-table
             :id="'tableContainer'+chartIndex"
             class="nz-table"
-            :height="290"
             :data="storedTableData"
             border
+            :height="tableHeight"
             ref="alertListTable"
             tooltip-effect="light"
             v-scrollBar:el-table="'large'"
@@ -247,7 +236,6 @@
           </el-table>
           <Pagination :pageObj="screenPageObj"  @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-
         </el-dialog>
         <div class="export-xlsx">
           <el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-message">
@@ -279,7 +267,6 @@
           </div>
           <chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
         </el-dialog>
-      <span class="vue-resizable-handle" @mousedown="dragResize" v-if="!isPreview"></span>
         <element-set
           path="/alertList"
           :table-title="tableTitle"
@@ -288,6 +275,9 @@
           ref="elementset"
         ></element-set>
       </div>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview"></span>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -323,12 +313,11 @@ export default {
       type: Number,
       default: 0,
     },
-      chartInfo:{
+    chartInfo:{}
-
-      }
   },
   data() {
     return {
+      tableHeight: 0,
         data: {}, // 该图表信息,chartItem
         unit:{},
         isError:false,
@@ -461,8 +450,6 @@ export default {
         isPreview:false,
       };
   },
-    created() {
-    },
   computed: {
     tagType() {
       return (key) => {
@@ -498,6 +485,10 @@ export default {
       }
     },
     methods: {
+      startResize(e) {
+        let vm = this;
+        this.$chartResizeTool.start(vm, this.data, e);
+      },
         labelsClassName(row) {
           if (row.column.label == this.$t("alert.list.labels")) {
             return "alert-message-list-labels";
@@ -636,6 +627,7 @@ export default {
         }
       },
       getAlertList: function (filterType,isPreview=false) {
+        this.resize();
         this.isPreview = isPreview;
         let queryParam={
           pageSize:this.pageObj.pageSize,
@@ -944,31 +936,23 @@ export default {
             this.$refs['localLoading'+this.chartIndex].endLoading();
           }
         },
-        clearData(){
+      resize(chartItem) {
+        let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
+        let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
+        container.style.height = `calc(100% - ${deHeight}px)`;
+        this.tableHeight = `calc(100% - 34px)`;
+        this.$nextTick(() => {
+          container.querySelector(".el-table__body-wrapper")._ps_.update();
+        });
       },
       showLoad(chartItem) {
         //设置高度 chart-table
         this.$nextTick(() => {
-            const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
+          this.resize(chartItem);
-            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-75-32}px`;
-            tableBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.pageHeight}px`;// -75-32
         });
         this.startLoading();
         this.divFirstShow = true;
-          //this.tableLoading = true;
       },
-        // 展示图表编辑区
-      /*
-        showTool() {
-            this.toolbox = !this.toolbox;
-        },
-        */
       // 重新请求数据 刷新操作-local
       refreshChart() {
         this.dropdownMenuShow=false;
@@ -1045,7 +1029,7 @@ export default {
         },
         // 设置数据, filter区分
         setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
-
+          console.info(chartItem,title)
         },
 
     },

nezha-fronted/src/components/charts/chart-asset-info.vue

@@ -14,7 +14,7 @@
             placement="top-start"
             trigger="hover"
             popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
+            <div>{{errorContent}}</div>
             <span slot="reference" class="panel-info-corner panel-info-corner--error">
               <i class="nz-icon nz-icon-warning fa"></i>
               <span class="panel-info-corner-inner"></span>

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

@@ -110,6 +110,7 @@
         <chart-alert-list :ref="'editChart'+item.id"
                           :panel-id="filter.panelId"
                           :chart-index="index"
+                          v-if="item.type  === 'alertList'"
                           :editChartId="'editChartId' + item.id"
                           :chart-info="item"
                           @on-refresh-data="refreshChart"

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

@@ -173,7 +173,7 @@
   .pagination {
     padding-top: 0;
   }
-  .chart-table {
+  .chart-table, .chart-alert-info {
     width: 100%;
     .table-container {
       padding: 0 6px;
@@ -268,6 +268,9 @@
               min-height: 26px;
               line-height: 26px;
             }
+            .el-table__body {
+              background-color: white;
+            }
             .el-table__body tr:last-of-type td {
               border: none;
             }
@@ -287,7 +290,7 @@
       }
     }
   }
-  .line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info {
+  .line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info, .chart-alert-info {
     height: 100%;
     position: relative;
     background-color: white;

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

@@ -15,7 +15,7 @@
             trigger="hover"
             popper-class="chart-error-popper">
             <div >{{errorContent}}</div>
-            <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
+            <span slot="reference" class="panel-info-corner panel-info-corner--error">
               <i class="nz-icon nz-icon-warning fa"></i>
               <span class="panel-info-corner-inner"></span>
            </span>

nezha-fronted/src/tools.js

@@ -466,12 +466,6 @@ export const chartResizeTool = {
         //step时chart重绘
         if (box.classList.contains("resize-box-echarts")) { //echarts类型
           vm.echartStore.resize({width: shadow.offsetWidth-16, height: shadow.offsetHeight-titleHeight-vm.$refs.legendArea.offsetHeight});
-        } else if (box.classList.contains("resize-box-table")) { //table类型
-          //刷新滚动条
-          let scrollbar = box.querySelector(".el-table__body-wrapper")._ps_;
-          if (scrollbar) {
-            scrollbar.update();
-          }
         }
         //chart外层宽高调整
         let outerBox = document.getElementById(`chart-${data.id}`);