feat(LDAP): 测试报告导出
This commit is contained in:
parent
1cff9c1d02
commit
509e5c9fbb
|
@ -38,6 +38,7 @@
|
||||||
"babel-eslint": "^10.0.3",
|
"babel-eslint": "^10.0.3",
|
||||||
"eslint": "^5.16.0",
|
"eslint": "^5.16.0",
|
||||||
"eslint-plugin-vue": "^5.0.0",
|
"eslint-plugin-vue": "^5.0.0",
|
||||||
|
"file-writer": "^1.0.2",
|
||||||
"vue-template-compiler": "^2.6.10",
|
"vue-template-compiler": "^2.6.10",
|
||||||
"vue2-ace-editor": "0.0.15"
|
"vue2-ace-editor": "0.0.15"
|
||||||
},
|
},
|
||||||
|
|
|
@ -4,9 +4,17 @@
|
||||||
<el-card>
|
<el-card>
|
||||||
<section class="report-container" v-if="this.report.testId">
|
<section class="report-container" v-if="this.report.testId">
|
||||||
<header class="report-header">
|
<header class="report-header">
|
||||||
|
<el-row>
|
||||||
|
<el-col>
|
||||||
<span>{{ report.projectName }} / </span>
|
<span>{{ report.projectName }} / </span>
|
||||||
<router-link :to="path">{{ report.testName }}</router-link>
|
<router-link :to="path">{{ report.testName }}</router-link>
|
||||||
<span class="time">{{ report.createTime | timestampFormatDate }}</span>
|
<span class="time">{{ report.createTime | timestampFormatDate }}</span>
|
||||||
|
<el-button plain type="primary" size="mini" @click="handleExport(report.name)"
|
||||||
|
style="margin-left: 1200px">
|
||||||
|
{{$t('test_track.plan_view.export_report')}}
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</header>
|
</header>
|
||||||
<main v-if="this.isNotRunning">
|
<main v-if="this.isNotRunning">
|
||||||
<ms-metric-chart :content="content" :totalTime="totalTime"/>
|
<ms-metric-chart :content="content" :totalTime="totalTime"/>
|
||||||
|
@ -43,6 +51,8 @@
|
||||||
import MsMetricChart from "./components/MetricChart";
|
import MsMetricChart from "./components/MetricChart";
|
||||||
import MsScenarioResults from "./components/ScenarioResults";
|
import MsScenarioResults from "./components/ScenarioResults";
|
||||||
import {Scenario} from "../test/model/ScenarioModel";
|
import {Scenario} from "../test/model/ScenarioModel";
|
||||||
|
import writer from "file-writer";
|
||||||
|
import ResumeCss from "../../../../common/css/main.css";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "MsApiReportView",
|
name: "MsApiReportView",
|
||||||
|
@ -62,6 +72,29 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
handleExport(name) {
|
||||||
|
let html = this.getHtml();
|
||||||
|
writer(`${name}.html`, html, 'utf-8');
|
||||||
|
},
|
||||||
|
getHtml() {
|
||||||
|
const template = this.$refs.resume.innerHTML
|
||||||
|
let html = `<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<title>html</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||||
|
<style>${ResumeCss}</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="margin:0 auto;width:1200px">
|
||||||
|
${template}
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>`
|
||||||
|
return html
|
||||||
|
},
|
||||||
init() {
|
init() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
this.report = {};
|
this.report = {};
|
||||||
|
|
|
@ -43,7 +43,8 @@
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['40%', '70%'],
|
radius: ['40%', '70%'],
|
||||||
// roseType: 'angle',
|
// roseType: 'angle',
|
||||||
data: this.data
|
data: this.data,
|
||||||
|
animation: false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
@ -22,9 +22,10 @@
|
||||||
@click="rerun(testId)">
|
@click="rerun(testId)">
|
||||||
{{ $t('report.test_execute_again') }}
|
{{ $t('report.test_execute_again') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
<!--<el-button :disabled="isReadOnly" type="info" plain size="mini">
|
<el-button :disabled="isReadOnly" type="info" plain size="mini" @click="exports(reportName)">
|
||||||
{{$t('report.export')}}
|
{{$t('report.export')}}
|
||||||
</el-button>
|
</el-button>
|
||||||
|
<!--
|
||||||
<el-button :disabled="isReadOnly" type="warning" plain size="mini">
|
<el-button :disabled="isReadOnly" type="warning" plain size="mini">
|
||||||
{{$t('report.compare')}}
|
{{$t('report.compare')}}
|
||||||
</el-button>-->
|
</el-button>-->
|
||||||
|
@ -44,7 +45,7 @@
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-divider/>
|
<el-divider/>
|
||||||
|
<div ref="resume">
|
||||||
<el-tabs v-model="active" type="border-card" :stretch="true">
|
<el-tabs v-model="active" type="border-card" :stretch="true">
|
||||||
<el-tab-pane :label="$t('load_test.pressure_config')">
|
<el-tab-pane :label="$t('load_test.pressure_config')">
|
||||||
<ms-performance-pressure-config :is-read-only="true" :report="report"/>
|
<ms-performance-pressure-config :is-read-only="true" :report="report"/>
|
||||||
|
@ -62,6 +63,8 @@
|
||||||
<ms-report-log-details :report="report"/>
|
<ms-report-log-details :report="report"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-dialog :title="$t('report.test_stop_now_confirm')" :visible.sync="dialogFormVisible" width="30%">
|
<el-dialog :title="$t('report.test_stop_now_confirm')" :visible.sync="dialogFormVisible" width="30%">
|
||||||
|
@ -88,6 +91,8 @@ import MsContainer from "../../common/components/MsContainer";
|
||||||
import MsMainContainer from "../../common/components/MsMainContainer";
|
import MsMainContainer from "../../common/components/MsMainContainer";
|
||||||
|
|
||||||
import {checkoutTestManagerOrTestUser} from "@/common/js/utils";
|
import {checkoutTestManagerOrTestUser} from "@/common/js/utils";
|
||||||
|
import writer from "file-writer";
|
||||||
|
import ResumeCss from "../../../../common/css/main.css";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "PerformanceReportView",
|
name: "PerformanceReportView",
|
||||||
|
@ -124,6 +129,29 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
exports(name) {
|
||||||
|
let html = this.getHtml();
|
||||||
|
writer(`${name}.html`, html, 'utf-8');
|
||||||
|
},
|
||||||
|
getHtml() {
|
||||||
|
const template = this.$refs.resume.innerHTML
|
||||||
|
let html = `<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<title>html</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||||
|
<style></style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="margin:0 auto;width:1200px">
|
||||||
|
${template}
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>`
|
||||||
|
return html
|
||||||
|
},
|
||||||
initBreadcrumb() {
|
initBreadcrumb() {
|
||||||
if (this.reportId) {
|
if (this.reportId) {
|
||||||
this.result = this.$get("/performance/report/test/pro/info/" + this.reportId, res => {
|
this.result = this.$get("/performance/report/test/pro/info/" + this.reportId, res => {
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<chart/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ExportTestCaseReport"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
|
@ -66,6 +66,8 @@
|
||||||
this.charData.push(data);
|
this.charData.push(data);
|
||||||
});
|
});
|
||||||
this.reload();
|
this.reload();
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
reload() {
|
reload() {
|
||||||
this.isShow = false;
|
this.isShow = false;
|
||||||
|
|
|
@ -13,18 +13,25 @@
|
||||||
<el-row type="flex" class="head-bar">
|
<el-row type="flex" class="head-bar">
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<div class="name-edit">
|
<div class="name-edit">
|
||||||
<el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}</el-button>
|
<el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}
|
||||||
|
</el-button>
|
||||||
<span class="title">{{report.name}}</span>
|
<span class="title">{{report.name}}</span>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12" class="head-right">
|
<el-col :span="12" class="head-right">
|
||||||
<el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleSave">{{$t('commons.save')}}</el-button>
|
<el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleSave">
|
||||||
<el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleEdit">{{$t('test_track.plan_view.edit_component')}}</el-button>
|
{{$t('commons.save')}}
|
||||||
|
</el-button>
|
||||||
|
<el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleEdit">
|
||||||
|
{{$t('test_track.plan_view.edit_component')}}
|
||||||
|
</el-button>
|
||||||
|
<el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExport(report.name)">
|
||||||
|
{{$t('test_track.plan_view.export_report')}}
|
||||||
|
</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container" ref="resume">
|
||||||
<el-main>
|
<el-main>
|
||||||
<div class="preview" v-for="item in previews" :key="item.id">
|
<div class="preview" v-for="item in previews" :key="item.id">
|
||||||
<template-component :isReportView="true" :metric="metric" :preview="item"/>
|
<template-component :isReportView="true" :metric="metric" :preview="item"/>
|
||||||
|
@ -47,16 +54,20 @@
|
||||||
import RichTextComponent from "./TemplateComponent/RichTextComponent";
|
import RichTextComponent from "./TemplateComponent/RichTextComponent";
|
||||||
import TestCaseReportTemplateEdit from "./TestCaseReportTemplateEdit";
|
import TestCaseReportTemplateEdit from "./TestCaseReportTemplateEdit";
|
||||||
import TemplateComponent from "./TemplateComponent/TemplateComponent";
|
import TemplateComponent from "./TemplateComponent/TemplateComponent";
|
||||||
|
import writer from 'file-writer'
|
||||||
|
import ResumeCss from "../../../../../../../common/css/main.css";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "TestCaseReportView",
|
name: "TestCaseReportView",
|
||||||
components: {
|
components: {
|
||||||
TemplateComponent,
|
TemplateComponent, ResumeCss,
|
||||||
TestCaseReportTemplateEdit,
|
TestCaseReportTemplateEdit,
|
||||||
RichTextComponent, TestResultComponent, TestResultChartComponent, BaseInfoComponent},
|
RichTextComponent, TestResultComponent, TestResultChartComponent, BaseInfoComponent
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
result: {},
|
result: {},
|
||||||
|
imgUrl: "",
|
||||||
showDialog: false,
|
showDialog: false,
|
||||||
previews: [],
|
previews: [],
|
||||||
report: {},
|
report: {},
|
||||||
|
@ -134,6 +145,31 @@
|
||||||
handleEdit() {
|
handleEdit() {
|
||||||
this.$refs.templateEdit.open(this.reportId, true);
|
this.$refs.templateEdit.open(this.reportId, true);
|
||||||
},
|
},
|
||||||
|
/*导出报告*/
|
||||||
|
handleExport(name) {
|
||||||
|
let html = this.getHtml();
|
||||||
|
writer(`${name}.html`, html, 'utf-8');
|
||||||
|
},
|
||||||
|
getHtml() {
|
||||||
|
const template = this.$refs.resume.innerHTML
|
||||||
|
let html = `<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<title>html</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||||
|
<style>${ResumeCss}</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="margin:0 auto;width:1200px">
|
||||||
|
<img id ='div' :src = "imgUrl" :style=" {width: '1000px', height: '500px'}" />
|
||||||
|
${template}
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>`
|
||||||
|
return html
|
||||||
|
},
|
||||||
handleSave() {
|
handleSave() {
|
||||||
let param = {};
|
let param = {};
|
||||||
this.buildParam(param);
|
this.buildParam(param);
|
||||||
|
@ -186,7 +222,8 @@
|
||||||
this.metric.endTime = new Date(this.report.endTime);
|
this.metric.endTime = new Date(this.report.endTime);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -669,6 +669,7 @@ export default {
|
||||||
report_template: "Report template",
|
report_template: "Report template",
|
||||||
test_detail: "Test detail",
|
test_detail: "Test detail",
|
||||||
failure_case: "Failure case",
|
failure_case: "Failure case",
|
||||||
|
export_report: "Export Report"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
test_resource_pool: {
|
test_resource_pool: {
|
||||||
|
|
|
@ -674,6 +674,7 @@ export default {
|
||||||
report_template: "测试报告模版",
|
report_template: "测试报告模版",
|
||||||
test_detail: "测试详情",
|
test_detail: "测试详情",
|
||||||
failure_case: "失败用例",
|
failure_case: "失败用例",
|
||||||
|
export_report: "导出报告"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
test_resource_pool: {
|
test_resource_pool: {
|
||||||
|
|
|
@ -669,6 +669,7 @@ export default {
|
||||||
report_template: "測試報告模版",
|
report_template: "測試報告模版",
|
||||||
test_detail: "測試詳情",
|
test_detail: "測試詳情",
|
||||||
failure_case: "失敗用例",
|
failure_case: "失敗用例",
|
||||||
|
export_report: "匯出報告"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
test_resource_pool: {
|
test_resource_pool: {
|
||||||
|
|
Loading…
Reference in New Issue