style(接口测试): 报告页面高度自动适应，导出报告样式优化
This commit is contained in:
fit2-zhao
fit2-zhao
parent
d8549e02dc
commit
d5513d7a5b
|
|
@ -1,109 +1,112 @@
|
|||
<template>
|
||||
<ms-container v-loading="loading || reportExportVisible">
|
||||
<ms-main-container class="api-report-content">
|
||||
<el-card class="report-body">
|
||||
<section class="report-container" v-if="this.report.testId">
|
||||
<!-- header -->
|
||||
<ms-api-report-view-header
|
||||
:show-cancel-button="showCancel"
|
||||
:show-rerun-button="showRerunButton"
|
||||
:is-plan="isPlan"
|
||||
:is-template="isTemplate"
|
||||
:debug="debug"
|
||||
:report="report"
|
||||
:project-env-map="projectEnvMap"
|
||||
@reportExport="handleExport"
|
||||
@reportSave="handleSave"/>
|
||||
<div>
|
||||
<ms-container v-loading="loading || reportExportVisible">
|
||||
<ms-main-container>
|
||||
<el-card>
|
||||
<section class="report-container" v-if="this.report.testId">
|
||||
<!-- header -->
|
||||
<ms-api-report-view-header
|
||||
:show-cancel-button="showCancel"
|
||||
:show-rerun-button="showRerunButton"
|
||||
:is-plan="isPlan"
|
||||
:is-template="isTemplate"
|
||||
:debug="debug"
|
||||
:report="report"
|
||||
:project-env-map="projectEnvMap"
|
||||
@reportExport="handleExport"
|
||||
@reportSave="handleSave"/>
|
||||
|
||||
<!-- content -->
|
||||
<main v-if="isNotRunning">
|
||||
<!-- content header chart -->
|
||||
<ms-metric-chart :content="content" :totalTime="totalTime" :report="report"/>
|
||||
<!-- content -->
|
||||
<main v-if="isNotRunning">
|
||||
<!-- content header chart -->
|
||||
<ms-metric-chart :content="content" :totalTime="totalTime" :report="report"/>
|
||||
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" style="min-width: 1500px">
|
||||
<!-- all step-->
|
||||
<el-tab-pane label="All" name="total">
|
||||
<ms-scenario-results
|
||||
:treeData="fullTreeNodes"
|
||||
:console="content.console"
|
||||
:report="report"
|
||||
:is-share="isShare"
|
||||
:share-id="shareId"
|
||||
v-on:requestResult="requestResult"
|
||||
ref="resultsTree"/>
|
||||
</el-tab-pane>
|
||||
<!-- fail step -->
|
||||
<el-tab-pane name="fail">
|
||||
<template slot="label">
|
||||
Error
|
||||
</template>
|
||||
<ms-scenario-results
|
||||
v-on:requestResult="requestResult"
|
||||
:console="content.console"
|
||||
:report="report"
|
||||
:is-share="isShare"
|
||||
:share-id="shareId"
|
||||
:treeData="fullTreeNodes" ref="failsTree"
|
||||
:errorReport="content.error"/>
|
||||
</el-tab-pane>
|
||||
<!--error step -->
|
||||
<el-tab-pane name="errorReport" v-if="content.errorCode > 0">
|
||||
<template slot="label">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" style="min-width: 1200px">
|
||||
<!-- all step-->
|
||||
<el-tab-pane label="All" name="total">
|
||||
<ms-scenario-results
|
||||
:treeData="fullTreeNodes"
|
||||
:console="content.console"
|
||||
:report="report"
|
||||
:is-share="isShare"
|
||||
:share-id="shareId"
|
||||
v-on:requestResult="requestResult"
|
||||
ref="resultsTree"/>
|
||||
</el-tab-pane>
|
||||
<!-- fail step -->
|
||||
<el-tab-pane name="fail">
|
||||
<template slot="label">
|
||||
Error
|
||||
</template>
|
||||
<ms-scenario-results
|
||||
v-on:requestResult="requestResult"
|
||||
:console="content.console"
|
||||
:report="report"
|
||||
:is-share="isShare"
|
||||
:share-id="shareId"
|
||||
:treeData="fullTreeNodes" ref="failsTree"
|
||||
:errorReport="content.error"/>
|
||||
</el-tab-pane>
|
||||
<!--error step -->
|
||||
<el-tab-pane name="errorReport" v-if="content.errorCode > 0">
|
||||
<template slot="label">
|
||||
<span class="fail" style="color: #F6972A">
|
||||
FakeError
|
||||
</span>
|
||||
</template>
|
||||
<ms-scenario-results
|
||||
v-on:requestResult="requestResult"
|
||||
:report="report"
|
||||
:is-share="isShare"
|
||||
:share-id="shareId"
|
||||
:console="content.console"
|
||||
:treeData="fullTreeNodes" ref="errorReportTree"/>
|
||||
</el-tab-pane>
|
||||
<!-- Not performed step -->
|
||||
<el-tab-pane name="unExecute" v-if="content.unExecute > 0">
|
||||
<template slot="label">
|
||||
</template>
|
||||
<ms-scenario-results
|
||||
v-on:requestResult="requestResult"
|
||||
:report="report"
|
||||
:is-share="isShare"
|
||||
:share-id="shareId"
|
||||
:console="content.console"
|
||||
:treeData="fullTreeNodes" ref="errorReportTree"/>
|
||||
</el-tab-pane>
|
||||
<!-- Not performed step -->
|
||||
<el-tab-pane name="unExecute" v-if="content.unExecute > 0">
|
||||
<template slot="label">
|
||||
<span class="fail"
|
||||
style="color: #9C9B9A">
|
||||
Pending
|
||||
</span>
|
||||
</template>
|
||||
<ms-scenario-results
|
||||
v-on:requestResult="requestResult"
|
||||
:report="report"
|
||||
:is-share="isShare"
|
||||
:share-id="shareId"
|
||||
:console="content.console"
|
||||
:treeData="fullTreeNodes" ref="unExecuteTree"/>
|
||||
</el-tab-pane>
|
||||
<!-- console -->
|
||||
<el-tab-pane name="console">
|
||||
<template slot="label">
|
||||
<span class="console">Console</span>
|
||||
</template>
|
||||
<ms-code-edit
|
||||
:mode="'text'"
|
||||
:read-only="true"
|
||||
:data.sync="content.console"
|
||||
height="calc(100vh - 500px)"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<ms-scenario-results
|
||||
v-on:requestResult="requestResult"
|
||||
:report="report"
|
||||
:is-share="isShare"
|
||||
:share-id="shareId"
|
||||
:console="content.console"
|
||||
:treeData="fullTreeNodes" ref="unExecuteTree"/>
|
||||
</el-tab-pane>
|
||||
<!-- console -->
|
||||
<el-tab-pane name="console">
|
||||
<template slot="label">
|
||||
<span class="console">Console</span>
|
||||
</template>
|
||||
<ms-code-edit
|
||||
:mode="'text'"
|
||||
:read-only="true"
|
||||
:data.sync="content.console"
|
||||
height="calc(100vh - 500px)"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</main>
|
||||
</section>
|
||||
</el-card>
|
||||
</ms-main-container>
|
||||
|
||||
<!--export report-->
|
||||
<ms-api-report-export
|
||||
v-if="reportExportVisible"
|
||||
id="apiTestReport"
|
||||
:project-env-map="projectEnvMap"
|
||||
:title="report.name"
|
||||
:content="content"
|
||||
:report="report"
|
||||
:total-time="totalTime" class="ms-copy-bottom"/>
|
||||
</main>
|
||||
</section>
|
||||
</el-card>
|
||||
</ms-main-container>
|
||||
</ms-container>
|
||||
</ms-container>
|
||||
|
||||
<!--export report-->
|
||||
<ms-api-report-export
|
||||
v-if="reportExportVisible"
|
||||
id="apiTestReport"
|
||||
:project-env-map="projectEnvMap"
|
||||
:title="report.name"
|
||||
:content="content"
|
||||
:report="report"
|
||||
:total-time="totalTime" class="target-node-item"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -756,7 +759,7 @@ export default {
|
|||
<style scoped>
|
||||
|
||||
.report-container {
|
||||
height: calc(100vh - 155px);
|
||||
height: calc(100vh - 70px);
|
||||
min-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -799,9 +802,7 @@ export default {
|
|||
min-width: 750px !important;
|
||||
}
|
||||
|
||||
.ms-copy-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
.target-node-item {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,79 +3,76 @@
|
|||
:type="$t('report.api_test_report')">
|
||||
<ms-metric-chart :content="content" :is-export="true" :totalTime="totalTime" :report="report"/>
|
||||
<div class="scenario-result" v-for="(scenario, index) in content.scenarios" :key="index" :scenario="scenario">
|
||||
<div>
|
||||
<el-card>
|
||||
<template v-slot:header>
|
||||
{{ $t('api_report.scenario_name') }}：{{ scenario.name }}
|
||||
</template>
|
||||
<div class="ms-border clearfix" v-for="(request, index) in scenario.requestResults" :key="index"
|
||||
:request="request">
|
||||
|
||||
<div class="request-top">
|
||||
<div>
|
||||
{{ getName(request.name) }}
|
||||
</div>
|
||||
<div class="url">
|
||||
{{ request.url }}
|
||||
</div>
|
||||
<el-card>
|
||||
<template v-slot:header>
|
||||
{{ $t('api_report.scenario_name') }}：{{ scenario.name }}
|
||||
</template>
|
||||
<div class="ms-border clearfix" v-for="(request, index) in scenario.requestResults" :key="index"
|
||||
:request="request">
|
||||
<div class="request-top">
|
||||
<div>
|
||||
{{ getName(request.name) }}
|
||||
</div>
|
||||
<el-divider/>
|
||||
<div class="request-middle">
|
||||
<api-report-request-header-item :title="$t('api_test.request.method')">
|
||||
<span class="method"> {{ request.method }}</span>
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.response_time')">
|
||||
{{ request.responseResult.responseTime }} ms
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.latency')">
|
||||
{{ request.responseResult.latency }} ms
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.request_size')">
|
||||
{{ request.requestSize }} bytes
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.response_size')">
|
||||
{{ request.responseResult.responseSize }} bytes
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.error')">
|
||||
{{ request.error }}
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.assertions')">
|
||||
{{ request.passAssertions + " / " + request.totalAssertions }}
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.response_code')">
|
||||
{{ request.responseResult.responseCode }}
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.result')">
|
||||
<el-tag v-if="request.unexecute">{{
|
||||
$t('api_test.home_page.detail_card.unexecute')
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag v-else-if="!request.success && request.status && request.status==='PENDING'">{{
|
||||
$t('api_test.home_page.detail_card.unexecute')
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag v-else-if="request.errorCode" class="ms-test-error_code">
|
||||
{{ $t('error_report_library.option.name') }}
|
||||
</el-tag>
|
||||
<el-tag size="mini" type="success" v-else-if="request.success">
|
||||
{{ $t('api_report.success') }}
|
||||
</el-tag>
|
||||
<el-tag size="mini" type="danger" v-else>
|
||||
{{ $t('api_report.fail') }}
|
||||
</el-tag>
|
||||
</api-report-request-header-item>
|
||||
<div class="url">
|
||||
{{ request.url }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-divider/>
|
||||
<div class="request-middle">
|
||||
<api-report-request-header-item :title="$t('api_test.request.method')">
|
||||
<span class="method"> {{ request.method }}</span>
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.response_time')">
|
||||
{{ request.responseResult.responseTime }} ms
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.latency')">
|
||||
{{ request.responseResult.latency }} ms
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.request_size')">
|
||||
{{ request.requestSize }} bytes
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.response_size')">
|
||||
{{ request.responseResult.responseSize }} bytes
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.error')">
|
||||
{{ request.error }}
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.assertions')">
|
||||
{{ request.passAssertions + " / " + request.totalAssertions }}
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.response_code')">
|
||||
{{ request.responseResult.responseCode }}
|
||||
</api-report-request-header-item>
|
||||
|
||||
<api-report-request-header-item :title="$t('api_report.result')">
|
||||
<el-tag v-if="request.unexecute">{{
|
||||
$t('api_test.home_page.detail_card.unexecute')
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag v-else-if="!request.success && request.status && request.status==='PENDING'">{{
|
||||
$t('api_test.home_page.detail_card.unexecute')
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag v-else-if="request.errorCode" class="ms-test-error_code">
|
||||
{{ $t('error_report_library.option.name') }}
|
||||
</el-tag>
|
||||
<el-tag size="mini" type="success" v-else-if="request.success">
|
||||
{{ $t('api_report.success') }}
|
||||
</el-tag>
|
||||
<el-tag size="mini" type="danger" v-else>
|
||||
{{ $t('api_report.fail') }}
|
||||
</el-tag>
|
||||
</api-report-request-header-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</ms-report-export-template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -233,6 +233,6 @@ export default {
|
|||
}
|
||||
|
||||
.report-header {
|
||||
min-width: 1500px;
|
||||
min-width: 1200px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -318,7 +318,7 @@ export default {
|
|||
<style scoped>
|
||||
.metric-container {
|
||||
padding: 5px 10px;
|
||||
min-width: 1500px;
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
.metric-container #chart {
|
||||
|
|
|
|||
|
|
@ -559,4 +559,10 @@ export default {
|
|||
.report-bottom {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:deep(.report-container) {
|
||||
height: calc(100vh - 155px) !important;
|
||||
min-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import {COUNT_NUMBER, COUNT_NUMBER_SHALLOW, ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW, PRIMARY_COLOR} from "./constants";
|
||||
import i18n from '../i18n'
|
||||
import {MessageBox} from "element-ui";
|
||||
import html2canvas from 'html2canvas';
|
||||
import JsPDF from 'jspdf';
|
||||
|
||||
|
|
@ -343,8 +342,8 @@ export function getUrlParams(url) {
|
|||
|
||||
|
||||
/**
|
||||
* @param ele 要生成 pdf 的DOM元素（容器）
|
||||
* @param padfName PDF文件生成后的文件名字
|
||||
* @param ele 要生成 pdf 的DOM元素（容器）
|
||||
* @param pdfName PDF文件生成后的文件名字
|
||||
* */
|
||||
export function downloadPDF(ele, pdfName) {
|
||||
let eleW = ele.offsetWidth;// 获得该容器的宽
|
||||
|
|
@ -393,6 +392,7 @@ export function downloadPDF(ele, pdfName) {
|
|||
|
||||
html2canvas(ele, {
|
||||
dpi: 300,
|
||||
backgroundColor: 'white',
|
||||
// allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
|
||||
useCORS: true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
|
||||
}).then((canvas) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue