style ： silence 样式调整

nezha-fronted/src/assets/css/common.scss

@@ -100,6 +100,10 @@
   line-height: 20px;
   font-weight: 400;
   margin-top: 3px;
+  max-width: 30%;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
 }
 .timezone-offset{
   display: inline-block;

nezha-fronted/src/components/common/language/cn.js

@@ -290,7 +290,7 @@ const cn = {
         tooltip: 'Tooltip',
         displayChart: '图表',
         aggregation: 'Aggregation',
-        varType: 'Vartype',
+        varType: 'Variable type',
         pid: 'Chart 模板',
         selectAsset: '请选择Asset',
         selectEndpoint: '请选择Endpoint'
@@ -1040,12 +1040,12 @@ const cn = {
       create: '创建表达式模板',
       expressionError: '请填写表达式',
       type: 'Type',
-      varType: 'varType'
+      varType: 'Variable type'
     },
     chartTemp: {
       chartTemp: 'Chart 模板',
       type: 'Type',
-      varType: 'varType'
+      varType: 'Variable type'
     }
   },
   alert: {
@@ -1107,6 +1107,7 @@ const cn = {
       }
     },
     silence: {
+      name:'名称',
       silence: '告警静默',
       create: '创建告警静默',
       edit: '修改告警静默',

nezha-fronted/src/components/common/language/en.js

@@ -299,7 +299,7 @@ const en = {
         tooltip: 'Tooltip',
         displayChart: 'Display chart',
         aggregation: 'Aggregation',
-        varType: 'Vartype',
+        varType: 'Variable type',
         pid: 'Chart template',
         selectAsset: 'Please select the Asset',
         selectEndpoint: 'Please select the Endpoint'
@@ -1060,12 +1060,12 @@ const en = {
       create: 'New expression template',
       expressionError: 'Please fill in the "expression" value',
       type: 'Type',
-      varType: 'varType'
+      varType: 'Variable type'
     },
     chartTemp: {
       chartTemp: 'Chart template',
       type: 'Type',
-      varType: 'varType'
+      varType: 'Variable type'
     }
   },
   alert: {
@@ -1127,6 +1127,7 @@ const en = {
       },
     },
     silence: {
+      name:'Name',
       silence: 'Alert silence',
       create: 'New alert silence',
       edit: 'Edit alert silence',

nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue

@@ -169,8 +169,8 @@
         </div>
       </div>
       <div class="el-picker-panel__footer" v-if="showTime">
-        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-area" :title='timezone'>{{timezone}}</span>
-        <span class="timezone-offset">{{timezoneOffset}}</span>
+        <span class="timezone-offset">UTC {{timezoneOffset}}</span>
 <!--        <el-button-->
 <!--          size="mini"-->
 <!--          type="text"-->

nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue

@@ -123,8 +123,8 @@
       <div
         class="el-picker-panel__footer"
         v-show="footerVisible && currentView === 'date'">
-        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-area" :title='timezone'>{{timezone}}</span>
-        <span class="timezone-offset">{{timezoneOffset}}</span>
+        <span class="timezone-offset">UTC {{timezoneOffset}}</span>
         <el-button
           size="mini"
           type="text"

nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue

@@ -73,8 +73,8 @@
           </div>
         </div>
         <div class="el-picker-panel__footer" v-if="showTime">
-          <span class="timezone-area">{{timezone}}</span>
+          <span class="timezone-area" :title='timezone'>{{timezone}}</span>
-          <span class="timezone-offset">{{timezoneOffset}}</span>
+          <span class="timezone-offset">UTC {{timezoneOffset}}</span>
         </div>
       </div>
     </div>

nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue

@@ -41,8 +41,8 @@
         </div>
       </div>
       <div class="el-time-panel__footer">
-        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-area" :title='timezone'>{{timezone}}</span>
-        <span class="timezone-offset">{{timezoneOffset}}</span>
+        <span class="timezone-offset">UTC {{timezoneOffset}}</span>
         <button
           type="button"
           class="el-time-panel__btn cancel"

nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue

@@ -16,8 +16,8 @@
         </time-spinner>
       </div>
       <div class="el-time-panel__footer">
-<!--        <span class="timezone-area">{{timezone}}</span>-->
+<!--        <span class="timezone-area" :title='timezone'>{{timezone}}</span>-->
-<!--        <span class="timezone-offset">{{timezoneOffset}}</span>-->
+<!--        <span class="timezone-offset">UTC {{timezoneOffset}}</span>-->
         <button
           type="button"
           class="el-time-panel__btn cancel"

nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue

@@ -13,6 +13,13 @@
     <div class="right-box-form-box right-box__container">
       <el-form class="right-box-form right-box-form-left" :model="editAlertSilence" label-position="top"
                label-width="120px" :rules="rules" ref="alertSilenceForm">
+        <el-form-item :label='$t("alert.silence.name")' prop="name" class="range-name">
+          <el-input
+            :placeholder="''"
+            size="small"
+            v-model="editAlertSilence.name">
+          </el-input>
+        </el-form-item>
         <el-form-item :label='$t("alert.silence.time")' prop="time" class="range-time">
           <div>
             <el-radio-group v-model="rangeTime" size="small" @change="rangeTimeChange">
@@ -28,7 +35,7 @@
           <div class="datepicker">
             <div class="datepicker-box">
               <span class="datepicker-title">start time</span>
-              <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
+              <my-date-picker prefix-icon=" " class=" " size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'startAt')}" v-model="editAlertSilence.startAt"
                               type="datetime"
                               :clearable="false"
@@ -40,7 +47,7 @@
             </div>
             <div class="datepicker-box">
               <span class="datepicker-title">end time</span>
-              <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
+              <my-date-picker prefix-icon=" " class=" " size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'endAt')}" v-model="editAlertSilence.endAt"
                               type="datetime"
                               :clearable="false"
