feat：添加 新的 loading

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

@@ -4,6 +4,11 @@
   height: 100%;
   width: 100%;
   position: relative !important;
+  display: inline-block;
+}
+.my-loading-parent-icon {
+  height: auto;
+  width: auto;
 }
 .my-loading-box {
   height: 100%;
@@ -21,8 +26,6 @@
 }
 .my-loading{
   position: absolute;
-  width: 48px;
-  height: 48px;
   top: 50%;
   left: 50%;
   margin-top: 0;
@@ -217,3 +220,46 @@ loading-hide{
   }
 }
 /** END of bars1 */
+/**===== circle3 =====*/
+.circle3 {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 50px;
+  width: 50px;
+  margin: -25px 0 0 -25px;
+  border: 4px rgba(0, 0, 0, 0.25) solid;
+  border-top: 4px black solid;
+  border-right: 4px black solid;
+  border-bottom: 4px black solid;
+  border-radius: 50%;
+  -webkit-animation: spin3 1s infinite linear;
+  animation: spin3 1s infinite linear;
+}
+
+@-webkit-keyframes spin3 {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin3 {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+/** END of circle3 */

nezha-fronted/src/components/chart/chartList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" :loading="gridLayoutLoading" ref="layoutBox">
+  <div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" v-my-loading="gridLayoutLoading" ref="layoutBox">
     <grid-layout
       ref="layout"
       v-if="gridLayoutShow"

nezha-fronted/src/components/common/globalSearch/globalSearch.vue

@@ -2,7 +2,7 @@
   <div class="global-search-bac" v-if="globalShow" @click.self="close">
     <div class="global-search-box" :class="firstShow? '' : 'search-after'" @click.self="close">
       <div class="global-search-input" :class="firstShow? '' : 'search-after'">
-        <i class="nz-icon nz-icon-search" v-my-loading="loading"></i>
+        <i class="nz-icon nz-icon-search" v-my-loading:circle3.scaleMin.icon="loading"></i>
         <el-input v-model="searchStr" @input="searchAll" ref="searchStr" :placeholder="$t('globalSearch.placeholder')" @keydown.native="inputKeydown" clearable></el-input>
         <div @click="close" class="global-search-cancel">
           {{$t('overall.cancel')}}
@@ -129,7 +129,7 @@ export default {
     return {
       firstShow: true,
       searchStr: '',
-      loading: false,
+      loading: true,
       nextLoading: false,
       jumpLoading: false,
       selectIndex: '',

nezha-fronted/src/components/common/js/tools.js

@@ -117,22 +117,24 @@ function myLoadingFunction (el, binding, vnode) {
       dsBox = item
     }
   })
-  console.log(dsBox)
   if (dsBox) {
     return
   }
   //  若果是true创建一个div
   const divBox = document.createElement('div')
   divBox.setAttribute('class', 'my-loading-box')
-  const div = document.createElement('div')
-  div.setAttribute('class', className + ' my-loading')
-  div.style.textAlign = 'center'
+  if (binding.modifiers.icon) {
+    divBox.setAttribute('class', 'my-loading-box')
+  }
+  divBox.style.textAlign = 'center'
   if (binding.modifiers.scaleMin) {
-    div.style.transform = 'scale(0.5)'
+    divBox.style.transform = 'scale(0.5)'
   }
   if (binding.modifiers.scaleMax) {
-    div.style.transform = 'scale(2)'
+    divBox.style.transform = 'scale(2)'
   }
+  const div = document.createElement('div')
+  div.setAttribute('class', className + ' my-loading')
   if (className === 'bars1') {
     const newDiv1 = document.createElement('span')
     const newDiv2 = document.createElement('span')
@@ -145,6 +147,9 @@ function myLoadingFunction (el, binding, vnode) {
     div.appendChild(newDiv4)
     div.appendChild(newDiv5)
   }
+  // if (className === 'circle3') {
+  //
+  // }
   divBox.appendChild(div)
   //  插入到被绑定的元素内部
   el.appendChild(divBox)
@@ -166,13 +171,16 @@ function myLoadingFunctionUpdate (el, binding, vnode) {
     divBox.style.display = 'block'
     if (elClassname.indexOf('my-loading-parent--relative') === -1) {
       elClassname.push('my-loading-parent--relative')
+      if (binding.modifiers.icon) {
+        elClassname.push('my-loading-parent-icon')
+      }
       el.setAttribute('class', elClassname.join(' '))
     }
   } else {
     divBox.style.display = 'none'
     //  去掉div  去掉样式  去掉定位
     if (elClassname.indexOf('my-loading-parent--relative') !== -1) {
-      elClassname = elClassname.filter(item => item !== 'my-loading-parent--relative')
+      elClassname = elClassname.filter(item => item !== 'my-loading-parent--relative' && item !== 'my-loading-parent-icon')
       el.setAttribute('class', elClassname.join(' '))
     }
   }