test/MeterSphere
1
0
Fork 0
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git synced 2024-12-08 15:08:57 +08:00
Code Issues Actions 23 Packages Projects Releases Wiki Activity

fix: 测试报告导出样式

Browse Source
This commit is contained in:
chenjianxing 2020-09-24 13:14:11 +08:00
parent 896fd7f9ce
commit b5a9f2cf0f
11 changed files with 159 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/src/assets/logo-MeterSphere.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

24
frontend/src/business/components/api/report/ApiReportExport.vue
View File

@ -1,8 +1,7 @@
<template>
<el-card>
<ms-report-title :title="$t('report.api_test_report')"/>
<ms-metric-chart :content="content" :totalTime="totalTime"/>
<div class="scenario-result" v-for="(scenario, index) in content.scenarios" :key="index" :scenario="scenario">
<ms-report-export-template :title="title" :type="$t('report.api_test_report')">
<ms-metric-chart :content="content" :totalTime="totalTime"/>
<div class="scenario-result" v-for="(scenario, index) in content.scenarios" :key="index" :scenario="scenario">
<div>
<el-card>
<template v-slot:header>
@ -64,12 +63,13 @@
{{$t('api_report.fail')}}
</el-tag>
</api-report-reqest-header-item>
</div>
</div>
</el-card>
</div>
</div>
</el-card>
</ms-report-export-template>
</template>
<script>
@ -77,13 +77,17 @@
import MsRequestResultTail from "./components/RequestResultTail";
import ApiReportReqestHeaderItem from "./ApiReportReqestHeaderItem";
import MsMetricChart from "./components/MetricChart";
import MsReportTitle from "../../common/components/MsReportTitle";
import MsReportTitle from "../../common/components/report/MsReportTitle";
import MsReportExportTemplate from "../../common/components/report/MsReportExportTemplate";
export default {
name: "MsApiReportExport",
components: {MsReportTitle, MsMetricChart, ApiReportReqestHeaderItem, MsRequestResultTail, MsScenarioResult},
components: {
MsReportExportTemplate,
MsReportTitle, MsMetricChart, ApiReportReqestHeaderItem, MsRequestResultTail, MsScenarioResult},
props: {
content: Object,
totalTime: Number
totalTime: Number,
title: String
},
data() {
return {
@ -117,13 +121,13 @@
}
.el-card {
padding: 10px;
padding: 30px;
border-style: none;
padding: 10px 30px;
}
.request-top div {
margin-top: 10px;
}
</style>

2
frontend/src/business/components/api/report/ApiReportView.vue
View File

@ -36,7 +36,7 @@
<ms-request-result-tail v-if="isRequestResult" :request="request" :scenario-name="scenarioName"/>
</el-col>
</el-row>
<ms-api-report-export v-if="reportExportVisible" id="apiTestReport" :content="content" :total-time="totalTime"/>
<ms-api-report-export v-if="reportExportVisible" id="apiTestReport" :title="report.testName" :content="content" :total-time="totalTime"/>
</main>
</section>
</el-card>

22
frontend/src/business/components/common/components/MsReportTitle.vue
View File

@ -1,22 +0,0 @@
<template>
<div class="report-title title">{{title}}</div>
</template>
<script>
export default {
name: "MsReportTitle",
props: {title: String}
}
</script>
<style scoped>
.report-title {
font-size: 30px;
font-weight: bold;
height: 50px;
text-align: center;
margin-bottom: 20px;
}
</style>

31
frontend/src/business/components/common/components/report/MsReportExportTemplate.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="report-export">
<ms-report-title :title="title" :type="type"/>
<slot></slot>
</div>
</template>
<script>
import MsReportTitle from "./MsReportTitle";
export default {
name: "MsReportExportTemplate",
components: {MsReportTitle},
props: {title: String, type: String},
}
</script>
<style scoped>
.report-export {
padding: 30px;
}
.report-title {
margin-bottom: 30px;
}
.report-export {
background: white;
}
</style>

63
frontend/src/business/components/common/components/report/MsReportTitle.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<div class="clearfix report-title">
<div class="report-left">
<div class="title">
【{{type}}】- {{title}}
</div>
<div>
<span class="time">{{new Date() | timestampFormatDate}}</span>
</div>
</div>
<div class="report-right">
<div class="test">
<img class="logo" src="@/assets/logo-MeterSphere.png">
</div>
</div>
</div>
</template>
<script>
export default {
name: "MsReportTitle",
props: {title: String, type: String},
data() {
return {
}
}
}
</script>
<style scoped>
.report-left {
float: left;
}
.report-right {
float: right;
}
.logo {
height: 30px;
line-height: 30px;
vertical-align: middle
}
.report-left {
font-size: 15px;
}
.time {
margin-left: 10px;
}
.title {
margin-bottom: 5px;
}
</style>

15
frontend/src/business/components/performance/report/PerformanceReportExport.vue
View File

@ -1,6 +1,5 @@
<template>
<el-card class="report-export">
<ms-report-title :title="$t('report.load_test_report')"/>
<ms-report-export-template :title="title" :type="$t('report.load_test_report')">
<el-card id="testOverview">
<template v-slot:header >
<span class="title">{{$t('report.test_overview')}}</span>
@ -19,7 +18,7 @@
</template>
<ms-report-error-log :report="report" ref="errorLog"/>
</el-card>
</el-card>
</ms-report-export-template>
</template>
<script>
@ -30,25 +29,29 @@
import {checkoutTestManagerOrTestUser} from "@/common/js/utils";
import MsPerformanceReportExport from "./PerformanceReportExport";
import MsReportTitle from "../../common/components/MsReportTitle";
import MsReportTitle from "../../common/components/report/MsReportTitle";
import MsReportExportTemplate from "../../common/components/report/MsReportExportTemplate";
export default {
name: "MsPerformanceReportExport",
components: {
MsReportExportTemplate,
MsReportTitle,
MsReportErrorLog,
MsReportRequestStatistics,
MsReportTestOverview,
},
props: ['report']
props: ['report','title']
}
</script>
<style scoped>
.report-export .el-card {
.el-card {
margin-top: 20px;
margin-bottom: 20px;
border-style: none;
}
</style>

2
frontend/src/business/components/performance/report/PerformanceReportView.vue
View File

@ -65,7 +65,7 @@
</el-tabs>
</div>
<ms-performance-report-export id="performanceReportExport" v-show="reportExportVisible" :report="report"/>
<ms-performance-report-export :title="reportName" id="performanceReportExport" v-show="reportExportVisible" :report="report"/>
</el-card>
<el-dialog :title="$t('report.test_stop_now_confirm')" :visible.sync="dialogFormVisible" width="30%">

33
frontend/src/business/components/track/plan/view/comonents/TestCaseReportExport.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<ms-report-export-template :title="title" :type="$t('report.load_test_report')">
<div v-for="(item, index) in previews" :key="item.id">
<template-component :isReportView="true" :metric="metric" :preview="item" :index="index" ref="templateComponent"/>
</div>
</ms-report-export-template>
</template>
<script>
import MsReportExportTemplate from "../../../../common/components/report/MsReportExportTemplate";
import TemplateComponent from "./report/TemplateComponent/TemplateComponent";
import MsReportTitle from "../../../../common/components/report/MsReportTitle";
export default {
name: "MsTestCaseReportExport",
components: {MsReportTitle, TemplateComponent, MsReportExportTemplate},
props: ['previews', 'title', 'metric']
}
</script>
<style scoped>
.report-export >>> .template-component {
width: 99%;
margin-top: 30px;
margin-bottom: 30px;
}
.report-export >>> .report-title {
margin-bottom: 50px;
}
</style>

13
frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/TemplateComponent.vue
View File

@ -59,19 +59,6 @@
},
},
methods: {
getCanvas(canvasList) {
let index = this.index;
let componentId = this.getComponentId();
return new Promise(function(resolve, reject) {
html2canvas(document.getElementById(componentId), {
scale: 2
}).then(function(canvas) {
//排序
canvasList[index] = canvas;
resolve('success');
});
});
},
getComponentId() {
switch (this.preview.id) {
case 1:

25
frontend/src/business/components/track/plan/view/comonents/report/TestCaseReportView.vue
View File

@ -33,14 +33,13 @@
<div class="container" ref="resume" id="app">
<el-main>
<div id="reportViewpp" :class="{'report-export' : reportExportVisible}">
<ms-report-title v-if="reportExportVisible" :title="$t('report.test_plan_report')"/>
<div v-for="(item, index) in previews" :key="item.id">
<template-component :isReportView="true" :metric="metric" :preview="item" :index="index" ref="templateComponent"/>
</div>
<div v-for="(item, index) in previews" :key="item.id">
<template-component :isReportView="true" :metric="metric" :preview="item" :index="index" ref="templateComponent"/>
</div>
<ms-test-case-report-export v-if="reportExportVisible" id="testCaseReportExport" :title="report.name" :metric="metric" :previews="previews"/>
</el-main>
</div>
</template>
</el-drawer>
<test-case-report-template-edit :metric="metric" ref="templateEdit" @refresh="getReport"/>
@ -56,12 +55,12 @@
import TestCaseReportTemplateEdit from "./TestCaseReportTemplateEdit";
import TemplateComponent from "./TemplateComponent/TemplateComponent";
import html2canvas from "html2canvas";
import MsReportTitle from "../../../../../common/components/MsReportTitle";
import MsTestCaseReportExport from "../TestCaseReportExport";
export default {
name: "TestCaseReportView",
components: {
MsReportTitle,
MsTestCaseReportExport,
TemplateComponent,
TestCaseReportTemplateEdit,
RichTextComponent, TestResultComponent, TestResultChartComponent, BaseInfoComponent
@ -212,7 +211,7 @@
this.$nextTick(function () {
setTimeout(() => {
html2canvas(document.getElementById('reportViewpp'), {
html2canvas(document.getElementById('testCaseReportExport'), {
scale: 2
}).then(function(canvas) {
exportPdf(name, [canvas]);
@ -260,14 +259,4 @@
text-align: right;
}
.report-export {
padding: 20px 30px;
background: white;
}
.report-export >>> .template-component {
width: 100%;
margin-top: 20px;
}
</style>