@@ -66,8 +73,8 @@
             </el-form-item>
             <span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeMatcher(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
           </div>
-          <div style="text-align: center">
+          <div style="text-align: center;" class="">
-               <span id="module-add-label" type="button" @click="addMatcher" class="right-box-form-add module-add-label" style="margin-right: 140px">
+               <span id="module-add-label" type="button" @click="addMatcher" class="right-box-form-add module-add-label right-box-form-minus-box module-add-label" style="">
               <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
             </span>
           </div>
@@ -166,6 +173,9 @@ export default {
           { required: true, trigger: 'change' },
           { validator: validate, trigger: 'change' }
         ],
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' },
+        ],
       },
       rangeTime: '',
       ruleList: [],
@@ -322,7 +332,7 @@ export default {
       width: 14.2%
     }
 
-    /deep/ .el-date-editor.el-range-editor.el-input__inner.panel-time-picker-hidden.el-date-editor--datetimerange.el-range-editor--mini {
+    /deep/ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
       width: 100%;
     }
 
@@ -397,4 +407,15 @@ export default {
   /deep/ .param-box-row-value{
     width: 50%;
   }
+  .module-add-label{
+    display: inline-block;
+    width: 300px;
+    height: 18px;
+    background: #FFFCF9;
+    border: 1px solid #FFE0BD;
+    border-radius: 2px;
+    text-align: center;
+    line-height: 18px;
+    margin-right: 80px;
+  }
 </style>

nezha-fronted/src/components/common/rightBox/moduleBox.vue

@@ -831,13 +831,13 @@ export default {
     min-height: 30px;
     overflow-x: hidden;
     border-radius: 2px;
-    padding: 0;
+    padding: 0 !important;
   }
   /deep/ .ti-tag{
     background-color: #f4f4f5;
     border-color: #e9e9eb;
     color: #909399;
-    padding: 2px 4px;
+    padding: 2px 4px!important;;
   }
 </style>
 <style>