fix： dashboard变量样式调整

nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss

@@ -4,10 +4,13 @@
   z-index: 1;
   background: $--background-color-empty;
   padding-left: 10px;
-  padding-bottom: 5px;
+  margin-top: -5px;
+  flex-wrap: wrap;
   .panel-variables-content{
     display: flex;
     margin-right: 15px;
+    margin-bottom: 5px;
+    margin-top: 5px;
   }
   .variable-key{
     border: 1px solid $--border-color-light;
@@ -15,18 +18,27 @@
     background: $--background-color-2;
     padding: 3px 10px;
     border-radius: 4px 0 0 4px;
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   .choose-box {
-    overflow: hidden;
+    width: 150px;
-    width: calc(100% - 7px);
+    //position: relative;
-    white-space: nowrap;
+  }
-    max-width: 200px;
+  .choose-box .no-select {
-    text-overflow: ellipsis;
+    width: 150px;
-    padding-right: 5px;
-    height: 30px;
     border: 1px solid $--border-color-light;
+    background: $--background-color-empty;
+    box-sizing: border-box;
     border-left: none;
     padding-left: 8px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-right: 5px;
+    height: 32px;
     display: flex;
     align-items: center;
     .nz-icon-arrow-down6{
@@ -34,6 +46,13 @@
       color: $--color-text-secondary;
     }
   }
+  .choose-box .is-select{
+    width: 200px;
+    z-index: 1;
+    height: 32px;
+    position: relative;
+    //left: 0;
+  }
   .choose-box-content{
     flex: 1;
     white-space: nowrap;
@@ -46,8 +65,7 @@
 }
 
 .panel-variables{
-  min-width: 180px;
+   width: 200px;
-  max-width: 220px;
   .el-dropdown-menu__item {
     padding: 0 5px 0 20px;
     width: 100%;

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

@@ -18,7 +18,7 @@
             :key="key"
             @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
         </div>
-        <div class="el-picker-panel__body" style="min-width: auto">
+        <div class="el-picker-panel__body" style="min-width: 100%">
           <div class="el-date-range-picker__time-header" v-if="showTime">
             <span class="el-date-range-picker__editors-wrap">
               <span class="el-date-range-picker__time-picker-wrap">

nezha-fronted/src/components/common/panel/panelVariables.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="" class="panel-variables-box">
     <div v-for="(item,index) in labelArr" :key="index" v-if="item.show" class="panel-variables-content" style="display: flex">
-      <div class="variable-key">{{item.name}}</div>
+      <div class="variable-key" :title="item.name">{{item.name}}</div>
       <el-popover
         trigger="manual"
         placement="bottom-start"
@@ -15,12 +15,12 @@
           </li>
           <ul class="pop-list">
             <el-checkbox-group v-model="item.checked" @change="(value)=>{checkedChange(item,value)}" v-if="item.multi">
-              <li class="el-dropdown-menu__item" v-for="value in labelValue[item.name]" :key="value.value">
+              <li class="el-dropdown-menu__item" v-for="value in labelValue[item.name]" :key="value.value" :title="value.value">
                 <el-checkbox :label="value.value" >{{value.label}}</el-checkbox>
               </li>
             </el-checkbox-group>
             <div v-else>
-              <li class="el-dropdown-menu__item" v-for="(value, j) in labelValue[item.name]" :key="j" @click="selectLabelValue(item,value)">
+              <li class="el-dropdown-menu__item" v-for="(value, j) in labelValue[item.name]" :key="j" @click="selectLabelValue(item,value)" :title="value.value">
                 <div class="el-dropdown-menu__item-label" :class="value.value === item.checked[0] && !item.checkAll ? 'checked': ''">
                   {{value.label}}
                 </div>
@@ -29,10 +29,12 @@
           </ul>
         </ul>
         <div slot="reference" class="choose-box"  @click="triggerVisible(item)">
-          <div class="choose-box-content">
+          <div class="no-select" :class="item.visible? 'is-select': ''">
-            {{item.checked.map(value=> labelValue[item.name].find(labelObj=>labelObj.value === value).label).join(' + ')}}
+            <div class="choose-box-content" :title="item.checked.map(value=> labelValue[item.name].find(labelObj=>labelObj.value === value).label).join(' + ')">
+              {{item.checked.map(value=> labelValue[item.name].find(labelObj=>labelObj.value === value).label).join(' + ')}}
+            </div>
+            <i class="nz-icon nz-icon-arrow-down6"/>
           </div>
-          <i class="nz-icon nz-icon-arrow-down6"/>
         </div>
       </el-popover>
     </div>
@@ -95,7 +97,7 @@ export default {
       }
       const arrPromise = []
       this.labelValue = {}
-      this.labelArr.forEach((item, index) => {  // 根据变量的type类型 以及 expression 对应的值 查询不同的接口
+      this.labelArr.forEach((item, index) => { // 根据变量的type类型 以及 expression 对应的值 查询不同的接口
         this.labelValue[item.name] = []
         if (item.type === 'custom') {
           arrPromise.push('')
@@ -151,7 +153,6 @@ export default {
               const reg = isRegExp(this.labelArr[index].regex) ? eval(this.labelArr[index].regex) : new RegExp(this.labelArr[index].regex, 'g')
               let arr = []
               response.forEach(label => {
-                // console.log(reg.test(label.label))
                 if (reg.test(label.label)) {
                   const str = label.label.match(reg)
                   if (str.groups) {