diff --git a/nezha-fronted/build/webpack.dev.conf.js b/nezha-fronted/build/webpack.dev.conf.js
index d715197fa..3c6ef7a3d 100644
--- a/nezha-fronted/build/webpack.dev.conf.js
+++ b/nezha-fronted/build/webpack.dev.conf.js
@@ -29,6 +29,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       ],
     },
     hot: true,
+    inline:true,
     contentBase: false, // since we use CopyWebpackPlugin.
     compress: true,
     host: HOST || config.dev.host,
diff --git a/nezha-fronted/config/index.js b/nezha-fronted/config/index.js
index 97c7b0130..c9782e0ea 100644
--- a/nezha-fronted/config/index.js
+++ b/nezha-fronted/config/index.js
@@ -22,7 +22,7 @@ module.exports = {
     // host: '0.0.0.0', // can be overwritten by process.env.HOST
     host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    autoOpenBrowser: false,
+    autoOpenBrowser: true,
     errorOverlay: true,
     notifyOnErrors: true,
     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
diff --git a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
index 10b14c4aa..6c568271d 100644
--- a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
@@ -14,7 +14,8 @@
       :resizable="false"
       align="center"
       type="selection"
-      width="55">
+      width="55"
+    >
     </el-table-column>
     <el-table-column
       v-for="(item, index) in customTableTitle"
@@ -31,70 +32,131 @@
       class="data-column"
     >
       <template slot="header">
-        <span class="data-column__span">{{item.label}}</span>
+        <span class="data-column__span">{{ item.label }}</span>
         <div class="col-resize-area"></div>
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'duration'">
-          <el-tooltip :disabled="!scope.row.endAt" effect="light" placement="right">
+          <el-tooltip
+            :disabled="!scope.row.endAt"
+            effect="light"
+            placement="right"
+          >
             <div slot="content">
-              {{$t('config.terminallog.endTime')}}<br/>
-              {{utcTimeToTimezoneStr(scope.row.endAt)}}
+              {{ $t("config.terminallog.endTime") }}<br />
+              {{ utcTimeToTimezoneStr(scope.row.endAt) }}
             </div>
-            <span>{{getDuration(scope.row)}}</span>
+            <span>{{ getDuration(scope.row) }}</span>
           </el-tooltip>
         </template>
+        <template v-else-if="item.prop === 'alertNum'">
+          <span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)">
+            <i
+              :class="scope.row.alertNum > 0 ? 'gray' : 'green'"
+              class="nz-icon nz-icon-overview-alert vertical-align-top;"
+              @mouseenter="tooltipHover(scope.row, true, $event)"
+              @mouseleave="tooltipHover(scope.row, false, $event)"
+            ></i><span>{{scope.row.alerts}}</span>
+          </span>
+        </template>
         <template v-else-if="item.prop === 'matchers'">
           <span v-for="(item1, i) in labelsSort(scope.row.matchers)" :key="i">
-              <span >
-                <nz-alert-tag
-                  :key="i" :cursor-point="tagType(item1.name) !== 'info'"
-                  :label="item1.name"
-                  :type="tagType(item1.name)"
-                  :regex="item1.regex"
-                  style="margin: 5px 0 5px 5px;"
-                >
-                 {{item1.value}}
-                </nz-alert-tag>
-              </span>
+            <span>
+              <nz-alert-tag
+                :key="i"
+                :cursor-point="tagType(item1.name) !== 'info'"
+                :label="item1.name"
+                :type="tagType(item1.name)"
+                :regex="item1.regex"
+                style="margin: 5px 0 5px 5px"
+              >
+                {{ item1.value }}
+              </nz-alert-tag>
             </span>
+          </span>
         </template>
         <template v-else-if="item.prop === 'state'">
-          <span v-if="scope.row.state===1" class="silence-active">active</span>
-          <span v-if="scope.row.state===2" class="silence-pending">pending</span>
-          <span v-if="scope.row.state===3" class="silence-expired">expired</span>
+          <span v-if="scope.row.state === 1" class="silence-active"
+            >active</span
+          >
+          <span v-if="scope.row.state === 2" class="silence-pending"
+            >pending</span
+          >
+          <span v-if="scope.row.state === 3" class="silence-expired"
+            >expired</span
+          >
         </template>
         <template v-else-if="item.prop === 'utime'">
