fix(接口测试): 场景详情-生成报告-向下滑动下页面查看步骤和生成报告中页面步骤-页面会卡顿

--bug=1027937 --user=白奇 【接口测试】场景详情-生成报告-向下滑动下页面查看步骤和生成报告中页面步骤-页面会卡顿 https://www.tapd.cn/55049933/s/1396497

api-test/frontend/src/business/automation/report/SyncApiReportDetail.vue

@@ -78,21 +78,18 @@
 </template>
 
 <script>
-import {baseSocket} from '@/api/base-network';
-import MsRequestResult from './components/RequestResult';
-import MsRequestResultTail from './components/RequestResultTail';
-import MsScenarioResult from './components/ScenarioResult';
+import { baseSocket } from '@/api/base-network';
 import MsMetricChart from './components/MetricChart';
 import MsScenarioResults from './components/ScenarioResults';
 import MsContainer from 'metersphere-frontend/src/components/MsContainer';
 import MsMainContainer from 'metersphere-frontend/src/components/MsMainContainer';
 import MsApiReportExport from './ApiReportExport';
 import MsApiReportViewHeader from './ApiReportViewHeader';
-import {RequestFactory} from '../../definition/model/ApiTestModel';
-import {getCurrentProjectID} from 'metersphere-frontend/src/utils/token';
-import {windowPrint} from 'metersphere-frontend/src/utils';
-import {STEP} from '../scenario/Setting';
-import {getScenarioReport, updateReport} from '@/api/scenario-report';
+import { RequestFactory } from '../../definition/model/ApiTestModel';
+import { getCurrentProjectID } from 'metersphere-frontend/src/utils/token';
+import { windowPrint } from 'metersphere-frontend/src/utils';
+import { STEP } from '../scenario/Setting';
+import { getScenarioReport, updateReport } from '@/api/scenario-report';
 
 export default {
   name: 'SyncApiReportDetail',
@@ -102,10 +99,7 @@ export default {
     MsMainContainer,
     MsContainer,
     MsScenarioResults,
-    MsRequestResultTail,
     MsMetricChart,
-    MsScenarioResult,
-    MsRequestResult,
   },
   data() {
     return {

api-test/frontend/src/business/automation/report/components/ScenarioResults.vue

@@ -8,33 +8,41 @@
         <i class="el-icon-remove-outline ms-open-btn" size="mini" @click="closeExpansion" />
       </el-tooltip>
     </div>
-    <el-tree
+    <div style="height: calc(100vh - 400px)">
+      <vue-easy-tree
         :data="treeData"
+        node-key="resourceId"
+        :sizeDependencies="['expanded']"
+        height="calc(100vh - 400px)"
+        :minItemSize="48"
+        :buffer="300"
         :expand-on-click-node="false"
         :default-expand-all="defaultExpand"
         :filter-node-method="filterNode"
         highlight-current
+        isDynamic
         class="ms-tree ms-report-tree"
         ref="resultsTree">
-      <span slot-scope="{ node, data }" style="width: 99%" @click="nodeClick(node)">
+        <span slot-scope="{ node, data }" style="width: 99%">
           <ms-scenario-result
             :node="data"
+            :expanded.sync="node.expanded"
             :console="console"
             v-on:requestResult="requestResult"
             :isActive="isActive"
             :is-share="isShare"
             :share-id="shareId" />
         </span>
-    </el-tree>
+      </vue-easy-tree>
+    </div>
   </el-card>
 </template>
 <script>
 import MsScenarioResult from './ScenarioResult';
-import InfiniteScrollTree from '@/business/automation/report/components/tree/InfiniteScrollTree.vue';
 
 export default {
   name: 'MsScenarioResults',
-  components: { MsScenarioResult, InfiniteScrollTree },
+  components: { MsScenarioResult },
   props: {
     scenarios: Array,
     treeData: Array,