test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(接口测试): 大数据量时的接口列表虚拟滚动高度计算调优 

--bug=1027497 --user=白奇 【接口测试】  github#25304在使用平台做测试时chrome经常出现崩溃问题 https://www.tapd.cn/55049933/s/1389144
This commit is contained in:
baiqi 2023-07-04 12:11:06 +08:00 committed by 刘瑞斌
parent 627b884d8c
commit ae0d601c53
2 changed files with 116 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api-test/frontend/package.json
View File

@ -17,7 +17,7 @@
"@fortawesome/free-regular-svg-icons": "^5.12.0", "@fortawesome/free-regular-svg-icons": "^5.12.0",
"@fortawesome/free-solid-svg-icons": "^5.12.0", "@fortawesome/free-solid-svg-icons": "^5.12.0",
"@fortawesome/vue-fontawesome": "^0.1.9", "@fortawesome/vue-fontawesome": "^0.1.9",
"@ba1q1/vue-easy-tree": "^1.0.4", "@ba1q1/vue-easy-tree": "^1.1.0",
"axios": "^0.27.2", "axios": "^0.27.2",
"diffable-html": "^4.0.0", "diffable-html": "^4.0.0",
"echarts": "^5.0.2", "echarts": "^5.0.2",

232
api-test/frontend/src/business/automation/scenario/EditApiScenario.vue
View File