-          {{utcTimeToTimezoneStr(scope.row[item.prop])}}
+          {{ utcTimeToTimezoneStr(scope.row[item.prop]) }}
         </template>
         <template v-else-if="item.prop === 'startAt'">
-          {{utcTimeToTimezoneStr(scope.row[item.prop])}}
+          {{ utcTimeToTimezoneStr(scope.row[item.prop]) }}
         </template>
-        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
+        <span v-else-if="scope.row[item.prop]">{{
+          scope.row[item.prop] || "-"
+        }}</span>
         <template v-else>-</template>
       </template>
     </el-table-column>
-    <el-table-column
-      :resizable="false"
-      :width="operationWidth"
-      fixed="right">
-      <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+    <el-table-column :resizable="false" :width="operationWidth" fixed="right">
+      <div slot="header" class="table-operation-title">
+        {{ $t("overall.option") }}
+      </div>
       <div slot-scope="scope" class="table-operation-items">
-<!--        <button :class="{'table-operation-item&#45;&#45;disable': scope.row.state === 3}" class="table-operation-item" v-has="'alertSilence_edit'" @click="$emit('edit', scope.row)" :disabled="scope.row.state === 3"><i class="nz-icon nz-icon-edit"></i></button>-->
-        <button class="table-operation-item"  @click="$emit('showBottomBox', 'alertMessageTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-        <el-dropdown size="medium" v-has="['alertSilence_expire', 'alertSilence_edit']" trigger="click" @command="tableOperation">
+        <!--        <button :class="{'table-operation-item&#45;&#45;disable': scope.row.state === 3}" class="table-operation-item" v-has="'alertSilence_edit'" @click="$emit('edit', scope.row)" :disabled="scope.row.state === 3"><i class="nz-icon nz-icon-edit"></i></button>-->
+        <button
+          class="table-operation-item"
+          @click="$emit('showBottomBox', 'alertMessageTab', scope.row)"
+        >
+          <i class="nz-icon nz-icon-view1"></i>
+        </button>
+        <el-dropdown
+          size="medium"
+          v-has="['alertSilence_expire', 'alertSilence_edit']"
+          trigger="click"
+          @command="tableOperation"
+        >
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-            <el-dropdown-item :command="['edit', scope.row]" :class="{'table-operation-item--disable': scope.row.state === 3}" class="table-operation-item" v-has="'alertSilence_edit'" :disabled="scope.row.state === 3"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'alertSilence_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'alertSilence_expire'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('buttons.delete')}}</span></el-dropdown-item>
+          <el-dropdown-menu
+            slot="dropdown"
+            class="right-box-select-top right-public-box-dropdown-top"
+          >
+            <el-dropdown-item
+              :command="['edit', scope.row]"
+              :class="{
+                'table-operation-item--disable': scope.row.state === 3,
+              }"
+              class="table-operation-item"
+              v-has="'alertSilence_edit'"
+              :disabled="scope.row.state === 3"
+              ><i class="nz-icon nz-icon-edit"></i
+              ><span class="operation-dropdown-text">{{
+                $t("overall.edit")
+              }}</span></el-dropdown-item
+            >
+            <el-dropdown-item
+              v-has="'alertSilence_edit'"
+              :command="['copy', scope.row]"
+              ><i class="nz-icon nz-icon-override"></i
+              ><span class="operation-dropdown-text">{{
+                $t("overall.duplicate")
+              }}</span></el-dropdown-item
+            >
+            <el-dropdown-item
+              v-has="'alertSilence_expire'"
+              :command="['delete', scope.row]"
+              ><i class="nz-icon nz-icon-delete"></i
+              ><span class="operation-dropdown-text">{{
+                $t("buttons.delete")
+              }}</span></el-dropdown-item
+            >
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </el-table-column>
-    <template  slot="empty">
+    <template slot="empty">
       <div v-if="!loading" class="table-no-data">
         <svg class="icon" aria-hidden="true">
           <use xlink:href="#nz-icon-no-data-list"></use>
@@ -107,114 +169,130 @@
 </template>
 
 <script>
