refactor(性能测试): 测试详情单行显示label

This commit is contained in:
Captain.B 2021-06-22 11:40:43 +08:00 committed by 刘瑞斌
parent cb8db6fcf7
commit 90bf8a672e
1 changed files with 76 additions and 64 deletions

View File

@ -11,100 +11,108 @@
<el-collapse-item :title="$t('load_test.report.ActiveThreadsChart')" name="users"> <el-collapse-item :title="$t('load_test.report.ActiveThreadsChart')" name="users">
<el-checkbox-group v-model="checkList['ActiveThreadsChart']" <el-checkbox-group v-model="checkList['ActiveThreadsChart']"
@change="handleChecked('ActiveThreadsChart')"> @change="handleChecked('ActiveThreadsChart')">
<el-tooltip class="item" effect="dark" <div v-for="name in checkOptions['ActiveThreadsChart']" :key="name">
v-for="name in checkOptions['ActiveThreadsChart']" <el-tooltip class="item" effect="dark"
:key="name" :content="name"
:content="name" :disabled="name.length < minLength"
:disabled="name.length < minLength" placement="top">
placement="top"> <el-checkbox :label="name"/>
<el-checkbox :label="name"/> </el-tooltip>
</el-tooltip> </div>
</el-checkbox-group> </el-checkbox-group>
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="$t('load_test.report.TransactionsChart')" name="transactions"> <el-collapse-item :title="$t('load_test.report.TransactionsChart')" name="transactions">
<el-checkbox-group v-model="checkList['TransactionsChart']" @change="handleChecked('TransactionsChart')"> <el-checkbox-group v-model="checkList['TransactionsChart']" @change="handleChecked('TransactionsChart')">
<el-tooltip class="item" effect="dark" <div v-for="name in checkOptions['TransactionsChart']"
v-for="name in checkOptions['TransactionsChart']" :key="name">
:key="name" <el-tooltip class="item" effect="dark"
:content="name"
:disabled="name.length < minLength" :content="name"
placement="top"> :disabled="name.length < minLength"
<el-checkbox :label="name"/> placement="top">
</el-tooltip> <el-checkbox :label="name"/>
</el-tooltip>
</div>
</el-checkbox-group> </el-checkbox-group>
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="$t('load_test.report.ResponseTimeChart')" name="responseTime"> <el-collapse-item :title="$t('load_test.report.ResponseTimeChart')" name="responseTime">
<el-checkbox-group v-model="checkList['ResponseTimeChart']" @change="handleChecked('ResponseTimeChart')"> <el-checkbox-group v-model="checkList['ResponseTimeChart']" @change="handleChecked('ResponseTimeChart')">
<el-tooltip class="item" effect="dark" <div v-for="name in checkOptions['ResponseTimeChart']"
v-for="name in checkOptions['ResponseTimeChart']" :key="name">
:key="name" <el-tooltip class="item" effect="dark"
:content="name" :content="name"
:disabled="name.length < minLength" :disabled="name.length < minLength"
placement="top"> placement="top">
<el-checkbox :label="name"/> <el-checkbox :label="name"/>
</el-tooltip> </el-tooltip>
</div>
</el-checkbox-group> </el-checkbox-group>
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="$t('load_test.report.ResponseTimePercentilesChart')" name="responseTimePercentiles"> <el-collapse-item :title="$t('load_test.report.ResponseTimePercentilesChart')" name="responseTimePercentiles">
<el-checkbox-group v-model="checkList['ResponseTimePercentilesChart']" <el-checkbox-group v-model="checkList['ResponseTimePercentilesChart']"
@change="handleChecked('ResponseTimePercentilesChart')"> @change="handleChecked('ResponseTimePercentilesChart')">
<el-tooltip class="item" effect="dark" <div v-for="name in checkOptions['ResponseTimePercentilesChart']"
v-for="name in checkOptions['ResponseTimePercentilesChart']" :key="name">
:key="name" <el-tooltip class="item" effect="dark"
:content="name" :content="name"
:disabled="name.length < minLength" :disabled="name.length < minLength"
placement="top"> placement="top">
<el-checkbox :label="name"/> <el-checkbox :label="name"/>
</el-tooltip> </el-tooltip>
</div>
</el-checkbox-group> </el-checkbox-group>
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="$t('load_test.report.ResponseCodeChart')" name="responseCode"> <el-collapse-item :title="$t('load_test.report.ResponseCodeChart')" name="responseCode">
<el-checkbox-group v-model="checkList['ResponseCodeChart']" @change="handleChecked('ResponseCodeChart')"> <el-checkbox-group v-model="checkList['ResponseCodeChart']" @change="handleChecked('ResponseCodeChart')">
<el-tooltip class="item" effect="dark" <div v-for="name in checkOptions['ResponseCodeChart']"
v-for="name in checkOptions['ResponseCodeChart']" :key="name">
:key="name" <el-tooltip class="item" effect="dark"
:content="name" :content="name"
:disabled="name.length < minLength" :disabled="name.length < minLength"
placement="top"> placement="top">
<el-checkbox :label="name"/> <el-checkbox :label="name"/>
</el-tooltip> </el-tooltip>
</div>
</el-checkbox-group> </el-checkbox-group>
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="$t('load_test.report.LatencyChart')" name="latency"> <el-collapse-item :title="$t('load_test.report.LatencyChart')" name="latency">
<el-checkbox-group v-model="checkList['LatencyChart']" @change="handleChecked('LatencyChart')"> <el-checkbox-group v-model="checkList['LatencyChart']" @change="handleChecked('LatencyChart')">
<el-tooltip class="item" effect="dark" <div v-for="name in checkOptions['LatencyChart']"
v-for="name in checkOptions['LatencyChart']" :key="name">
:key="name" <el-tooltip class="item" effect="dark"
:content="name" :content="name"
:disabled="name.length < minLength" :disabled="name.length < minLength"
placement="top"> placement="top">
<el-checkbox :label="name"/> <el-checkbox :label="name"/>
</el-tooltip> </el-tooltip>
</div>
</el-checkbox-group> </el-checkbox-group>
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="$t('load_test.report.BytesThroughputChart')" name="bytes"> <el-collapse-item :title="$t('load_test.report.BytesThroughputChart')" name="bytes">
<el-checkbox-group v-model="checkList['BytesThroughputChart']" <el-checkbox-group v-model="checkList['BytesThroughputChart']"
@change="handleChecked('BytesThroughputChart')"> @change="handleChecked('BytesThroughputChart')">
<el-tooltip class="item" effect="dark" <div v-for="name in checkOptions['BytesThroughputChart']"
v-for="name in checkOptions['BytesThroughputChart']" :key="name">
:key="name" <el-tooltip class="item" effect="dark"
:content="name" :content="name"
:disabled="name.length < minLength" :disabled="name.length < minLength"
placement="top"> placement="top">
<el-checkbox :label="name"/> <el-checkbox :label="name"/>
</el-tooltip> </el-tooltip>
</div>
</el-checkbox-group> </el-checkbox-group>
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="$t('load_test.report.ErrorsChart')" name="errors"> <el-collapse-item :title="$t('load_test.report.ErrorsChart')" name="errors">
<el-checkbox-group v-model="checkList['ErrorsChart']" @change="handleChecked('ErrorsChart')"> <el-checkbox-group v-model="checkList['ErrorsChart']" @change="handleChecked('ErrorsChart')">
<el-tooltip class="item" effect="dark" <div v-for="name in checkOptions['ErrorsChart']"
v-for="name in checkOptions['ErrorsChart']" :key="name">
:key="name" <el-tooltip class="item" effect="dark"
:content="name" :content="name"
:disabled="name.length < minLength" :disabled="name.length < minLength"
placement="top"> placement="top">
<el-checkbox :label="name"/> <el-checkbox :label="name"/>
</el-tooltip> </el-tooltip>
</div>
</el-checkbox-group> </el-checkbox-group>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
@ -435,4 +443,8 @@ export default {
height: calc(100vh - 345px); height: calc(100vh - 345px);
overflow: auto; overflow: auto;
} }
/deep/ .el-checkbox__label {
font-size: 10px !important;
}
</style> </style>