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

style(接口测试): 报告页面高度自动适应，导出报告样式优化

This commit is contained in:
fit2-zhao 2022-10-25 11:59:11 +08:00 committed by fit2-zhao
parent d8549e02dc
commit d5513d7a5b
6 changed files with 179 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
api-test/frontend/src/business/automation/report/ApiReportDetail.vue
View File

@ -1,109 +1,112 @@
<template> <template>
<ms-container v-loading="loading || reportExportVisible"> <div>
<ms-main-container class="api-report-content"> <ms-container v-loading="loading || reportExportVisible">
<el-card class="report-body"> <ms-main-container>
<section class="report-container" v-if="this.report.testId"> <el-card>
<!-- header --> <section class="report-container" v-if="this.report.testId">
<ms-api-report-view-header <!-- header -->
:show-cancel-button="showCancel" <ms-api-report-view-header
:show-rerun-button="showRerunButton" :show-cancel-button="showCancel"
:is-plan="isPlan" :show-rerun-button="showRerunButton"
:is-template="isTemplate" :is-plan="isPlan"
:debug="debug" :is-template="isTemplate"
:report="report" :debug="debug"
:project-env-map="projectEnvMap" :report="report"
@reportExport="handleExport" :project-env-map="projectEnvMap"
@reportSave="handleSave"/> @reportExport="handleExport"
@reportSave="handleSave"/>
<!-- content --> <!-- content -->
<main v-if="isNotRunning"> <main v-if="isNotRunning">
<!-- content header chart --> <!-- content header chart -->
<ms-metric-chart :content="content" :totalTime="totalTime" :report="report"/> <ms-metric-chart :content="content" :totalTime="totalTime" :report="report"/>
<el-tabs v-model="activeName" @tab-click="handleClick" style="min-width: 1500px"> <el-tabs v-model="activeName" @tab-click="handleClick" style="min-width: 1200px">
<!-- all step--> <!-- all step-->
<el-tab-pane label="All" name="total"> <el-tab-pane label="All" name="total">
<ms-scenario-results <ms-scenario-results
:treeData="fullTreeNodes" :treeData="fullTreeNodes"
:console="content.console" :console="content.console"
:report="report" :report="report"
:is-share="isShare" :is-share="isShare"
:share-id="shareId" :share-id="shareId"
v-on:requestResult="requestResult" v-on:requestResult="requestResult"
ref="resultsTree"/> ref="resultsTree"/>
</el-tab-pane> </el-tab-pane>
<!-- fail step --> <!-- fail step -->
<el-tab-pane name="fail"> <el-tab-pane name="fail">
<template slot="label"> <template slot="label">
Error Error
</template> </template>
<ms-scenario-results <ms-scenario-results
v-on:requestResult="requestResult" v-on:requestResult="requestResult"
:console="content.console" :console="content.console"
:report="report" :report="report"
:is-share="isShare" :is-share="isShare"
:share-id="shareId" :share-id="shareId"
:treeData="fullTreeNodes" ref="failsTree" :treeData="fullTreeNodes" ref="failsTree"
:errorReport="content.error"/> :errorReport="content.error"/>
</el-tab-pane> </el-tab-pane>
<!--error step --> <!--error step -->
<el-tab-pane name="errorReport" v-if="content.errorCode > 0"> <el-tab-pane name="errorReport" v-if="content.errorCode > 0">
<template slot="label"> <template slot="label">
<span class="fail" style="color: #F6972A"> <span class="fail" style="color: #F6972A">
FakeError FakeError
</span> </span>
</template> </template>
<ms-scenario-results <ms-scenario-results
v-on:requestResult="requestResult" v-on:requestResult="requestResult"
:report="report" :report="report"
:is-share="isShare" :is-share="isShare"
:share-id="shareId" :share-id="shareId"
:console="content.console" :console="content.console"
:treeData="fullTreeNodes" ref="errorReportTree"/> :treeData="fullTreeNodes" ref="errorReportTree"/>
</el-tab-pane> </el-tab-pane>
<!-- Not performed step --> <!-- Not performed step -->
<el-tab-pane name="unExecute" v-if="content.unExecute > 0"> <el-tab-pane name="unExecute" v-if="content.unExecute > 0">
<template slot="label"> <template slot="label">
<span class="fail" <span class="fail"
style="color: #9C9B9A"> style="color: #9C9B9A">
Pending Pending
</span> </span>
</template> </template>
<ms-scenario-results <ms-scenario-results
v-on:requestResult="requestResult" v-on:requestResult="requestResult"
:report="report" :report="report"
:is-share="isShare" :is-share="isShare"
:share-id="shareId" :share-id="shareId"
:console="content.console" :console="content.console"
:treeData="fullTreeNodes" ref="unExecuteTree"/> :treeData="fullTreeNodes" ref="unExecuteTree"/>
</el-tab-pane> </el-tab-pane>
<!-- console --> <!-- console -->
<el-tab-pane name="console"> <el-tab-pane name="console">
<template slot="label"> <template slot="label">
<span class="console">Console</span> <span class="console">Console</span>
</template> </template>
<ms-code-edit <ms-code-edit
:mode="'text'" :mode="'text'"
:read-only="true" :read-only="true"
:data.sync="content.console" :data.sync="content.console"
height="calc(100vh - 500px)"/> height="calc(100vh - 500px)"/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</main>
</section>
</el-card>
</ms-main-container>
<!--export report--> </ms-container>
<ms-api-report-export
v-if="reportExportVisible" <!--export report-->
id="apiTestReport" <ms-api-report-export
:project-env-map="projectEnvMap" v-if="reportExportVisible"
:title="report.name" id="apiTestReport"
:content="content" :project-env-map="projectEnvMap"
:report="report" :title="report.name"
:total-time="totalTime" class="ms-copy-bottom"/> :content="content"
</main> :report="report"
</section> :total-time="totalTime" class="target-node-item"/>
</el-card> </div>
</ms-main-container>
</ms-container>
</template> </template>
<script> <script>
@ -756,7 +759,7 @@ export default {
<style scoped> <style scoped>
.report-container { .report-container {
height: calc(100vh - 155px); height: calc(100vh - 70px);
min-height: 600px; min-height: 600px;
overflow-y: auto; overflow-y: auto;
} }
@ -799,9 +802,7 @@ export default {
min-width: 750px !important; min-width: 750px !important;
} }
.ms-copy-bottom { .target-node-item {
position: absolute; background: #FFFFFF;
bottom: 0;
} }
</style> </style>