-import table from '@/components/common/mixin/table'
-import { calcDurationByStringTimeB } from '@/components/common/js/tools'
-import nzAlertTag from '../../../page/alert/nzAlertTag'
-import { sameLabels } from '@/components/common/js/constants'
+import table from "@/components/common/mixin/table";
+import { calcDurationByStringTimeB } from "@/components/common/js/tools";
+import nzAlertTag from "../../../page/alert/nzAlertTag";
+import { sameLabels } from "@/components/common/js/constants";
 export default {
-  name: 'alertSilenceTable',
+  name: "alertSilenceTable",
   components: {
-    nzAlertTag
+    nzAlertTag,
   },
   mixins: [table],
   props: {
     loading: Boolean,
-    nowTime: {}
+    nowTime: {},
   },
-  data () {
+  data() {
     return {
       /* 表格相关 */
       tableTitle: [
         {
-          label: 'ID',
-          prop: 'id',
+          label: "ID",
+          prop: "id",
           show: true,
           width: 80,
-          sortable: 'custom'
+          sortable: "custom",
         },
         {
-          label: this.$t('alert.silence.name'),
-          prop: 'name',
+          label: this.$t("alert.silence.name"),
+          prop: "name",
           show: true,
-          minWidth: 150
-        }, {
-          label: this.$t('alert.silence.matchers'),
-          prop: 'matchers',
+          minWidth: 150,
+        },
+        {
+          label: this.$t("alert.silence.matchers"),
+          prop: "matchers",
           show: true,
           minWidth: 200,
-          sortable: 'custom'
-        }, {
-          label: this.$t('alert.silence.startTime'),
-          prop: 'startAt',
+          sortable: "custom",
+        },
+        {
+          label: this.$t("alert.alert"),
+          prop: "alertNum",
+          show: true,
+          minWidth: 120,
+          sortable: "custom",
+        },
+        {
+          label: this.$t("alert.silence.startTime"),
+          prop: "startAt",
           show: true,
           width: 300,
-          sortable: 'custom'
-        }, {
-          label: this.$t('config.terminallog.duration'),
-          prop: 'duration',
+          sortable: "custom",
+        },
+        {
+          label: this.$t("config.terminallog.duration"),
+          prop: "duration",
           show: true,
-          width: 120
-        }, {
-          label: this.$t('alert.silence.remark'),
-          prop: 'remark',
+          width: 120,
+        },
+        {
+          label: this.$t("alert.silence.remark"),
+          prop: "remark",
           show: true,
-          width: 120
-        }, {
-          label: this.$t('alert.silence.upTime'),
-          prop: 'utime',
+          width: 120,
+        },
+        {
+          label: this.$t("alert.silence.upTime"),
+          prop: "utime",
           show: false,
-          width: 300
-        }, {
-          label: this.$t('alert.silence.state'),
-          prop: 'state',
+          width: 300,
+        },
+        {
+          label: this.$t("alert.silence.state"),
+          prop: "state",
           show: true,
-          width: 120
-        }
-      ]
-    }
+          width: 120,
+        },
+      ],
+    };
   },
   computed: {
-    getDuration () {
+    getDuration() {
       return function (record) {
         if (record.endAt) {
-          return calcDurationByStringTimeB(record.startAt, record.endAt)
+          return calcDurationByStringTimeB(record.startAt, record.endAt);
         }
-        return calcDurationByStringTimeB(record.startAt, this.utcTimeToTimezoneStr(this.nowTime))
-      }
+        return calcDurationByStringTimeB(
+          record.startAt,
+          this.utcTimeToTimezoneStr(this.nowTime)
+        );
+      };
     },
-    tagType () {
+    tagType() {
       return (key) => {
-        if (sameLabels.find(item => item === key)) {
-          return 'normal'
+        if (sameLabels.find((item) => item === key)) {
+          return "normal";
         } else {
-          return 'info'
+          return "info";
         }
-      }
-    }
+      };
+    },
   },
   methods: {
-    labelsSort (obj) {
-      obj = obj || []
-      const buildIn = sameLabels
-      if (typeof obj === 'string') obj = JSON.parse(obj)
-      const labels = JSON.parse(JSON.stringify(obj))
-      const result = []
-      const result2 = []
+    labelsSort(obj) {
+      obj = obj || [];
+      const buildIn = sameLabels;
+      if (typeof obj === "string") obj = JSON.parse(obj);
+      const labels = JSON.parse(JSON.stringify(obj));
+      const result = [];
+      const result2 = [];
       for (const key of buildIn) {
-        labels.forEach(item => {
+        labels.forEach((item) => {
           if (item.name === key) {
-            result.push(item)
+            result.push(item);
           }
-        })
+        });
       }
-      labels.forEach(item => {
+      labels.forEach((item) => {
         if (buildIn.indexOf(item.name) === -1) {
-          result2.push(item)
+          result2.push(item);
         }
-      })
+      });
       // console.log([...result, ...result2])
-      return [...result, ...result2]
-    }
-  }
-}
+      return [...result, ...result2];
+    },
+  },
+};
 </script>
