From b4d38263e4986eb1471637d5398dc18c3fb08e5c Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 1 Jun 2020 20:47:36 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-290=20feat:=20panel-alertList=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4=E3=80=81resize=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |   2 +-
 .../components/charts/chart-alert-list.vue    | 880 +++++++++---------
 .../components/charts/chart-asset-info.vue    |   8 +-
 .../src/components/charts/chart-list.vue      |   1 +
 .../src/components/charts/chart.scss          |   7 +-
 .../components/charts/line-chart-block.vue    |   4 +-
 nezha-fronted/src/tools.js                    |   6 -
 7 files changed, 445 insertions(+), 463 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index caba2c148..b5f7f1de0 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/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 {
diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index 1c17c3470..e2030fcde 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -1,22 +1,12 @@
 <style lang="scss">
-@import './chart.scss';
-</style>
-<style>
-  .max-width-90{
-    max-width: 90px;
-  }
+  @import './chart.scss';
 </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%'}">
-        <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="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 class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
           <el-popover
             v-if="isError"
@@ -25,9 +15,9 @@
             trigger="hover"
             popper-class="chart-error-popper">
             <div >{{errorContent}}</div>
-            <span slot="reference" style="" 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 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>
           </el-popover>
           <el-dropdown trigger="click" v-show="!isPreview&&firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
@@ -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'"
@@ -147,147 +136,148 @@
           <Pagination :pageObj="pageObj" @pageNo='pageNo'  @pageSize='pageSize' ref="Pagination" :append-to-body="false"></Pagination>
         </div>
         <!--全屏-->
-          <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenDialogClose" >
-            <div slot="title">
-              <span class="nz-dialog-title">{{data.title}}</span>
-              <div class="float-right panel-calendar dialog-tool">
-              </div>
+        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenDialogClose" >
+          <div slot="title">
+            <span class="nz-dialog-title">{{data.title}}</span>
+            <div class="float-right panel-calendar dialog-tool">
             </div>
-            <transition name="el-zoom-in-bottom">
-              <div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0">
-                <i style="cursor: pointer" class="el-icon-delete"></i>
-              </div>
-            </transition>
-            <el-table
-              :id="'tableContainer'+chartIndex"
-              class="nz-table"
-              :data="storedScreanTableData"
-              border
-              height="95%"
-              ref="alertListScreenTable"
-              tooltip-effect="light"
-              v-scrollBar:el-table="'large'"
-              :cell-class-name="labelsClassName"
-              @selection-change="selectChange"
-              style="width: 100%;">
-              <el-table-column
-                :resizable="false"
-                type="selection"
-                width="38"
-                align="center"
-              ></el-table-column>
-              <el-table-column
-                :resizable="false"
-                v-for="(item, index) in tablelable"
-                v-if="item.show"
-                :width="item.width"
-                :key="`col-${index}`"
-                :label="item.label"
-                :show-overflow-tooltip="item.prop != 'labels'"
-                min-width="110px"
-              >
-                <template slot-scope="scope" :column="item">
-                  <template v-if="item.prop == 'alertRule'">
-                    <div class="too-long-split"
-                         @click="" :id="'view-rule-'+scope.row[item.prop].id"
-                         v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>
-                    <template v-else>-</template>
-                  </template>
-                  <template v-else-if="item.prop == 'summary'">
-                    <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-                    <template v-else>-</template>
-                  </template>
-                  <template v-else-if="item.prop == 'description'">
-                    <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-                    <span v-else>-</span>
-                  </template>
-                  <span v-else-if="item.prop == 'severity'">
-                <span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
-                <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
-                <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
-              </span>
-                  <template v-else-if="item.prop == 'labels'">
-                    <nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;"
-                                  :cursor-point="tagType(key) == 'info' ? false : true"
-                                  :key="key"
-                                  v-if="key != 'alertname' && key != 'severity'"
-                                  v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
-                  </template>
-                  <div v-else-if="item.prop == 'state'">
-                <span class="">
-                  {{scope.row['state'] == 1 ? "Pending" : ""}}
-                  {{scope.row['state'] == 2 ? "Expired" : ""}}
-                </span>
-                  </div>
-                  <div v-else-if="item.prop == 'current'" class="too-long-split" >
-                    <span v-if="!scope.row.current">-</span>
-                    <el-popover v-else placement="right" trigger="hover">
-                      <span slot="reference">{{scope.row.current[1]}}</span>
-                      <div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
-                    </el-popover>
-                  </div>
-                  <div v-else-if="item.prop == 'option'" class="content-right-options">
-                    <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
-                    <span :title="$t('overall.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" :id="'alert-list-delete-'+scope.row.id"><i  class="el-icon-delete"></i></span>
-                  </div>
-                  <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+          </div>
+          <transition name="el-zoom-in-bottom">
+            <div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0">
+              <i style="cursor: pointer" class="el-icon-delete"></i>
+            </div>
+          </transition>
+          <el-table
+            :id="'tableContainer'+chartIndex"
+            class="nz-table"
+            :data="storedScreanTableData"
+            border
+            height="95%"
+            ref="alertListScreenTable"
+            tooltip-effect="light"
+            v-scrollBar:el-table="'large'"
+            :cell-class-name="labelsClassName"
+            @selection-change="selectChange"
+            style="width: 100%;">
+            <el-table-column
+              :resizable="false"
+              type="selection"
+              width="38"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              :resizable="false"
+              v-for="(item, index) in tablelable"
+              v-if="item.show"
+              :width="item.width"
+              :key="`col-${index}`"
+              :label="item.label"
+              :show-overflow-tooltip="item.prop != 'labels'"
+              min-width="110px"
+            >
+              <template slot-scope="scope" :column="item">
+                <template v-if="item.prop == 'alertRule'">
+                  <div class="too-long-split"
+                       @click="" :id="'view-rule-'+scope.row[item.prop].id"
+                       v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>
                   <template v-else>-</template>
                 </template>
-              </el-table-column>
-              <el-table-column width="28" :resizable="false">
-                <template slot="header" slot-scope="scope">
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-                <i class="nz-icon nz-icon-gear"></i>
+                <template v-else-if="item.prop == 'summary'">
+                  <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+                  <template v-else>-</template>
+                </template>
+                <template v-else-if="item.prop == 'description'">
+                  <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+                  <span v-else>-</span>
+                </template>
+                <span v-else-if="item.prop == 'severity'">
+              <span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
+              <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
+              <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
+            </span>
+                <template v-else-if="item.prop == 'labels'">
+                  <nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;"
+                                :cursor-point="tagType(key) == 'info' ? false : true"
+                                :key="key"
+                                v-if="key != 'alertname' && key != 'severity'"
+                                v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
+                </template>
+                <div v-else-if="item.prop == 'state'">
+              <span class="">
+                {{scope.row['state'] == 1 ? "Pending" : ""}}
+                {{scope.row['state'] == 2 ? "Expired" : ""}}
               </span>
-                </template>
-                <template v-slot="scope">
-                  <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
-                </template>
-              </el-table-column>
-            </el-table>
-            <Pagination :pageObj="screenPageObj"  @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
-            <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-
+                </div>
+                <div v-else-if="item.prop == 'current'" class="too-long-split" >
+                  <span v-if="!scope.row.current">-</span>
+                  <el-popover v-else placement="right" trigger="hover">
+                    <span slot="reference">{{scope.row.current[1]}}</span>
+                    <div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
+                  </el-popover>
+                </div>
+                <div v-else-if="item.prop == 'option'" class="content-right-options">
+                  <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
+                  <span :title="$t('overall.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" :id="'alert-list-delete-'+scope.row.id"><i  class="el-icon-delete"></i></span>
+                </div>
+                <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+                <template v-else>-</template>
+              </template>
+            </el-table-column>
+            <el-table-column width="28" :resizable="false">
+              <template slot="header" slot-scope="scope">
+            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+              <i class="nz-icon nz-icon-gear"></i>
+            </span>
+              </template>
+              <template v-slot="scope">
+                <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+              </template>
+            </el-table-column>
+          </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">
-          <div class="upload-body">
-            <el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input>
-            <div style="text-align: right; margin-top: 10px;">
-              <button @click="closeDialog" class="el-button el-button--default el-button--small">
-                <span>{{$t('tip.no')}}</span>
-              </button>
-              <button @click="deleteMessage" class="el-button el-button--default el-button--small el-button--primary">
-                <span>{{$t('tip.yes')}}</span>
-              </button>
+        <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">
+            <div class="upload-body">
+              <el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input>
+              <div style="text-align: right; margin-top: 10px;">
+                <button @click="closeDialog" class="el-button el-button--default el-button--small">
+                  <span>{{$t('tip.no')}}</span>
+                </button>
+                <button @click="deleteMessage" class="el-button el-button--default el-button--small el-button--primary">
+                  <span>{{$t('tip.yes')}}</span>
+                </button>
+              </div>
+            </div>
+          </el-dialog>
+        </div>
+        <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
+                   :title="$t('overall.detail')"
+                   :visible.sync="graphShow"
+                   width="90%"
+                   :append-to-body="true"
+                   id="viewGraphDialog"
+                   @close="dialogClose">
+          <div slot="title">
+            {{$t("project.endpoint.dialogTitle")}}
+            <div class="float-right panel-calendar dialog-tool" style="display: flex">
+              <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
             </div>
           </div>
+          <chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
         </el-dialog>
+        <element-set
+          path="/alertList"
+          :table-title="tableTitle"
+          :dropCol="dropCol"
+          @tablelable="tablelabelEmit"
+          ref="elementset"
+        ></element-set>
       </div>
-      <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
-                 :title="$t('overall.detail')"
-                 :visible.sync="graphShow"
-                 width="90%"
-                 :append-to-body="true"
-                 id="viewGraphDialog"
-                 @close="dialogClose">
-        <div slot="title">
-          {{$t("project.endpoint.dialogTitle")}}
-          <div class="float-right panel-calendar dialog-tool" style="display: flex">
-            <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
-          </div>
-        </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"
-        :dropCol="dropCol"
-        @tablelable="tablelabelEmit"
-        ref="elementset"
-      ></element-set>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview"></span>
     </div>
+  </div>
 </template>
 
 <script>
@@ -301,7 +291,7 @@ import axios from "axios";
 import pickTime from "../common/pickTime";
 import chart from "../page/dashboard/overview/chart";
 export default {
-    name: 'chartTable',
+  name: 'chartTable',
   components: {
     'loading': loading,
     'time-picker':timePicker,
@@ -309,160 +299,157 @@ export default {
     'chart':chart,
     'pick-time':pickTime,
   },
-    props: {
-        // 看板id
-        panelId: {
-            type: Number,
-            default: 0,
-        },
-        editChartId: {
-          type: String,
-          default: 'editChartId',
-        },
-        chartIndex:{
-          type: Number,
-          default: 0,
-        },
-      chartInfo:{
-
-      }
+  props: {
+    // 看板id
+    panelId: {
+      type: Number,
+      default: 0,
     },
-    data() {
-        return {
-            data: {}, // 该图表信息,chartItem
-            unit:{},
-            isError:false,
-            errorContent:'',
-            pageObj: {
-              pageNo: 1,
-              pageSize: 50,
-              total: 0
-            },
-            screenPageObj:{
-              pageNo: 1,
-              pageSize: 50,
-              total: 0
-            },
-            storedTableData:[],
-            storedScreanTableData:[],
-            images: '',
-            //toolbox: false,
-            loading:Object,
-            panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-            firstLoad: false, // 是否第一次加载
-            //showLoading:true,
-            //showLoadingScreen:false,
-            //showTable:true,
-            chartType: 'alertLIst', // 图表类型
-            screenModal: false,
-            // 查询数据使用
-            filter: {
-                start_time: '',
-                end_time: '',
-            },
-            stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
-            firstShow: false, // 默认不显示操作按钮,
-            caretShow:false,
-            dragTitleShow:false,
-            dropdownMenuShow:false,
-            minHeight:200,
-            chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
-            titleHeight:38,//title-height:28,magrin-bottom:10
-            pageHeight:40,
-            divFirstShow:false,
-            searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
-            oldSearchTime: [],
-          tableTitle: [
-            {
-              label: 'ID',
-              prop: 'id',
-              show: true,
-              width: 80
-            }, {
-              label: this.$t("alert.alertName"),
-              prop: 'alertRule',
-              show: true,
-              width: 180
-            }, /*{
-            label: this.$t("alert.list.type"),
-            prop: 'type',
+    editChartId: {
+      type: String,
+      default: 'editChartId',
+    },
+    chartIndex:{
+      type: Number,
+      default: 0,
+    },
+    chartInfo:{}
+  },
+  data() {
+    return {
+      tableHeight: 0,
+        data: {}, // 该图表信息,chartItem
+        unit:{},
+        isError:false,
+        errorContent:'',
+        pageObj: {
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
+        },
+        screenPageObj:{
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
+        },
+        storedTableData:[],
+        storedScreanTableData:[],
+        images: '',
+        //toolbox: false,
+        loading:Object,
+        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+        firstLoad: false, // 是否第一次加载
+        //showLoading:true,
+        //showLoadingScreen:false,
+        //showTable:true,
+        chartType: 'alertLIst', // 图表类型
+        screenModal: false,
+        // 查询数据使用
+        filter: {
+            start_time: '',
+            end_time: '',
+        },
+        stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
+        firstShow: false, // 默认不显示操作按钮,
+        caretShow:false,
+        dragTitleShow:false,
+        dropdownMenuShow:false,
+        minHeight:200,
+        chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
+        titleHeight:38,//title-height:28,magrin-bottom:10
+        pageHeight:40,
+        divFirstShow:false,
+        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
+        oldSearchTime: [],
+        tableTitle: [
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true,
+            width: 80
+          }, {
+            label: this.$t("alert.alertName"),
+            prop: 'alertRule',
+            show: true,
+            width: 180
+          }, /*{
+          label: this.$t("alert.list.type"),
+          prop: 'type',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t("alert.list.linked"),
+          prop: 'linkObject',
+          show: true,
+          width: 140
+        }, */{
+            label: this.$t("alert.list.labels"),
+            prop: 'labels',
+            show: true,
+            width: 200
+          }, {
+            label: this.$t("alert.severity"),
+            prop: 'severity',
             show: true,
             width: 100
           }, {
-            label: this.$t("alert.list.linked"),
-            prop: 'linkObject',
+            label: this.$t('alert.summary'),
+            prop: 'summary',
+            show: true
+          }, {
+            label: this.$t('alert.description'),
+            prop: 'description',
+            show: true
+          }, {
+            label: this.$t('alert.list.state'),
+            prop: 'state',
             show: true,
-            width: 140
-          }, */{
-              label: this.$t("alert.list.labels"),
-              prop: 'labels',
-              show: true,
-              width: 200
-            }, {
-              label: this.$t("alert.severity"),
-              prop: 'severity',
-              show: true,
-              width: 100
-            }, {
-              label: this.$t('alert.summary'),
-              prop: 'summary',
-              show: true
-            }, {
-              label: this.$t('alert.description'),
-              prop: 'description',
-              show: true
-            }, {
-              label: this.$t('alert.list.state'),
-              prop: 'state',
-              show: true,
-              width: 100
-            }, {
-              label: this.$t("alert.startAt"),
-              prop: 'startAt',
-              show: true,
-            }, {
-              label: this.$t('alert.endAt'),
-              prop: 'endAt',
-              show: true,
-            }, {
-              label: this.$t('alert.list.current'),
-              prop: 'current',
-              show: true
-            }, {
-              label: this.$t('overall.option'),
-              prop: 'option',
-              show: true,
-              width: 90
-            }
-          ],
-          tablelable:[],
-          dropCol: [],
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false,
-          severityData: [
-            {
-              key: 'medium',
-              value: this.$t("alert.config.medium")
-            },
-            {
-              key: 'high',
-              value: this.$t("alert.config.high")
-            },
-            {
-              key: 'low',
-              value: this.$t("alert.config.low")
-            }
-          ],
-          graphShow: false,
-          chartDatas: [],
-          chartUnit:5,
-          deleteBox: {show: false, ids: "", remark: '', state: 2},
-          isPreview:false,
-        };
-    },
-    created() {
-    },
+            width: 100
+          }, {
+            label: this.$t("alert.startAt"),
+            prop: 'startAt',
+            show: true,
+          }, {
+            label: this.$t('alert.endAt'),
+            prop: 'endAt',
+            show: true,
+          }, {
+            label: this.$t('alert.list.current'),
+            prop: 'current',
+            show: true
+          }, {
+            label: this.$t('overall.option'),
+            prop: 'option',
+            show: true,
+            width: 90
+          }
+        ],
+        tablelable:[],
+        dropCol: [],
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+        tableHover: false, //控制滚动条和top按钮同时出现
+        showTopBtn: false,
+        severityData: [
+          {
+            key: 'medium',
+            value: this.$t("alert.config.medium")
+          },
+          {
+            key: 'high',
+            value: this.$t("alert.config.high")
+          },
+          {
+            key: 'low',
+            value: this.$t("alert.config.low")
+          }
+        ],
+        graphShow: false,
+        chartDatas: [],
+        chartUnit:5,
+        deleteBox: {show: false, ids: "", remark: '', state: 2},
+        isPreview:false,
+      };
+  },
   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";
@@ -635,94 +626,95 @@ export default {
           })
         }
       },
