fix： 修正抽取组件没有批量删除的功能 style：修改小驼峰为中划线的格式

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

@@ -41,104 +41,16 @@
           </el-dropdown>
         </div>
         <div class="mt-10 table-container" v-cloak  v-show="firstShow || isPreview">
-          <transition name="el-zoom-in-bottom">
+          <alertMessageTable
-            <div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0" :style="{'top':isPreview?'-30px':'10px'}">
+            :tableData="storedScreanTableData"
-              <i style="cursor: pointer" class="el-icon-delete"></i>
+            :loading="loading"
-            </div>
+            :tableHeight="tableHeight"
-          </transition>
+            :tableId="''"
-          <el-table
+            :projectAlertId="'tableContainer'+chartIndex"
-            :id="'tableContainer'+chartIndex"
+            @tableDataSort="tableDataSort"
-            class="nz-table"
+            @deleteMessage="deleteMessage"
-            :data="storedTableData"
-            border
-            :height="tableHeight"
             ref="alertListTable"
-            tooltip-effect="light"
+          ></alertMessageTable>
-            v-scrollBar:el-table="'normal'"
-            :cell-class-name="labelsClassName"
-            @selection-change="selectChange"
-            style="width: 100%;"
-            @sort-change="tableDataSort"
-            v-loading="loading"
-          >
-            <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"
-              :sortable="sortableShow(item.prop)"
-              :prop="propTitle(item.prop)"
-              :sort-orders="['ascending', 'descending']"
-            >
-              <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="item.label" :type="tagType(item.label)" style="margin: 5px;"
-                                :cursor-point="tagType(item.label) == 'info' ? false : true"
-                                :key="item.label"
-                                v-if="item.label != 'alertname' && item.label != 'severity'"
-                                v-for="item in labelsSort(scope.row.labels)">{{item.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">{{formatThreshold(scope.row.current[1],scope.row.alertRule.unit)}}</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" v-if="!isPreview">
-              <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="pageObj" @pageNo='pageNo'  @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
         </div>
         <!--全屏-->
@@ -148,100 +60,16 @@
             <div class="float-right panel-calendar dialog-tool">
             </div>
           </div>
-          <transition name="el-zoom-in-bottom">
+          <alertMessageTable
-            <div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0">
+            :tableData="storedScreanTableData"
-              <i style="cursor: pointer" class="el-icon-delete"></i>
+            :loading="loading"
-            </div>
+            :tableHeight="'95%'"
-          </transition>
+            :tableId="''"
-          <el-table
+            :projectAlertId="'tableContainer'+chartIndex"
-            :id="'tableContainer'+chartIndex"
+            @tableDataSort="tableDataSort"
-            class="nz-table"
+            @deleteMessage="deleteMessage"
-            :data="storedScreanTableData"
-            border
-            height="95%"
             ref="alertListScreenTable"
-            tooltip-effect="light"
+          ></alertMessageTable>
-            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="item.label" :type="tagType(item.label)" style="margin: 5px;"
-                                :cursor-point="tagType(item.label) == 'info' ? false : true"
-                                :key="item.label"
-                                v-if="item.label != 'alertname' && item.label != 'severity'"
-                                v-for="item in labelsSort(scope.row.labels)">{{item.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>
-                <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>
@@ -298,6 +126,7 @@ import nzAlertTag from "../page/alert/nzAlertTag";
 import axios from "axios";
 import pickTime from "../common/pickTime";
 import chart from "../page/dashboard/overview/chart";
+import alertMessageTable from '@/components/common/alert/alertMessageTable.vue'
 export default {
   name: 'chartTable',
   components: {
@@ -306,6 +135,7 @@ export default {
     'nz-alert-tag':nzAlertTag,
     'chart':chart,
     'pick-time':pickTime,
+    'alertMessageTable':alertMessageTable
   },
   props: {
     // 看板id
@@ -505,28 +335,6 @@ export default {
         let vm = this;
         this.$chartResizeTool.start(vm, this.data, e);
       },
-      labelsSort:function(obj){
-        let buildIn=['asset','endpoint','module','project','datacenter']
-        let labels=JSON.parse(JSON.stringify(obj));
-        let result=[];
-        for(let key of buildIn){
-          if(key in labels){
-            result.push({label:key,value:labels[key]})
-            delete labels[key]
-          }
-        }
-        Object.keys(labels).sort().forEach(key=>{
-          result.push({label:key,value:labels[key]})
-        })
-        return result;
-      },
-        labelsClassName(row) {
-          if (row.column.label == this.$t("alert.list.labels")) {
-            return "alert-message-list-labels";
-          } else {
-            return "";
-          }
-        },
       formatThreshold:function(value,unit){
         let unitMethod=chartDataFormat.getUnit(unit)
         if(unitMethod&&value){
@@ -574,13 +382,7 @@ export default {
       screenDialogClose:function(){
         this.screenModal = false
         this.deleteBox.ids=[];
-        this.$refs.alertListScreenTable.clearSelection();
+        this.$refs.alertListScreenTable.$refs.alertListTable.clearSelection();
-      },
-      toDeleteMessage(obj) {
-        if (obj) {
-          this.deleteBox.ids = obj.id + "";
-        }
-        this.deleteBox.show = true;
       },
       selectChange(s) {
         let ids = [];
@@ -590,8 +392,8 @@ export default {
         });
         this.deleteBox.ids = ids.join(",");
       },
-      deleteMessage() {
+      deleteMessage(deleltebox) {
-        this.$put("alert/message", this.deleteBox).then(res => {
+        this.$put("alert/message", deleltebox).then(res => {
           if (res.code === 200) {
             this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
             this.deleteBox.show = false;
@@ -970,7 +772,7 @@ export default {
             this.storedScreanTableData = this.storedTableData
             this.screenModal = true;
             this.deleteBox.ids=[];
-            this.$refs.alertListTable.clearSelection();
+            this.$refs.alertListTable.$refs.alertListTable.clearSelection();
         },
         // 设置数据, filter区分
         setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {

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

@@ -1,96 +1,96 @@
 <template>
   <span>
-    <div class="alertLabelInfo" v-if="type==='asset'" v-loading="loading">
+    <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">ID</div>
+        <div class="alert-label-title">ID</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">SN</div>
+        <div class="alert-label-title">SN</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.sn:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.sn:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Host</div>
+        <div class="alert-label-title">Host</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.host:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">State</div>
+        <div class="alert-label-title">State</div>
-        <div class="alertLabelValue">{{alertLabelData?(alertStateStr(alertLabelData.state)):''}}</div>
+        <div class="alert-label-value">{{alertLabelData?(alertStateStr(alertLabelData.state)):''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Ping</div>
+        <div class="alert-label-title">Ping</div>
-        <div class="alertLabelValue">
+        <div class="alert-label-value">
           <div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingStatus == 1,'active-icon red':alertLabelData.pingStatus == 0}"></div>
           <span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':''}}</span>
         </div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Asset Type</div>
+        <div class="alert-label-title">Asset Type</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.assetType:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.assetType:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Vendor</div>
+        <div class="alert-label-title">Vendor</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.vendor:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.vendor:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Model</div>
+        <div class="alert-label-title">Model</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.model:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.model:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">PingLastReply</div>
+        <div class="alert-label-title">PingLastReply</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.pingLastReply:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.pingLastReply:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Alert</div>
+        <div class="alert-label-title">Alert</div>
-        <div class="alertLabelValue">
+        <div class="alert-label-value">
           <span v-if="alertLabelData" :class="{danger:alertLabelData.alert>0,success:alertLabelData.alert<=0}">{{alertLabelData.alert + alertActiveStr()}}</span>
         </div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">DC</div>
+        <div class="alert-label-title">DC</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.dataCenter:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Endpoint</div>
+        <div class="alert-label-title">Endpoint</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.endpoint:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.endpoint:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Administrator</div>
+        <div class="alert-label-title">Administrator</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.principal:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.principal:''}}</div>
       </div>
   </div>
 
-    <div class="alertLabelInfo" v-if="type==='module'" v-loading="loading">
+    <div class="alert-label-info" v-if="type==='module'" v-loading="loading">
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">ID</div>
+        <div class="alert-label-title">ID</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Name</div>
+        <div class="alert-label-title">Name</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.name:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Project</div>
+        <div class="alert-label-title">Project</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.project.name:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Description</div>
+        <div class="alert-label-title">Description</div>
-        <div class="alertLabelValue">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
+        <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
       </div>
     </div>
 
-    <div class="alertLabelInfo" v-if="type==='project'" v-loading="loading">
+    <div class="alert-label-info" v-if="type==='project'" v-loading="loading">
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">ID</div>
+        <div class="alert-label-title">ID</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Name</div>
+        <div class="alert-label-title">Name</div>
-        <div class="alertLabelValue">{{alertLabelData?alertLabelData.name:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
       </div>
-      <div class="alertLabelBox">
+      <div class="alert-label-box">
-        <div class="alertLabelTitle">Description</div>
+        <div class="alert-label-title">Description</div>
-        <div class="alertLabelValue">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
+        <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
       </div>
     </div>
   </span>
@@ -172,25 +172,25 @@
 </script>
 
 <style scoped>
-  .alertLabelInfo{
+  .alert-label-info{
     border: 1px solid #ebeef5;
     border-bottom: none;
     font-size: 13px;
     line-height: 26px;
   }
-  .alertLabelBox{
+  .alert-label-box{
     display: flex;
     justify-content:space-between;
     border-bottom: 1px solid #ebeef5;
   }
-  .alertLabelTitle{
+  .alert-label-title{
     text-align: left;
     width: 90px;
     border-right: 1px solid #ebeef5;
     color: #666;
     padding: 0 3px 0 13px;
   }
-  .alertLabelValue{
+  .alert-label-value{
     text-align: left;
     width: 150px;
     color: #1a1a1a;

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

@@ -2,7 +2,12 @@
   @import '../../charts/chart';
 </style>
 <template>
-  <div class="content">
+  <div class="content relative-position">
+    <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
       class="nz-table tabelH100"
@@ -18,6 +23,7 @@
       @selection-change="selectChange"
       style="width: 100%;height: 100%"
       @sort-change="tableDataSort"
+      :id="projectAlertId"
     >
       <el-table-column
         :resizable="false"
@@ -224,7 +230,8 @@
       tableData:{},
       loading:{},
       tableHeight:{},
-      tableId:{}
+      tableId:{},
+      projectAlertId:{}
     },
     data() {
       vm = this;
@@ -618,8 +625,10 @@
         this.deleteBox.show = true;
       },
       deleteMessage() {
-        this.$emit('deleteMessage',this.deleteBox);
+        // this.$emit('deleteMessage',this.deleteBox);
+        console.log(this.deleteBox);
         this.deleteBox.show = false;
+        // this.deleteBox.ids=[];
       },
       selectChange(s) {
         let ids = [];
@@ -947,4 +956,7 @@
   /deep/.el-tooltip{
     display: inline-block;
   }
+  /deep/.alert-clean-pop.el-popover{
+    top: -30px;
+  }
 </style>

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

@@ -1,20 +1,20 @@
 <template>
-  <div class="alertRuleInfo" v-loading="loading">
+  <div class="alert-rule-info" v-loading="loading">
-    <div class="alertRuleBox">
+    <div class="alert-rule-box">
-      <div class="alertRuleTitle">ID</div>
+      <div class="alert-rule-title">ID</div>
-      <div class="alertRuleValue">{{alertRuleData?alertRuleData.id:''}}</div>
+      <div class="alert-rule-value">{{alertRuleData?alertRuleData.id:''}}</div>
     </div>
-    <!--<div class="alertRuleBox">-->
+    <!--<div class="alert-rule-box">-->
-      <!--<div class="alertRuleTitle">ID</div>-->
+      <!--<div class="alert-rule-title">ID</div>-->
-      <!--<div class="alertRuleValue">{{alertRuleData.id}}</div>-->
+      <!--<div class="alert-rule-value">{{alertRuleData.id}}</div>-->
     <!--</div>-->
-    <div class="alertRuleBox">
+    <div class="alert-rule-box">
-      <div class="alertRuleTitle">Expression</div>
+      <div class="alert-rule-title">Expression</div>
-      <div class="alertRuleValue">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
+      <div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
     </div>
-    <div class="alertRuleBox">
+    <div class="alert-rule-box">
-      <div class="alertRuleTitle">Level</div>
+      <div class="alert-rule-title">Level</div>
-      <div class="alertRuleValue">
+      <div class="alert-rule-value">
         <span v-if="alertRuleData && alertRuleData.severity === 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
         <span style="padding-left: 18px;" v-if="alertRuleData && alertRuleData.severity === 'medium'">{{severityData[0].value}}</span>
         <span v-if="alertRuleData && alertRuleData.severity === 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
@@ -26,7 +26,7 @@
 <script>
   import chartDataFormat from '../../charts/chartDataFormat'
 	export default {
-		name:"alertRuleInfo",
+		name:"alert-rule-info",
     props:{
 		  id:{},
       severityData:{
@@ -77,25 +77,25 @@
 </script>
 
 <style scoped>
-  .alertRuleInfo{
+  .alert-rule-info{
     border: 1px solid #ebeef5;
     border-bottom: none;
     font-size: 13px;
     line-height: 26px;
   }
-  .alertRuleBox{
+  .alert-rule-box{
     display: flex;
     justify-content:space-between;
     border-bottom: 1px solid #ebeef5;
   }
-  .alertRuleTitle{
+  .alert-rule-title{
     text-align: left;
     width: 80px;
     border-right: 1px solid #ebeef5;
     color: #666;
     padding: 0 3px 0 13px;
   }
-  .alertRuleValue{
+  .alert-rule-value{
     text-align: left;
     width: 180px;
     color: #1a1a1a;

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

@@ -20,121 +20,6 @@
         </button>
       </div>
     </div>
-    <!--删除message按钮-->
-    <div class="el-popover alert-clean-pop" @click="toDeleteMessage" v-if="deleteBox.ids.length > 0">
-      <i style="cursor: pointer" class="el-icon-delete"></i>
-    </div>
-
-    <!--<el-table-->
-      <!--class="nz-table"-->
-      <!--:data="tableData"-->
-      <!--border-->
-      <!--v-loading="loading"-->
-      <!--ref="alertMessageSubList"-->
-      <!--tooltip-effect="light"-->
-      <!--v-scrollBar:el-table="'large'"-->
-      <!--:height="$tableHeight.openSubList.subList"-->
-      <!--:cell-class-name="labelsClassName"-->
-      <!--@selection-change="selectChange"-->
-      <!--style="width: 100%;"-->
-      <!--@sort-change="tableDataSort"-->
-    <!--&gt;-->
-      <!--<el-table-column-->
-        <!--:resizable="false"-->
-        <!--type="selection"-->
-        <!--width="38"-->
-        <!--align="center"-->
-      <!--&gt;-->
-      <!--</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"-->
-        <!--:sortable="sortableShow(item.prop)"-->
-        <!--:prop="propTitle(item.prop)"-->
-        <!--:sort-orders="['ascending', 'descending']"-->
-      <!--&gt;-->
-        <!--<template slot-scope="scope" :column="item">-->
-          <!--<template v-if="item.prop == 'alertRule'">-->
-            <!--<div class="too-long-split" :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>-->
-          <!--&lt;!&ndash;<div v-else-if="item.prop == 'type'" class="content-right-options">-->
-            <!--<span v-if="scope.row[item.prop] == 1">Project</span>-->
-            <!--<span v-if="scope.row[item.prop] == 2">Module</span>-->
-            <!--<span v-if="scope.row[item.prop] == 3">Device</span>-->
-          <!--</div>&ndash;&gt;-->
-          <!--<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>-->
-          <!--&lt;!&ndash;<div v-else-if="item.prop == 'linkObject'">-->
-            <!--<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"-->
-                  <!--@click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"-->
-                  <!--:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span>-->
-            <!--<span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" :class="{'link': from == 'alertRule'}"-->
-                  <!--@click="viewAlertType(scope.row['type'],scope.row[item.prop].id)"-->
-                  <!--:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>-->
-            <!--<span v-else>-</span>-->
-          <!--</div>&ndash;&gt;-->
-          <!--<template v-else-if="item.prop == 'labels'">-->
-            <!--<nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"-->
-                          <!--:cursor-point="false"-->
-                          <!--:key="item.label"-->
-                          <!--v-if="item.label != 'alertname' && item.label != 'severity'"-->
-                          <!--v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>-->
-            <!--&lt;!&ndash;<el-tag v-if="key != 'alertname' && key != 'severity'"-->
-                    <!--:key="key"-->
-                    <!--type="info"-->
-                    <!--size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>&ndash;&gt;-->
-          <!--</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="'sub-alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>-->
-            <!--<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'sub-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-is-hover': tableHover}" class="to-top" v-show="showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>-->
-        <!--</template>-->
-      <!--</el-table-column>-->
-    <!--</el-table>-->
     <alertMessageTable
       :tableData="tableData"
       :loading="loading"
@@ -392,21 +277,6 @@
       }
     },
     methods: {
-      labelsSort:function(obj){
-        let buildIn=['asset','endpoint','module','project','datacenter']
-        let labels=JSON.parse(JSON.stringify(obj));
-        let result=[];
-        for(let key of buildIn){
-          if(key in labels){
-            result.push({label:key,value:labels[key]})
-            delete labels[key]
-          }
-        }
-        Object.keys(labels).sort().forEach(key=>{
-          result.push({label:key,value:labels[key]})
-        })
-        return result;
-      },
       elementsetShow(s, e) {
         this.showElementSet = true;
         this.$nextTick(() => {
@@ -446,9 +316,6 @@
       changeTab(tab) {
         this.$emit('changeTab', tab);
       },
-      toDeleteMessage() {
-        this.deleteBox.show = true;
-      },
       deleteMessage(deleteBox) {
         this.$put("alert/message", deleteBox).then(res => {
           if (res.code === 200) {
@@ -459,14 +326,6 @@
           }
         })
       },
-      selectChange(s) {
-        let ids = [];
-        this.deleteBox.ids = "";
-        s.forEach(item => {
-          ids.push(item.id);
-        });
-        this.deleteBox.ids = ids.join(",");
-      },
       exportCur:function(){
         this.exportExcel(this.searchLabel);
         this.importBox.show = false;

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

@@ -42,156 +42,6 @@
             </div>
             <div class="pagination-top pagination-top-hide display-none"></div>
           </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-->
-            <!--class="nz-table"-->
-            <!--:data="tableData"-->
-            <!--border-->
-            <!--v-show="mainResizeShow"-->
-            <!--ref="alertListTable"-->
-            <!--tooltip-effect="light"-->
-            <!--:height="mainTableHeight"-->
-            <!--v-scrollBar:el-table="'large'"-->
-            <!--v-loading="loading"-->
-            <!--:cell-class-name="labelsClassName"-->
-            <!--@selection-change="selectChange"-->
-            <!--style="width: 100%;"-->
-            <!--@sort-change="tableDataSort"-->
-          <!--&gt;-->
-            <!--<el-table-column-->
-              <!--:resizable="false"-->
-              <!--type="selection"-->
-              <!--width="38"-->
-              <!--align="center"-->
-            <!--&gt;-->
-            <!--</el-table-column>-->
-            <!--<el-table-column-->
-              <!--:resizable="false"-->
-              <!--v-for="(item, index) in tablelable"-->
-              <!--v-if="item.show"-->
-              <!--:width="item.width"-->
-              <!--:minWidth="item.minWidth"-->
-              <!--:key="`col-${index}`"-->
-              <!--:label="item.label"-->
-              <!--:show-overflow-tooltip="item.prop != 'labels'"-->
-              <!--min-width="110px"-->
-              <!--:sortable="sortableShow(item.prop)"-->
-              <!--:prop="propTitle(item.prop)"-->
-              <!--:sort-orders="['ascending', 'descending']"-->
-            <!--&gt;-->
-              <!--<template slot-scope="scope" :column="item">-->
-                <!--<template v-if="item.prop == 'alertRule'">-->
-                  <!--&lt;!&ndash;<div class="link too-long-split"-->
-                     <!--@click="viewRule(scope.row[item.prop].id)" :id="'view-rule-'+scope.row[item.prop].id"-->
-                     <!--v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>&ndash;&gt;-->
-                  <!--<span class="too-long-split" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">-->
-                    <!--<el-tooltip placement="right" effect="light">-->
-                      <!--<alertRuleInfo slot="content" :id="scope.row.alertRule.id" :severityData="severityData" :messageLoad="scope.row.loading"></alertRuleInfo>-->
-                      <!--<span>{{scope.row[item.prop].alertName}}</span>-->
-                    <!--</el-tooltip>-->
-                  <!--</span>-->
-                  <!--<template v-else>-</template>-->
-                <!--</template>-->
-                <!--&lt;!&ndash;<div v-else-if="item.prop == 'type'" class="content-right-options">-->
-                  <!--<span v-if="scope.row[item.prop] == 1">Project</span>-->
-                  <!--<span v-if="scope.row[item.prop] == 2">Module</span>-->
-                  <!--<span v-if="scope.row[item.prop] == 3">Device</span>-->
-                <!--</div>&ndash;&gt;-->
-                <!--<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>-->
-                <!--&lt;!&ndash;<div v-else-if="item.prop == 'linkObject'">-->
-                  <!--<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"-->
-                        <!--@click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"-->
-                        <!--:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span>-->
-                  <!--<span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link"-->
-                        <!--@click="viewAlertType(scope.row['type'],scope.row[item.prop].id)"-->
-                        <!--:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>-->
-                  <!--<span v-else>-</span>-->
-                <!--</div>&ndash;&gt;-->
-                <!--<template v-else-if="item.prop == 'labels'" class="labels">-->
-                  <!--&lt;!&ndash;                <nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;" @click="showTagDetail(scope.row, key)"&ndash;&gt;-->
-                  <!--<el-tooltip-->
-                    <!--v-for="item in labelsSort(scope.row.labels)"-->
-                    <!--placement="right"-->
-                    <!--effect="light"-->
-                    <!--:disabled="!(item.label === 'asset' ||item.label === 'module' || item.label === 'project')"-->
-                    <!--:key="item.label"-->
-                  <!--&gt;-->
-                    <!--<alertLabel-->
-                      <!--v-if="item.label === 'asset' ||item.label === 'module' || item.label === 'project'"-->
-                      <!--slot="content"-->
-                      <!--:id="scope.row[item.label].id"-->
-                      <!--:type="item.label"-->
-                      <!--:labelLoading="scope.row[item.label].loading"-->
-                    <!--&gt;</alertLabel>-->
-                    <!--<span @mouseover="labelHover(scope.row,scope.$index,item.label)">-->
-                     <!--<nz-alert-tag-->
-                       <!--:label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"-->
-                       <!--:cursor-point="tagType(item.label) == 'info' ? false : true"-->
-                       <!--:key="item.label"-->
-                       <!--v-if="item.label != 'alertname' && item.label != 'severity'"-->
-                     <!--&gt;-->
-                       <!--{{item.value}}-->
-                     <!--</nz-alert-tag>-->
-                   <!--</span>-->
-                  <!--</el-tooltip>-->
-                  <!--&lt;!&ndash;<el-tag @click="showTagDetail(scope.row, key)"-->
-                          <!--:key="key"-->
-                          <!--:class="{'link': key == 'asset' || key == 'endpoint' || key == 'project' || key == 'module' || key == 'datacenter'}"-->
-                          <!--v-if="key != 'alertname' && key != 'severity'"-->
-                          <!--:type="tagType(key)"-->
-                          <!--size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>&ndash;&gt;-->
-                <!--</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">-->
-                    <!--<div slot="reference">-->
-                      <!--<span @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>{{formatThreshold(scope.row.current[1],scope.row.alertRule.unit)}}</span>-->
-                    <!--</div>-->
-                    <!--<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.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>-->
           <alertMessageTable
             :tableData="tableData"
             :loading="loading"
@@ -276,7 +126,7 @@
   import chartDataFormat from "../../charts/chartDataFormat";
   import alertRuleInfo from '../../common/alert/alertRuleInfo'
   import alertLabel from '../../common/alert/alertLabel'
-  import alertMessageTable from '../../common/alert/alertMessageTable'
+  import alertMessageTable from '@/components/common/alert/alertMessageTable.vue'
   var vm;
   export default {
     name: "alertList",