diff --git a/nezha-fronted/src/components/page/alert/alertSilence.vue b/nezha-fronted/src/components/page/alert/alertSilence.vue
index 68d79afae..3d286c4df 100644
--- a/nezha-fronted/src/components/page/alert/alertSilence.vue
+++ b/nezha-fronted/src/components/page/alert/alertSilence.vue
@@ -10,11 +10,24 @@
       @search="search"
     >
       <template v-slot:top-tool-right>
-        <button id="roles-add" v-has="'alertSilence_add'" :title="$t('overall.createAlertSilence')" class="top-tool-btn margin-r-10"
-                type="button" @click="add">
+        <button
+          id="roles-add"
+          v-has="'alertSilence_add'"
+          :title="$t('overall.createAlertSilence')"
+          class="top-tool-btn margin-r-10"
+          type="button"
+          @click="add"
+        >
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <delete-button id="role-list-batch-delete" v-has="'alertSilence_expire'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button
+          id="role-list-batch-delete"
+          v-has="'alertSilence_expire'"
+          :api="url"
+          :delete-objs="batchDeleteObjs"
+          @after="getTableData"
+          @before="delFlag = true"
+        ></delete-button>
       </template>
       <template v-slot:default="slotProps">
         <alert-silence-table
@@ -31,28 +44,59 @@
           @edit="edit"
           @copy="copy"
           @orderBy="tableDataSort"
+          @queryMessage="queryMessage"
           @reload="getTableData"
           @selectionChange="selectionChange"
-          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></alert-silence-table>
+          @showBottomBox="
+            (targetTab, object) => {
+              $refs.dataList.showBottomBox(targetTab, object);
+            }
+          "
+        ></alert-silence-table>
       </template>
       <!-- 分页组件 -->
       <template v-slot:pagination>
-        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+        <Pagination
+          ref="Pagination"
+          :pageObj="pageObj"
+          :tableId="tableId"
+          @pageNo="pageNo"
+          @pageSize="pageSize"
+        ></Pagination>
       </template>
     </nz-data-list>
     <transition name="right-box">
-      <alert-silence-box v-if="rightBox.show" :alert-silence="object" @close="closeRightBox"></alert-silence-box>
+      <alert-silence-box
+        v-if="rightBox.show"
+        :alert-silence="object"
+        @close="closeRightBox"
+      ></alert-silence-box>
     </transition>
     <!--导出-->
     <div class="export-xlsx">
-      <el-dialog :modal-append-to-body='false' :show-close="true" :title="importBox.title"
-                 :visible.sync="importBox.show" class="nz-dialog" width="300px" @close="closeDialog">
+      <el-dialog
+        :modal-append-to-body="false"
+        :show-close="true"
+        :title="importBox.title"
+        :visible.sync="importBox.show"
+        class="nz-dialog"
+        width="300px"
+        @close="closeDialog"
+      >
         <div class="upload-body">
-          <button id="alert-msg-exportcur" class="el-button el-button--default el-button--small" @click="exportCur">
-            <span>{{$t('overall.exportCur')}}</span>
+          <button
+            id="alert-msg-exportcur"
+            class="el-button el-button--default el-button--small"
+            @click="exportCur"
+          >
+            <span>{{ $t("overall.exportCur") }}</span>
           </button>
-          <button id="alert-msg-exportall" class="el-button el-button--default el-button--small" @click="exportAll">
-            <span>{{$t('overall.exportAll')}}</span>
+          <button
+            id="alert-msg-exportall"
+            class="el-button el-button--default el-button--small"
+            @click="exportAll"
+          >
+            <span>{{ $t("overall.exportAll") }}</span>
           </button>
         </div>
       </el-dialog>