-        getAlertList: function (filterType,isPreview=false) {
-          this.isPreview = isPreview;
-          let queryParam={
-            pageSize:this.pageObj.pageSize,
-            pageNo:this.pageObj.pageNo,
-          }
-          if(this.chartInfo&&this.chartInfo.param){ //按照粒度，project>module>endpoint  查询只传最细粒度
-            let param=this.chartInfo.param;
-            if(param.endpointId&&param.endpointId != ''){
-              queryParam.endpointId=param.endpointId;
+      getAlertList: function (filterType,isPreview=false) {
+        this.resize();
+        this.isPreview = isPreview;
+        let queryParam={
+          pageSize:this.pageObj.pageSize,
+          pageNo:this.pageObj.pageNo,
+        }
+        if(this.chartInfo&&this.chartInfo.param){ //按照粒度，project>module>endpoint  查询只传最细粒度
+          let param=this.chartInfo.param;
+          if(param.endpointId&&param.endpointId != ''){
+            queryParam.endpointId=param.endpointId;
+          }else{
+            if(param.moduleId&&param.moduleId!=''){
+              queryParam.moduleId=param.moduleId;
             }else{
-              if(param.moduleId&&param.moduleId!=''){
-                queryParam.moduleId=param.moduleId;
-              }else{
-                if(param.projectId&&param.projectId!=''){
-                  queryParam.projectId=param.projectId;
-                }
+              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;
-            }
           }
 
-          this.startLoading(filterType);
-          this.$get('/alert/message', queryParam).then(response => {
-            if (response.code == 200) {
-              this.storedTableData = response.data.list;
-              this.storedScreanTableData=response.data.list;
-              this.storedTableData.forEach((item) => {
-                item.labels = JSON.parse(item.labels);
-                let paramStr = JSON.stringify(this.promQueryParamConvert(item));
-                if(paramStr&& paramStr !='""'){
-                  this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
-                    let current = [];
-                    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);
-                        }
-                      });
-                    }
-                    this.$set(item, "current", current);
-                  });
-                }
-              });
-              this.pageObj.total = response.data.total;
-              this.isError = false;
-              this.errorContent = '';
-              this.divFirstShow = true;
+          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;
+          }
+        }
 