@ -87,26 +87,26 @@
<div class="debug-header"> <div class="debug-header">
<div class="ms-col-one mt-2"> <div class="ms-col-one mt-2">
<div class="mt-2" v-show="scenarioDefinition.length > 1"> <div class="mt-2" v-show="scenarioDefinition.length > 1">
<el-tooltip <el-tooltip
:content="$t('test_track.case.batch_operate')" :content="$t('test_track.case.batch_operate')"
placement="top" placement="top"
effect="light" effect="light"
v-show="!isBatchProcess"> v-show="!isBatchProcess">
<font-awesome-icon <font-awesome-icon
class="ms-batch-btn" class="ms-batch-btn"
:icon="['fa', 'bars']" :icon="['fa', 'bars']"
v-prevent-re-click v-prevent-re-click
@click="batchProcessing" /> @click="batchProcessing" />
</el-tooltip> </el-tooltip>
<el-checkbox v-show="isBatchProcess" v-model="isCheckedAll" @change="checkedAll" /> <el-checkbox v-show="isBatchProcess" v-model="isCheckedAll" @change="checkedAll" />
<el-tooltip :content="$t('commons.cancel')" placement="top" effect="light" v-show="isBatchProcess"> <el-tooltip :content="$t('commons.cancel')" placement="top" effect="light" v-show="isBatchProcess">
<font-awesome-icon <font-awesome-icon
class="ms-batch-btn" class="ms-batch-btn"
:icon="['fa', 'times']" :icon="['fa', 'times']"
v-prevent-re-click v-prevent-re-click
@click="cancelBatchProcessing" /> @click="cancelBatchProcessing" />
</el-tooltip> </el-tooltip>
</div> </div>
<div class="ml-10">{{ $t('api_test.automation.step_total') }}：{{ scenarioDefinition.length }}</div> <div class="ml-10">{{ $t('api_test.automation.step_total') }}：{{ scenarioDefinition.length }}</div>
<div class="ml-10"> <div class="ml-10">
<el-link class="head" @click="showScenarioParameters" <el-link class="head" @click="showScenarioParameters"
@ -141,8 +141,7 @@
@saveRefresh="setDomain" @saveRefresh="setDomain"
:has-option-group="true" :has-option-group="true"
ref="envPopover" ref="envPopover"
class="ml-10" class="ml-10" />
/>
<el-tooltip class="mt-2 ml-10" v-if="!debugLoading" content="Ctrl + R" placement="top"> <el-tooltip class="mt-2 ml-10" v-if="!debugLoading" content="Ctrl + R" placement="top">
<el-dropdown <el-dropdown
@ -271,102 +270,98 @@
</el-row> </el-row>
<el-row> <el-row>
<!-- 场景步骤内容 --> <!-- 场景步骤内容 -->
<div ref="stepInfo" style="height: calc(100vh - 170px);"> <div ref="stepInfo" style="height: calc(100vh - 170px)">
<vue-easy-tree <vue-easy-tree
node-key="resourceId" node-key="id"
height="calc(100vh - 170px)" height="calc(100vh - 170px)"
:minItemSize="43" :minItemSize="43"
:sizeDependencies="['expanded']" :sizeDependencies="['expanded']"
:props="props" :props="props"
:data="scenarioDefinition" :data="scenarioDefinition"
:buffer="200" :buffer="300"
class="ms-tree" class="ms-tree"
:expand-on-click-node="false" :expand-on-click-node="false"
:allow-drop="allowDrop" :allow-drop="allowDrop"
:allow-drag="allowDrag" :allow-drag="allowDrag"
:empty-text="$t('api_test.scenario.step_info')" :empty-text="$t('api_test.scenario.step_info')"
highlight-current highlight-current
:show-checkbox="isBatchProcess" :show-checkbox="isBatchProcess"
@node-drag-end="nodeDragEnd" @node-drag-end="nodeDragEnd"
@node-click="nodeClick" @node-click="nodeClick"
draggable draggable
isDynamic isDynamic
ref="stepTree" ref="stepTree"
:key="reloadTree"> :key="reloadTree">
<el-row <el-row
class="custom-tree-node" class="custom-tree-node"
:gutter="10" :gutter="10"
type="flex" type="flex"
align="middle" align="middle"
slot-scope="{ node, data }" slot-scope="{ node, data }"
style="width: 100%"> style="width: 100%">
<span
class="custom-tree-node-col"
style="padding-left: 0px; padding-right: 0px"
v-show="node && data.hashTree && data.hashTree.length > 0 && !data.isLeaf">
<span <span
class="custom-tree-node-col" v-show="!node.expanded"
style="padding-left: 0px; padding-right: 0px" class="el-icon-circle-plus-outline custom-node_e"
v-show="node && data.hashTree && data.hashTree.length > 0 && !data.isLeaf"> @click="openOrClose(node, data)" />
<span
v-show="!node.expanded"
class="el-icon-circle-plus-outline custom-node_e"
@click="openOrClose(node, data)" />
<span
v-show="node.expanded"
class="el-icon-remove-outline custom-node_e"
@click="openOrClose(node, data)" />
</span>
<!-- 批量操作 -->
<span <span
:class="data.checkBox ? 'custom-tree-node-hide' : 'custom-tree-node-col'" v-show="node.expanded"
style="padding-left: 0px; padding-right: 0px" class="el-icon-remove-outline custom-node_e"
v-show="(data.hashTree && data.hashTree.length === 0) || data.isLeaf"> @click="openOrClose(node, data)" />
<show-more-btn </span>
:is-show="node.checked" <!-- 批量操作 -->
:buttons="batchOperators" <span
v-show="data.checkBox" :class="data.checkBox ? 'custom-tree-node-hide' : 'custom-tree-node-col'"
:show-size="false" style="padding-left: 0px; padding-right: 0px"
style="margin-right: 10px" /> v-show="(data.hashTree && data.hashTree.length === 0) || data.isLeaf">
</span> <show-more-btn
<span style="width: calc(100% - 40px)"> :is-show="node.checked"
<!-- 步骤组件--> :buttons="batchOperators"
<ms-component-config v-show="data.checkBox"
:scenario-definition="scenarioDefinition" :show-size="false"
:message="message" style="margin-right: 10px" />
:type="data.type" </span>
:scenario="data" <span
:response="response" v-if="
:currentScenario="currentScenario" stepFilter.get('ALlSamplerStep').indexOf(data.type) === -1 ||
:node="node" !node.parent ||
:project-list="projectList" !node.parent.data ||
:env-map="projectEnvMap" stepFilter.get('AllSamplerProxy').indexOf(node.parent.data.type) === -1
:env-group-id="envGroupId" "
:environment-type="environmentType" style="width: calc(100% - 40px)">
@remove="remove" <!-- 步骤组件-->
@copyRow="copyRow" <ms-component-config
@suggestClick="suggestClick" :scenario-definition="scenarioDefinition"
@refReload="refReload" :message="message"
@runScenario="runDebug" :type="data.type"
@stopScenario="stop" :scenario="data"
@setDomain="setDomain" :response="response"
@openScenario="openScenario" :currentScenario="currentScenario"
@editScenarioAdvance="editScenarioAdvance" :node="node"
ref="componentConfig" :project-list="projectList"
v-if=" :env-map="projectEnvMap"
stepFilter.get('ALlSamplerStep').indexOf(data.type) === -1 || :env-group-id="envGroupId"
!node.parent || :environment-type="environmentType"
!node.parent.data || @remove="remove"
stepFilter.get('AllSamplerProxy').indexOf(node.parent.data.type) === -1 @copyRow="copyRow"
" /> @suggestClick="suggestClick"
<div v-else class="el-tree-node is-hidden is-focusable is-leaf" style="display: none"> @refReload="refReload"
{{ hideNode(node) }} @runScenario="runDebug"
</div> @stopScenario="stop"
</span> @setDomain="setDomain"
</el-row> @openScenario="openScenario"
</vue-easy-tree> @editScenarioAdvance="editScenarioAdvance"
</div> ref="componentConfig" />
</span>
</el-row>
</vue-easy-tree>
</div>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="21"> <el-col :span="21"> </el-col>
</el-col>
<!-- 按钮列表 --> <!-- 按钮列表 -->
<el-col :span="3"> <el-col :span="3">
<div <div
@ -1182,8 +1177,11 @@ export default {
}, },
margeTransaction(item, console, arr) { margeTransaction(item, console, arr) {
arr.forEach((sub) => { arr.forEach((sub) => {
if (item.data && item.data.id + '_' + item.data.parentIndex === sub.resourceId if (
&& item.data.requestResult.length === 0) { item.data &&
item.data.id + '_' + item.data.parentIndex === sub.resourceId &&
item.data.requestResult.length === 0
) {
sub.responseResult.console = console; sub.responseResult.console = console;
item.data.requestResult.push(sub); item.data.requestResult.push(sub);
// 更新父节点状态 // 更新父节点状态
@ -1767,7 +1765,7 @@ export default {
this.clearResult(this.scenarioDefinition); this.clearResult(this.scenarioDefinition);
this.clearNodeStatus(this.$refs.stepTree.root.childNodes); this.clearNodeStatus(this.$refs.stepTree.root.childNodes);
runScenario.run = false; runScenario.run = false;
this.message = "STOP"; this.message = 'STOP';
return; return;
} }
let hasRequest = runScenario && runScenario.hasRequest; let hasRequest = runScenario && runScenario.hasRequest;