@@ -61,232 +105,266 @@
 </template>
 
 <script>
-import bus from '@/libs/bus'
-import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
-import deleteButton from '@/components/common/deleteButton'
-import nzDataList from '@/components/common/table/nzDataList'
-import dataListMixin from '@/components/common/mixin/dataList'
-import alertSilenceTable from '@/components/common/table/alert/alertSilenceTable'
-import routerPathParams from '@/components/common/mixin/routerPathParams'
+import bus from "@/libs/bus";
+import alertSilenceBox from "@/components/common/rightBox/alertSilenceBox";
+import deleteButton from "@/components/common/deleteButton";
+import nzDataList from "@/components/common/table/nzDataList";
+import dataListMixin from "@/components/common/mixin/dataList";
+import alertSilenceTable from "@/components/common/table/alert/alertSilenceTable";
+import routerPathParams from "@/components/common/mixin/routerPathParams";
 
 export default {
-  name: 'alertSilence',
+  name: "alertSilence",
   components: {
     alertSilenceTable,
     deleteButton,
     nzDataList,
-    alertSilenceBox
+    alertSilenceBox,
   },
   mixins: [dataListMixin, routerPathParams],
-  data () {
+  data() {
     return {
-      url: 'alert/silence',
-      tableId: 'silenceTable',
+      url: "alert/silence",
+      tableId: "silenceTable",
       /* 搜素相关 */
-      searchMsg: { // 给搜索框子组件传递的信息
+      searchMsg: {
+        // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [
           {
-            name: 'ID',
-            type: 'input',
-            label: 'ids',
-            disabled: false
-          }, {
-            name: this.$t('alert.silence.matchers'),
-            type: 'input',
-            label: 'matchers',
-            disabled: false
-          }
-        ]
+            name: "ID",
+            type: "input",
+            label: "ids",
+            disabled: false,
+          },
+          {
+            name: this.$t("alert.silence.matchers"),
+            type: "input",
+            label: "matchers",
+            disabled: false,
+          },
+        ],
       },
       // 导出相关
-      importBox: { show: false, title: this.$t('overall.exportExcel') },
-      deleteBox: { show: false, ids: '', remark: '', state: 2 },
+      importBox: { show: false, title: this.$t("overall.exportExcel") },
+      deleteBox: { show: false, ids: "", remark: "", state: 2 },
       // 创建修改相关
       blankObject: {
-        id: '',
-        startAt: '',
-        endAt: '',
-        ruleId: '',
-        type: 'asset',
-        linkId: '',
-        remark: '',
+        id: "",
+        startAt: "",
+        endAt: "",
+        ruleId: "",
+        type: "asset",
+        linkId: "",
+        remark: "",
         time: [],
-        matchers: [
-          { name: '', value: '', regex: 0 }
-        ],
-        name: ''
+        matchers: [{ name: "", value: "", regex: 0 }],
+        name: "",
       },
-      nowTime: ''
-    }
+      nowTime: "",
+    };
   },