-              this.firstShow = true; // 展示操作按键
-              this.endLoading(filterType);
-            }else{
-              this.isError = true;
-              this.errorContent = response.msg;
-            }
-          });
-        },
-        promQueryParamConvert(obj) {
-          if(obj){
-            return "(" + obj.alertRule.expr + ") and (" + function(){
-              let q = "{";
-              for (let k in obj.labels) {
-                if (k != 'alertname' && k != 'severity') {
-                  q += k;
-                  q += "=";
-                  q += ("'" + obj.labels[k] + "',");
-                }
-              };
-              if (q.length > 1) {
-                q = q.substring(0, q.length-1);
+        this.startLoading(filterType);
+        this.$get('/alert/message', queryParam).then(response => {
+          if (response.code == 200) {
+            this.storedTableData = response.data.list;
+            this.storedScreanTableData=response.data.list;
+            this.storedTableData.forEach((item) => {
+              item.labels = JSON.parse(item.labels);
+              let paramStr = JSON.stringify(this.promQueryParamConvert(item));
+              if(paramStr&& paramStr !='""'){
+                this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
+                  let current = [];
+                  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);
+                      }
+                    });
+                  }
+                  this.$set(item, "current", current);
+                });
               }
-              q += "}";
-              return q;
-            }() + ")";
+            });
+            this.pageObj.total = response.data.total;
+            this.isError = false;
+            this.errorContent = '';
+            this.divFirstShow = true;
+
+            this.firstShow = true; // 展示操作按键
+            this.endLoading(filterType);
+          }else{
+            this.isError = true;
+            this.errorContent = response.msg;
           }