137
api-test/frontend/src/business/automation/report/ApiReportExport.vue
View File

@ -3,79 +3,76 @@
:type="$t('report.api_test_report')"> :type="$t('report.api_test_report')">
<ms-metric-chart :content="content" :is-export="true" :totalTime="totalTime" :report="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 class="scenario-result" v-for="(scenario, index) in content.scenarios" :key="index" :scenario="scenario">
<div> <el-card>
<el-card> <template v-slot:header>
<template v-slot:header> {{ $t('api_report.scenario_name') }}：{{ scenario.name }}
{{ $t('api_report.scenario_name') }}：{{ scenario.name }} </template>
</template> <div class="ms-border clearfix" v-for="(request, index) in scenario.requestResults" :key="index"
<div class="ms-border clearfix" v-for="(request, index) in scenario.requestResults" :key="index" :request="request">
:request="request"> <div class="request-top">
<div>
<div class="request-top"> {{ getName(request.name) }}
<div>
{{ getName(request.name) }}
</div>
<div class="url">
{{ request.url }}
</div>
</div> </div>
<el-divider/> <div class="url">
<div class="request-middle"> {{ request.url }}
<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>
</div> </div>
</el-card> <el-divider/>
</div> <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> </div>
</ms-report-export-template> </ms-report-export-template>
</template> </template>

2
api-test/frontend/src/business/automation/report/ApiReportViewHeader.vue
View File

@ -233,6 +233,6 @@ export default {
} }
.report-header { .report-header {
min-width: 1500px; min-width: 1200px;
} }
</style> </style>

2
api-test/frontend/src/business/automation/report/components/MetricChart.vue
View File

@ -318,7 +318,7 @@ export default {
<style scoped> <style scoped>
.metric-container { .metric-container {
padding: 5px 10px; padding: 5px 10px;
min-width: 1500px; min-width: 1200px;
} }
.metric-container #chart { .metric-container #chart {

6
framework/sdk-parent/frontend/src/components/task/TaskCenter.vue
View File

@ -559,4 +559,10 @@ export default {
.report-bottom { .report-bottom {
margin-top: 10px; margin-top: 10px;
} }
:deep(.report-container) {
height: calc(100vh - 155px) !important;
min-height: 600px;
overflow-y: auto;
}
</style> </style>

6
framework/sdk-parent/frontend/src/utils/index.js
View File

@ -1,6 +1,5 @@
import {COUNT_NUMBER, COUNT_NUMBER_SHALLOW, ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW, PRIMARY_COLOR} from "./constants"; import {COUNT_NUMBER, COUNT_NUMBER_SHALLOW, ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW, PRIMARY_COLOR} from "./constants";
import i18n from '../i18n' import i18n from '../i18n'
import {MessageBox} from "element-ui";
import html2canvas from 'html2canvas'; import html2canvas from 'html2canvas';
import JsPDF from 'jspdf'; import JsPDF from 'jspdf';
@ -343,8 +342,8 @@ export function getUrlParams(url) {
/** /**
* @param ele 要生成 pdf 的DOM元素（容器） * @param ele 要生成 pdf 的DOM元素（容器）
* @param padfName PDF文件生成后的文件名字 * @param pdfName PDF文件生成后的文件名字
* */ * */
export function downloadPDF(ele, pdfName) { export function downloadPDF(ele, pdfName) {
let eleW = ele.offsetWidth;// 获得该容器的宽 let eleW = ele.offsetWidth;// 获得该容器的宽
@ -393,6 +392,7 @@ export function downloadPDF(ele, pdfName) {
html2canvas(ele, { html2canvas(ele, {
dpi: 300, dpi: 300,
backgroundColor: 'white',
// allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的 // allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
useCORS: true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。 useCORS: true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
}).then((canvas) => { }).then((canvas) => {