-  mounted () {
-    this.initEvent()
+  mounted() {
+    this.initEvent();
   },
   methods: {
-    closeRightBox (refresh) {
-      this.rightBox.show = false
-      this.copyFlag = false
-      this.object = {}
+    queryMessage(alertRule) {
+      console.log(alertRule);
+      this.$refs.dataList.showBottomBox('alertRuleAlertMessage', alertRule)
+    },
+    closeRightBox(refresh) {
+      this.rightBox.show = false;
+      this.copyFlag = false;
+      this.object = {};
       if (refresh) {
-        this.delFlag = true
-        this.getTableData()
+        this.delFlag = true;
+        this.getTableData();
       }
     },
-    initEvent () {
-      bus.$on('alert-rule-list-change', () => {
-        this.getTableData()
-      })
-      bus.$on('dc-list-change', () => {
-        this.getTableData()
-      })
-      bus.$on('alert-message-change', () => {
-        this.getTableData()
-      })
+    initEvent() {
+      bus.$on("alert-rule-list-change", () => {
+        this.getTableData();
+      });
+      bus.$on("dc-list-change", () => {
+        this.getTableData();
+      });
+      bus.$on("alert-message-change", () => {
+        this.getTableData();
+      });
     },
-    exportCur () {
-      const searchLabel = Object.assign({}, this.searchLabel)
-      this.$set(searchLabel, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
-      this.exportExcel(searchLabel)
-      this.closeDialog()
+    exportCur() {
+      const searchLabel = Object.assign({}, this.searchLabel);
+      this.$set(
+        searchLabel,
+        "language",
+        localStorage.getItem("nz-language")
+          ? localStorage.getItem("nz-language")
+          : "en"
+      );
+      this.exportExcel(searchLabel);
+      this.closeDialog();
     },
-    exportAll () {
-      const temp = JSON.parse(JSON.stringify(this.searchLabel))
-      temp.pageSize = -1
-      this.$set(temp, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
-      this.exportExcel(temp)
-      this.closeDialog()
+    exportAll() {
+      const temp = JSON.parse(JSON.stringify(this.searchLabel));
+      temp.pageSize = -1;
+      this.$set(
+        temp,
+        "language",
+        localStorage.getItem("nz-language")
+          ? localStorage.getItem("nz-language")
+          : "en"
+      );
+      this.exportExcel(temp);
+      this.closeDialog();
     },
-    closeDialog () {
-      this.importBox.show = false
-      this.deleteBox.show = false
+    closeDialog() {
+      this.importBox.show = false;
+      this.deleteBox.show = false;
     },
-    getTableData (params) {
+    getTableData(params) {
       if (params && Object.keys(params).length > 0) {
         for (const key in params) {
-          this.$set(this.searchLabel, key, params[key])
+          this.$set(this.searchLabel, key, params[key]);
         }
       }
       if (this.orderBy) {
-        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+        this.$set(this.searchLabel, "orderBy", this.orderBy);
       } else {
-        delete this.searchLabel.orderBy
+        delete this.searchLabel.orderBy;
       }
-      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
-      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
-      this.tools.loading = true
+      this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+      this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+      this.tools.loading = true;
       const alertRuleParam = {
         ...this.searchLabel,
-        ...this.searchCheckBox
-      }
-      const path = this.fromRoute.alertSilence
-      this.updatePath(alertRuleParam, path)
-      this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
-        this.tools.loading = false
-        this.nowTime = this.utcTimeToTimezoneStr(response.time)
-        if (response.code === 200) {
-          for (let i = 0; i < response.data.list.length; i++) {
-            response.data.list[i].status = response.data.list[i].status + ''
-            // response.data.list[i].startAt = bus.UTCTimeToConfigTimezone(response.data.list[i].startAt)
-            // response.data.list[i].endAt = bus.UTCTimeToConfigTimezone(response.data.list[i].endAt)
-          }
-          this.tableData = response.data.list
-          this.pageObj.total = response.data.total
-          if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
-            this.$nextTick(() => {
-              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
-              this.toTopBtnHandler(this.scrollbarWrap)
-            })
+        ...this.searchCheckBox,
+      };
+      const path = this.fromRoute.alertSilence;
+      this.updatePath(alertRuleParam, path);
+      this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(
+        (response) => {
+          this.tools.loading = false;
+          this.nowTime = this.utcTimeToTimezoneStr(response.time);
+          if (response.code === 200) {
+            for (let i = 0; i < response.data.list.length; i++) {
+              response.data.list[i].status = response.data.list[i].status + "";
+              // response.data.list[i].startAt = bus.UTCTimeToConfigTimezone(response.data.list[i].startAt)
+              // response.data.list[i].endAt = bus.UTCTimeToConfigTimezone(response.data.list[i].endAt)
+            }
+            this.tableData = response.data.list;
+            this.pageObj.total = response.data.total;
+            if (
+              !this.scrollbarWrap &&
+              this.$refs.dataTable &&
+              this.$refs.dataTable.$refs.dataTable
+            ) {
+              this.$nextTick(() => {
+                this.scrollbarWrap =
+                  this.$refs.dataTable.$refs.dataTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollbarWrap);
+              });
+            }
           }
         }
-      })
+      );
     },
-    add () {
-      this.blankObject.startAt = bus.getOffsetTimezoneData()
-      this.blankObject.endAt = bus.getOffsetTimezoneData(1)
-      this.object = JSON.parse(JSON.stringify(this.blankObject))
-      this.rightBox.show = true
+    add() {
+      this.blankObject.startAt = bus.getOffsetTimezoneData();
+      this.blankObject.endAt = bus.getOffsetTimezoneData(1);
+      this.object = JSON.parse(JSON.stringify(this.blankObject));
+      this.rightBox.show = true;
     },
-    edit (u, copyFlag) {
-      this.$get(`${this.url}/${u.id}`).then(response => {
+    edit(u, copyFlag) {
+      this.$get(`${this.url}/${u.id}`).then((response) => {
         if (response.code === 200) {
           this.object = {
             ...response.data,
             matchers: JSON.parse(response.data.matchers),
             startAt: bus.UTCTimeToConfigTimezone(response.data.startAt),
-            endAt: bus.UTCTimeToConfigTimezone(response.data.endAt)
-          }
+            endAt: bus.UTCTimeToConfigTimezone(response.data.endAt),
+          };
           if (copyFlag) {
-            this.object.id = ''
-            this.object.name = this.object.name + '-copy'
+            this.object.id = "";
+            this.object.name = this.object.name + "-copy";
             if (this.object.name.length > 64) {
-              const length = this.object.name.length - 64
-              this.object.name = u.name.substring(0, u.name.length - length) + '-copy'
+              const length = this.object.name.length - 64;
+              this.object.name =
+                u.name.substring(0, u.name.length - length) + "-copy";
             }
           }
-          this.rightBox.show = true
+          this.rightBox.show = true;
         }
-      })
+      });
     },
-    copy (u) {
-      this.edit(u, true)
+    copy(u) {
+      this.edit(u, true);
     },
-    del (row) {
-      this.$confirm(this.$t('tip.confirmExpired'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
+    del(row) {
+      this.$confirm(this.$t("tip.confirmExpired"), {
+        confirmButtonText: this.$t("tip.yes"),
+        cancelButtonText: this.$t("tip.no"),
+        type: "warning",
       }).then(() => {
-        this.$delete(this.url + '?ids=' + row.id + '&state=' + this.state).then(response => {
-          if (response.code === 200) {
-            this.delFlag = true
-            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.getTableData()
-          } else {
-            this.$message.error(response.msg)
+        this.$delete(this.url + "?ids=" + row.id + "&state=" + this.state).then(
+          (response) => {
+            if (response.code === 200) {
+              this.delFlag = true;
+              this.$message({
+                duration: 2000,
+                type: "success",
+                message: this.$t("tip.deleteSuccess"),
+              });
+              this.getTableData();
+            } else {
+              this.$message.error(response.msg);
+            }
           }
-        })
-      })
-    }
+        );
+      });
+    },
   },
-  created () {
+  created() {
     const searchKeys = {
       // key: path 键
       // value: vue set 参数
-      pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
-      pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
-      orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
+      pageNo: { target: this.pageObj, propertyName: "pageNo", type: "number" },
+      pageSize: {
+        target: this.pageObj,
+        propertyName: "pageSize",
+        type: "number",
+      },
+      orderBy: { target: this.$data, propertyName: "orderBy", type: "string" },
       ids: {
         target: this.searchLabel,
         isSearchInput: true,
-        propertyName: 'ids',
-        type: 'string',
+        propertyName: "ids",
+        type: "string",
         defaultJson: {
           disabled: false,
-          id: 'ids',
-          label: 'ids',
-          name: 'ID',
-          type: 'input',
-          val: ''
+          id: "ids",
+          label: "ids",
+          name: "ID",
+          type: "input",
+          val: "",
         },
-        jsonKey: 'val'
+        jsonKey: "val",
       },
       matchers: {
         target: this.searchLabel,
         isSearchInput: true,
-        propertyName: 'matchers',
-        type: 'string',
+        propertyName: "matchers",
+        type: "string",
         defaultJson: {
           disabled: false,
-          label: 'matchers',
-          name: 'Matcher',
-          type: 'input',
-          val: ''
+          label: "matchers",
+          name: "Matcher",
+          type: "input",
+          val: "",
         },
-        jsonKey: 'val'
-      }
-    }
-    this.initQueryFromPath(searchKeys)
-  }
-}
+        jsonKey: "val",
+      },
+    };
+    this.initQueryFromPath(searchKeys);
+  },
+};
 </script>