-          return '';
-        },
+        });
+      },
+      promQueryParamConvert(obj) {
+        if(obj){
+          return "(" + obj.alertRule.expr + ") and (" + function(){
+            let q = "{";
+            for (let k in obj.labels) {
+              if (k != 'alertname' && k != 'severity') {
+                q += k;
+                q += "=";
+                q += ("'" + obj.labels[k] + "',");
+              }
+            };
+            if (q.length > 1) {
+              q = q.substring(0, q.length-1);
+            }
+            q += "}";
+            return q;
+          }() + ")";
+        }
+        return '';
+      },
       elementsetShow(s, e) {
         var eventfixed = {
           shezhi: 0,
@@ -944,72 +936,64 @@ export default {
             this.$refs['localLoading'+this.chartIndex].endLoading();
           }
         },
-        clearData(){
-        },
-        showLoad(chartItem) {
-          //设置高度 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-75-32}px`;
-            tableBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.pageHeight}px`;// -75-32
+      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(() => {
+          this.resize(chartItem);
+        });
+        this.startLoading();
+        this.divFirstShow = true;
+      },
+      // 重新请求数据 刷新操作-local
+      refreshChart() {
+        this.dropdownMenuShow=false;
+        this.startLoading();
+        this.firstShow = false;
+        this.$emit('on-refresh-data', this.data.id);
+      },
+      // 编辑图表
+      editChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-edit-chart-block', this.data.id);
+      },
+      // 删除该图表
+      removeChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-remove-chart-block', this.data.id);
+      },
+      //全屏时间条件查询
+      dateChange(time) {
+        //this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+        //this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+        //this.showTable = false;
+        this.searchTime = [...time];
+        this.seriesItemScreen = [];
+        for(let i=0;i<8;i++){
+          this.seriesItemScreen.push({//表格数据
+            // label: '',//label
+            // metric: '',//metric列
+            element:'',
+            time: '',//采集时间
+            value: '',//数值
           });
-          this.startLoading();
-          this.divFirstShow = true;
-          //this.tableLoading = true;
-        },
-        // 展示图表编辑区
-      /*
-        showTool() {
-            this.toolbox = !this.toolbox;
-        },
-        */
-        // 重新请求数据 刷新操作-local
-        refreshChart() {
-            this.dropdownMenuShow=false;
-            this.startLoading();
-            this.firstShow = false;
-            this.$emit('on-refresh-data', this.data.id);
-        },
-        // 编辑图表
-        editChart() {
-            this.dropdownMenuShow=false;
-            this.$emit('on-edit-chart-block', this.data.id);
-        },
-        // 删除该图表
-        removeChart() {
-            this.dropdownMenuShow=false;
-            this.$emit('on-remove-chart-block', this.data.id);
-        },
-        //全屏时间条件查询
-        dateChange(time) {
-            //this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-            //this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-            //this.showTable = false;
-            this.searchTime = [...time];
-            this.seriesItemScreen = [];
-            for(let i=0;i<8;i++){
-              this.seriesItemScreen.push({//表格数据
-                // label: '',//label
-                // metric: '',//metric列
-                element:'',
-                time: '',//采集时间
-                value: '',//数值
-              });
-            }
-            this.startLoading('screen');
-            //this.tableLoading = true;
-            //this.firstShow = false;
-            this.$emit('on-search-data', this.data.id, this.searchTime);
-        },
-        clickos() {
-          this.dropdownMenuShow=false;
-        },
+        }
+        this.startLoading('screen');
+        //this.tableLoading = true;
+        //this.firstShow = false;
+        this.$emit('on-search-data', this.data.id, this.searchTime);
+      },
+      clickos() {
+        this.dropdownMenuShow=false;
+      },
       clearChart(){
         this.data = {};
       },
@@ -1045,7 +1029,7 @@ export default {
         },
         // 设置数据, filter区分
         setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
-
+          console.info(chartItem,title)
         },
 
     },
diff --git a/nezha-fronted/src/components/charts/chart-asset-info.vue b/nezha-fronted/src/components/charts/chart-asset-info.vue
index 932e3aa64..ea59ea665 100644
--- a/nezha-fronted/src/components/charts/chart-asset-info.vue
+++ b/nezha-fronted/src/components/charts/chart-asset-info.vue
@@ -6,7 +6,7 @@
     <div class="resize-shadow" ref="resizeShadow"></div>
     <div class="resize-box resize-box-asset" ref="resizeBox">
       <div class="chart-asset-info" :id="'chartAssetInfoDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
+        <loading :ref="'localLoading'+chartIndex"></loading>
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
           <el-popover
             v-if="isError"
@@ -14,10 +14,10 @@
             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>
+              <i class="nz-icon nz-icon-warning fa"></i>
+              <span class="panel-info-corner-inner"></span>
             </span>
           </el-popover>
           <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 4dfcc65ba..c8156cccf 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/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"
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index b6da7873a..4d900c889 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/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;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 16d7935f0..519b70ee4 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -6,7 +6,7 @@
     <div class="resize-shadow" ref="resizeShadow"></div>
     <div class="resize-box resize-box-echarts" ref="resizeBox">
       <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
+        <loading :ref="'localLoading'+chartIndex"></loading>
         <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
           <el-popover
             v-if="isError"
@@ -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>
diff --git a/nezha-fronted/src/tools.js b/nezha-fronted/src/tools.js
index c6df6b087..2ccadb203 100644
--- a/nezha-fronted/src/tools.js
+++ b/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}`);