NEZ-289 perf: 标题色、endpointstat错误数值修正

nezha-fronted/src/components/charts/chart-list.vue

@@ -193,6 +193,13 @@
       start (event) {
         console.log('start', event, this.dataList);
         event.item.querySelector('.chartTitle').style.background = '#d8dce1';
+        let projectAndAssetFeatureInfos = event.item.querySelectorAll(".feature-content");
+        if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
+          projectAndAssetFeatureInfos.forEach(item => {
+            item.classList.remove("unfold");
+            item.classList.remove("fold");
+          });
+        }
         this.dataListDragTmp = [...this.dataList];
       },
       end (event) {

nezha-fronted/src/components/charts/chart-project-info.vue

@@ -33,7 +33,7 @@
                     <span><i :class="{'el-icon-caret-right':hideBasic,'el-icon-caret-bottom':!hideBasic}"></i></span>
                     <span>{{$t('project.chart.basicTitle')}}</span>
                   </div>
-                  <div class="basic-content basic-content-project" :class="{'fold':hideBasic, 'unfold':!hideBasic}">
+                  <div class="basic-content basic-content-project init-no-animation" ref="basic">
                     <template v-if="projectInfos.basic && Object.keys(projectInfos.basic).length>0">
                       <div v-for="(item,index) in basicKey" :key="index" class="content-item">
                         <div class="content-item-key item-tip" :id="'basicKey' + index">
@@ -61,7 +61,7 @@
                     <span><i :class="{'el-icon-caret-right': showModuleIds.indexOf(module.id) == -1,'el-icon-caret-bottom': showModuleIds.indexOf(module.id) > -1}"></i></span>
                     <span>{{$t('project.module.module')}}：{{module.name}}</span>
                   </div>
-                  <div class="feature-content feature-content-project" :class="{'fold': showModuleIds.indexOf(module.id) == -1, 'unfold': showModuleIds.indexOf(module.id) > -1}">
+                  <div class="feature-content feature-content-project" :ref="'module' + module.id">
                     <div v-for="(item,index) in moduleKey" :key="index" class="content-item">
                       <div class="content-item-key item-tip" :id="'featureKey' + module.id + '-' + index">
                         <span>{{item.label}}</span>
@@ -69,9 +69,9 @@
                       </div>
                       <div class="content-item-value" v-if="item.prop == 'endpointStat'">
                         <img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
-                        <span>{{projectInfos.basic.alertStat[0]}}</span>&nbsp;&nbsp;
+                        <span>{{module.endpointStat[0]}}</span>&nbsp;&nbsp;
                         <img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
-                        <span>{{projectInfos.basic.alertStat[1]}}</span>&nbsp;&nbsp;
+                        <span>{{module.endpointStat[1]}}</span>&nbsp;&nbsp;
                       </div>
                       <div class="content-item-value" v-else-if="item.prop == 'alertStat'">
                         <div class="active-icon dark-red"></div>
@@ -238,13 +238,24 @@
       },
       hideElement:function(type){
         if(type ==  'basic'){
-          this.hideBasic=!this.hideBasic;
+          if (this.hideBasic) {
-        }else{
+            this.$refs.basic.classList.add("unfold");
-          let index = this.showModuleIds.indexOf(type);
+            this.$refs.basic.classList.remove("fold");
-          if (index == -1) {
-            this.showModuleIds.push(type);
           } else {
-            this.showModuleIds.splice(index, 1);
+            this.$refs.basic.classList.add("fold");
+            this.$refs.basic.classList.remove("unfold");
+          }
+          this.hideBasic = !this.hideBasic;
+        }else{
+          let dom = this.$refs['module' + type][0];
+          if (dom.classList.contains("unfold")) {
+            dom.classList.remove("unfold");
+            dom.classList.add("fold");
+          } else if (dom.classList.contains("fold")) {
+            dom.classList.remove("fold");
+            dom.classList.add("unfold");
+          } else if (!dom.classList.contains("unfold") && !dom.classList.contains("fold")) {
+            dom.classList.add("unfold");
           }
         }
         setTimeout(()=>{

nezha-fronted/src/components/charts/chart.scss

@@ -209,7 +209,7 @@
       height: calc(100% - 10px);
     }
     .asset-info-content-title {
-      background-image: linear-gradient(#fafafa, #f0f0f0);
+      background-color: #efefef;
       font-size: 13px;
       color: #505255;
       padding-left: 2px;
@@ -224,6 +224,11 @@
       max-height: 0;
       visibility: hidden;
      }
+    .basic-content-project.init-no-animation {
+      opacity: 1;
+      max-height: 200px;
+      visibility: visible;
+    }
     .basic-content-project.fold, .feature-content-project.fold {
       animation-name: fold-200; //该动画定义在main.scss里
       animation-duration: 0.3s;
@@ -249,6 +254,9 @@
       visibility: visible;
     }
     .basic-content, .feature-content {
+      opacity: 0;
+      max-height: 0;
+      visibility: hidden;
       width: 100%;
       margin-bottom: 5px;
       box-sizing: border-box;

nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue

@@ -432,7 +432,7 @@
         immediate: true,
         handler(n, o) {
           setTimeout(() => {
-            if (n && !o || n.id != o.id) {
+            if ((n && !o) || n.id != o.id) {
               this.getTableData(n.id);
             }
           }, 500);