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 { baseSocket } from '@/api/base-network';
-import MsRequestResult from './components/RequestResult';
-import MsRequestResultTail from './components/RequestResultTail';
-import MsScenarioResult from './components/ScenarioResult';
 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 { RequestFactory } from '../../definition/model/ApiTestModel';
-import {getCurrentProjectID} from 'metersphere-frontend/src/utils/token';
+import { getCurrentProjectID } from 'metersphere-frontend/src/utils/token';
-import {windowPrint} from 'metersphere-frontend/src/utils';
+import { windowPrint } from 'metersphere-frontend/src/utils';
-import {STEP} from '../scenario/Setting';
+import { STEP } from '../scenario/Setting';
-import {getScenarioReport, updateReport} from '@/api/scenario-report';
+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)">
-      :data="treeData"
+      <vue-easy-tree
-      :expand-on-click-node="false"
+        :data="treeData"
-      :default-expand-all="defaultExpand"
+        node-key="resourceId"
-      :filter-node-method="filterNode"
+        :sizeDependencies="['expanded']"
-      highlight-current
+        height="calc(100vh - 400px)"
-      class="ms-tree ms-report-tree"
+        :minItemSize="48"
-      ref="resultsTree">
+        :buffer="300"
-      <span slot-scope="{ node, data }" style="width: 99%" @click="nodeClick(node)">
+        :expand-on-click-node="false"
-        <ms-scenario-result
+        :default-expand-all="defaultExpand"
-          :node="data"
+        :filter-node-method="filterNode"
-          :console="console"
+        highlight-current
-          v-on:requestResult="requestResult"
+        isDynamic
-          :isActive="isActive"
+        class="ms-tree ms-report-tree"
-          :is-share="isShare"
+        ref="resultsTree">
-          :share-id="shareId" />
+        <span slot-scope="{ node, data }" style="width: 99%">
-      </span>
+          <ms-scenario-result
-    </el-tree>
+            :node="data"
+            :expanded.sync="node.expanded"
+            :console="console"
+            v-on:requestResult="requestResult"
+            :isActive="isActive"
+            :is-share="isShare"
+            :share-id="shareId" />
+        </span>
+      </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,