From c1ed41785a7710edacd98380e0763f867216cb31 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Mon, 27 Sep 2021 15:39:23 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=20alert=20Rule=20=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E6=A1=86=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/common/rightBoxCommon.scss    |  6 ++++++
 .../src/components/common/elementSet.vue         |  5 +++--
 .../components/common/rightBox/alertRuleBox.vue  | 16 ++--------------
 .../common/rightBox/alertSilenceBox.vue          |  4 ++--
 .../src/components/common/table/nzDataList.vue   |  4 +++-
 .../components/page/config/operationRecord.vue   |  1 +
 .../page/config/system/apiKeyTable.vue           |  2 +-
 7 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
index 04dad3bfd..ead66c37f 100644
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -315,6 +315,12 @@
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
+.api-select.right-public-box-select-top.right-public-box-dropdown-top {
+  width: 210px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
 .dc-dropdown.right-public-box-dropdown-top,.right-public-box-select-top.right-public-box-dropdown-top {
   margin: 5px 0 !important;
 }
diff --git a/nezha-fronted/src/components/common/elementSet.vue b/nezha-fronted/src/components/common/elementSet.vue
index 9dcd22fc5..e4ea8a59d 100644
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/nezha-fronted/src/components/common/elementSet.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pop-custom" :class="{'pop-custom-top' : tableClass}" v-clickoutside="esc">
+  <div class="pop-custom" :class="{'pop-custom-top' : tableClass || operationTrue}" v-clickoutside="esc">
     <div class="pop-title">{{$t('overall.select')}}</div>
     <div class="pop-box custom-labels">
       <div style="height: 100%; overflow: auto;">
@@ -45,7 +45,8 @@ export default {
     originalTableTitle: Array, // 原始title
     tableId: String,
     allowedAll: { default: false },
-    tableClass: Boolean
+    tableClass: Boolean,
+    operationTrue: Boolean
   },
   data () {
     return {
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index 270cb417b..5ab20669b 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -30,14 +30,13 @@
                 v-for="item in searchMetrics"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value"
-                style="width: 312px"></el-option>
+                :value="item.value"></el-option>
             </el-select>
           </el-form-item>
           <!--severity-->
           <el-form-item :label="$t('alert.severity')" class="severity-box half-form-item" prop="severityId">
             <el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
-              <el-option v-for="item in severityData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id" style="width: 312px">
+              <el-option v-for="item in severityData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
                 <div style="display: flex;justify-content: space-between;padding: 5px;">
                   <div><i :style="{color:item.color,'font-size':'12px'}" class="nz-icon nz-icon-circle"></i> {{item.name}}</div>
                   <div class="severity-item text-ellipsis" :title="item.remark">{{item.remark}}</div>
@@ -132,12 +131,10 @@
               size="small"
             >
               <el-option
-                style="width: 312px"
                 :label="$t('dashboard.panel.chartForm.lockList.on')"
                 :value="1">
               </el-option>
               <el-option
-                style="width: 312px"
                 :label="$t('dashboard.panel.chartForm.lockList.off')"
                 :value="0">
               </el-option>
@@ -169,12 +166,10 @@
               size="small"
             >
               <el-option
-                style="width: 312px"
                 :label="$t('dashboard.panel.chartForm.lockList.on')"
                 :value="1">
               </el-option>
               <el-option
-                style="width: 312px"
                 :label="$t('dashboard.panel.chartForm.lockList.off')"
                 :value="0">
               </el-option>
@@ -192,12 +187,10 @@
               size="small"
             >
               <el-option
-                style="width: 312px"
                 :label="$t('dashboard.panel.chartForm.lockList.on')"
                 :value="1">
               </el-option>
               <el-option
-                style="width: 312px"
                 :label="$t('dashboard.panel.chartForm.lockList.off')"
                 :value="0">
               </el-option>
@@ -217,7 +210,6 @@
               size="small"
             >
               <el-option
-                style="width: 628px"
                 v-for="item in weekList"
                 :key="item.value"
                 :label="item.label"
@@ -264,12 +256,10 @@
               @change="receiverAndNotifyValidate"
             >
               <el-option
-                style="width: 312px"
                 :label="$t('dashboard.panel.chartForm.lockList.on')"
                 :value="1">
               </el-option>
               <el-option
-                style="width: 312px"
                 :label="$t('dashboard.panel.chartForm.lockList.off')"
                 :value="0">
               </el-option>
@@ -288,12 +278,10 @@
               @change="receiverAndNotifyValidate"
             >
               <el-option
-                style="width: 312px"
                 :label="$t('dashboard.panel.chartForm.lockList.on')"
                 :value="1">
               </el-option>
               <el-option
-                style="width: 312px"
                 :label="$t('dashboard.panel.chartForm.lockList.off')"
                 :value="0">
               </el-option>
diff --git a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
index cf19dab97..690be8189 100644
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
@@ -39,7 +39,7 @@
                 <span class="datepicker-title">{{ $t("overall.startTime") }}</span>
                 <my-date-picker ref="calendar" v-model="editAlertSilence.startAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')"
                                 align="right" class=" " format="yyyy/MM/dd HH:mm:ss"
-                                popper-class="panel-time-picker-popper right-box-public-alert-dropdown"
+                                popper-class="panel-time-picker-popper right-box-select-top"
                                 prefix-icon=" "
                                 size="mini"
                                 type="datetime"
@@ -51,7 +51,7 @@
                 <span class="datepicker-title">{{ $t("overall.endTime") }}</span>
                 <my-date-picker ref="calendar" v-model="editAlertSilence.endAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')"
                                 align="right" class=" " format="yyyy/MM/dd HH:mm:ss"
-                                popper-class="panel-time-picker-popper right-box-public-alert-dropdown"
+                                popper-class="panel-time-picker-popper right-box-select-top"
                                 prefix-icon=" "
                                 size="mini"
                                 type="datetime"
diff --git a/nezha-fronted/src/components/common/table/nzDataList.vue b/nezha-fronted/src/components/common/table/nzDataList.vue
index 03ca78f7b..5ad17cb4d 100644
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -40,6 +40,7 @@
           ref="customTableTitle"
           :custom-table-title="customTableTitle"
           :original-table-title="tableTitle"
+          :operation-true="operationRecord"
           @close="tools.showCustomTableTitle = false"
           @update="updateCustomTableTitle"
         ></element-set>
@@ -92,7 +93,8 @@ export default {
       type: Object
     },
     nzTableHeightOffset: Number,
-    searchRight: Boolean
+    searchRight: Boolean,
+    operationRecord: Boolean
   },
   computed: {
     nzTableHeight () {
diff --git a/nezha-fronted/src/components/page/config/operationRecord.vue b/nezha-fronted/src/components/page/config/operationRecord.vue
index 30081d4f4..49aef88a3 100644
--- a/nezha-fronted/src/components/page/config/operationRecord.vue
+++ b/nezha-fronted/src/components/page/config/operationRecord.vue
@@ -5,6 +5,7 @@
       :layout="layout"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.operationLog"
+      :operation-record="true"
       @search="search"
       :search-msg="searchMsg">
       <template v-slot:top-tool-left>
diff --git a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
index 4fa3fe786..8ee73caf6 100644
--- a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
+++ b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
@@ -41,7 +41,7 @@
             </template>
             <template v-if="item.prop == 'role'">
               <el-popover :content="rules.roleId.message" placement="top" trigger="manual" v-model="rules.roleId.switch" popper-class="small-pop warn-pop" @after-enter="popShow(rules.roleId)">
-                <el-select v-model="scope.row[item.prop]" size="small" value-key="id" slot="reference" popper-class="right-public-box-select-top right-public-box-dropdown-top role-system-table">
+                <el-select v-model="scope.row[item.prop]" size="small" value-key="id" slot="reference" popper-class="api-select right-public-box-select-top right-public-box-dropdown-top role-system-table">
                   <template v-for="role in roles" >
                     <el-option :label="role.name" :value="role"></el-option>
                   </template>