perf: 优化detail折叠动画

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

@@ -24,12 +24,13 @@
         </div>
         <div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
           <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
-            <div v-for="(item, index) in detail" :key="index" style="padding: 0 15px;">
+            <div v-for="(item, index) in detail" :key="index" class="chart-sub">
               <div class="chart-sub-title" @click="hideElement(index)">
                 <span><i :class="{'el-icon-caret-right': show.indexOf(index) == -1,'el-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
                 <span>{{item.title}}</span>
               </div>
-              <div class="chart-sub-content" :class="{'init-no-animation': index == 0, 'fold-600': show.indexOf(index) == -1, 'unfold-600': show.indexOf(index) > -1}">
+              <el-collapse-transition>
+                <div class="chart-sub-content" v-show="show.indexOf(index) > -1">
                   <template v-for="(value, key, i) in item.data">
 
                     <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
@@ -194,6 +195,7 @@
                     </div>
                   </template>
                 </div>
+              </el-collapse-transition>
             </div>
           </el-scrollbar>
         </div>

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

@@ -1204,21 +1204,22 @@
           let step = bus.getStep(startTime, endTime);
           this.$nextTick(() => {
             let query = chartInfo.elements[0].expression;
-            this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step).then(response => {
+            this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step=5m').then(response => {
               if (response.status === 'success') {
                 if (response.data.result) {
                   let series = {
                     name: '',
                     symbol: 'emptyCircle',  //去掉点
-                    symbolSize: [2, 2],
+                    symbolSize: 6,
                     smooth: 0.2,  //曲线变平滑
-                    showSymbol: false,
+                    showSymbol: true,
                     data: [],
                     type: "line",
                     lineStyle: {
                       width: 1,
                       opacity: 0.9
                     },
+                    label: {show: true},
                     itemStyle: {
                       color: function(params) {
                         if (params.data[1] == "1") {

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

@@ -316,6 +316,13 @@
     .active-icon {
       margin: 0;
     }
+    .chart-sub {
+      padding: 0 15px;
+      margin-bottom: 5px;
+      :last-of-type {
+        margin-bottom: 0;
+      }
+    }
     .chart-sub-title {
       background-color: #efefef;
       font-size: 13px;
@@ -326,11 +333,7 @@
       user-select: none;
     }
     .chart-sub-content {
-      opacity: 0;
-      max-height: 0;
-      visibility: hidden;
       width: 100%;
-      margin-bottom: 5px;
       box-sizing: border-box;
       .content-item>div {
         display: inline-block;
@@ -443,59 +446,6 @@
         }
       }
     }
-    .init-no-animation {
-      opacity: 1;
-      max-height: 200px;
-      visibility: visible;
-    }
-    .fold-500 {
-      animation-name: fold-500; //该动画定义在main.scss里
-      animation-duration: 0.2s;
-      animation-iteration-count:1;
-      opacity: 0;
-      max-height: 0;
-      visibility: hidden;
-    }
-    .fold-600 {
-      animation-name: fold-600; //该动画定义在main.scss里
-      animation-duration: 0.2s;
-      animation-iteration-count:1;
-      opacity: 0;
-      max-height: 0;
-      visibility: hidden;
-    }
-    .fold-200 {
-      animation-name: fold-200; //该动画定义在main.scss里
-      animation-duration: 0.2s;
-      animation-iteration-count:1;
-      opacity: 0;
-      max-height: 0;
-      visibility: hidden;
-    }
-    .unfold-500 {
-      animation-name: unfold-500;
-      animation-duration: 0.2s;
-      animation-iteration-count:1;
-      opacity: 1;
-      max-height: 500px;
-      visibility: visible;
-    }
-    .unfold-600 {
-      animation-name: unfold-600;
-      animation-duration: 0.2s;
-      animation-iteration-count:1;
-      opacity: 1;
-      max-height: 600px;
-      visibility: visible;
-    }
-    .unfold-200 {
-      animation-name: unfold-200;
-      animation-duration: 0.2s;
-      animation-iteration-count:1;
-      opacity: 1;
-      max-height: 200px;
-      visibility: visible;
-    }
   }
   .chart-url {
     .url-container {