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

fix(报表统计): 优化饼状图的展示方式以及导出细节 

--bug=1021171 --user=宋天阳 【报表统计】github#20870，测试用例统计图，报表展示数值重叠，导出后缺少图表
https://www.tapd.cn/55049933/s/1351691
This commit is contained in:
song-tianyang 2023-03-16 18:26:40 +08:00 committed by 建国
parent 98028b4ff9
commit 8a6121e097
10 changed files with 780 additions and 366 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,14 @@ import {
import i18n from "../i18n";
import html2canvas from "html2canvas";
import JsPDF from "jspdf";
/**
* 同一行的多个文本框高度保持一致
* 同时支持 autosize 的功能
* @param size 同一行中文本框的个数
* @param index 编辑行的下标
* 如果编辑某一行，则只调整某一行，提升效率
*/
import calcTextareaHeight from "element-ui/packages/input/src/calcTextareaHeight";
export function setCustomizeColor(color) {
// 自定义主题风格
@ -312,7 +320,7 @@ export function sizeToByte(size) {
for (i++; i < sizeUnits.length; ) {
let unit = sizeUnits[i];
if (size.indexOf(unit) !== -1) {
return size.toString().replace(unit, "") * Math.pow(k, i)
return size.toString().replace(unit, "") * Math.pow(k, i);
}
}
}
@ -325,15 +333,6 @@ export function getTypeByFileName(filename) {
return type.toUpperCase();
}
/**
* 同一行的多个文本框高度保持一致
* 同时支持 autosize 的功能
* @param size 同一行中文本框的个数
* @param index 编辑行的下标
* 如果编辑某一行，则只调整某一行，提升效率
*/
import calcTextareaHeight from "element-ui/packages/input/src/calcTextareaHeight";
export function resizeTextarea(size = 2, index) {
let textareaList = document.querySelectorAll(
".sync-textarea .el-textarea__inner"
@ -404,7 +403,7 @@ export function downloadPDF(ele, pdfName) {
let scale = canvas.height / ((canvas.width / 592.28) * 841.89);
scale = scale > 3 ? 1 : 2;
context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
let scrollWidth = document.getElementById("apiTestReport").scrollWidth;
let scrollWidth = ele.scrollWidth;
html2canvas(ele, {
scale: scale, // 背景灰色
background: "#FFFFFF",

13
report-stat/backend/src/main/java/io/metersphere/reportstatistics/service/TestCaseCountService.java
View File

@ -2,6 +2,7 @@ package io.metersphere.reportstatistics.service;
import io.metersphere.base.domain.CustomField;
import io.metersphere.base.domain.User;
import io.metersphere.commons.constants.MicroServiceName;
import io.metersphere.commons.utils.DateUtils;
import io.metersphere.commons.utils.JSON;
import io.metersphere.i18n.Translator;
@ -15,15 +16,16 @@ import io.metersphere.reportstatistics.service.remote.apitest.ScenarioRemoteServ
import io.metersphere.reportstatistics.service.remote.performance.PerformanceRemoteService;
import io.metersphere.reportstatistics.service.remote.projectmanagement.TestCaseTemplateRemoteService;
import io.metersphere.reportstatistics.service.remote.track.TestCaseRemoteService;
import io.metersphere.reportstatistics.utils.DiscoveryUtil;
import io.metersphere.request.member.QueryMemberRequest;
import io.metersphere.service.BaseUserService;
import jakarta.annotation.Resource;
import org.apache.commons.collections.CollectionUtils;
import org.apache.commons.collections.MapUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import jakarta.annotation.Resource;
import java.util.*;
@Service
@ -126,7 +128,6 @@ public class TestCaseCountService {
} else if (StringUtils.equalsIgnoreCase(request.getTimeRangeUnit(), "year")) {
dateCountType = Calendar.YEAR;
}
if (dateCountType != 0 && request.getTimeRange() != 0) {
long startTime = DateUtils.dateSum(new Date(), (0 - request.getTimeRange()), dateCountType).getTime();
request.setStartTime(startTime);
@ -246,7 +247,7 @@ public class TestCaseCountService {
}
if (yAxisSelectTestCase) {
if (yAxisSelectTestCase && DiscoveryUtil.hasService(MicroServiceName.TEST_TRACK)) {
functionCaseCountResult = testCaseRemoteService.countTestCaseByRequest(request);
if (functionCaseCountResult.isEmpty() && StringUtils.equalsIgnoreCase(request.getXaxis(), "casetype")) {
TestCaseCountChartResult result = new TestCaseCountChartResult();
@ -255,7 +256,7 @@ public class TestCaseCountService {
functionCaseCountResult.add(result);
}
}
if (yAxisSelectApi) {
if (yAxisSelectApi && DiscoveryUtil.hasService(MicroServiceName.API_TEST)) {
Map<String, List<String>> apiCaseFilterList = new HashMap<>();
if (MapUtils.isNotEmpty(request.getFilterSearchList())) {
for (Map.Entry<String, List<String>> entry : request.getFilterSearchList().entrySet()) {
@ -274,7 +275,7 @@ public class TestCaseCountService {
apiCaseCountResult.add(result);
}
}
if (yAxisSelectScenarioCase) {
if (yAxisSelectScenarioCase && DiscoveryUtil.hasService(MicroServiceName.API_TEST)) {
scenarioCaseCount = scenarioRemoteService.countTestCaseByRequest(request);
if (scenarioCaseCount.isEmpty() && StringUtils.equalsIgnoreCase(request.getXaxis(), "casetype")) {
TestCaseCountChartResult result = new TestCaseCountChartResult();
@ -283,7 +284,7 @@ public class TestCaseCountService {
scenarioCaseCount.add(result);
}
}
if (yAxisSelectLoad) {
if (yAxisSelectLoad && DiscoveryUtil.hasService(MicroServiceName.PERFORMANCE_TEST)) {
Map<String, List<String>> loadCaseFilterMap = new HashMap<>();
if (MapUtils.isNotEmpty(request.getFilterSearchList())) {
for (Map.Entry<String, List<String>> entry : request.getFilterSearchList().entrySet()) {

30
report-stat/backend/src/main/java/io/metersphere/reportstatistics/utils/DiscoveryUtil.java Normal file
View File

@ -0,0 +1,30 @@
package io.metersphere.reportstatistics.utils;
import io.metersphere.commons.utils.CommonBeanFactory;
import io.metersphere.dto.ServiceDTO;
import org.springframework.cloud.client.discovery.DiscoveryClient;
import java.util.List;
import java.util.Set;
import java.util.stream.Collectors;
public class DiscoveryUtil {
public static boolean hasService(String serviceId) {
return getServiceIdSet().contains(serviceId);
}
public static Set<String> getServiceIdSet() {
DiscoveryClient discoveryClient = CommonBeanFactory.getBean(DiscoveryClient.class);
return discoveryClient.getServices()
.stream()
.collect(Collectors.toSet());
}
public static List<ServiceDTO> getServices() {
DiscoveryClient discoveryClient = CommonBeanFactory.getBean(DiscoveryClient.class);
return discoveryClient.getServices().stream()
.map(service -> new ServiceDTO(service, discoveryClient.getInstances(service).get(0).getPort()))
.collect(Collectors.toList());
}
}

85
report-stat/frontend/src/business/base/ReportHeader.vue
View File

@ -1,18 +1,39 @@
<template>
<div class="ms-header">
<el-row>
<div class="ms-div">{{ title }}
<div class="ms-div">
{{ title }}
<span v-if="historyReportName" class="history-report-name">
{{ historyReportName }}
</span>
</div>
<div class="ms-header-right">
<el-button type="primary" v-if="isSaveAsButtonShow" size="mini" @click="handleSaveAs" :disabled="readOnly">
{{ $t('commons.save_as') }}<i class="el-icon-files el-icon--right"></i></el-button>
<el-button type="primary" v-if="isSaveButtonShow" size="mini" @click="handleSave" :disabled="readOnly">
{{ $t('commons.save') }}<i class="el-icon-files el-icon--right"></i></el-button>
<el-button type="" size="mini" @click="handleExport" :disabled="readOnly">{{ $t('report.export') }}<i
class="el-icon-download el-icon--right"></i></el-button>
<el-button
type="primary"
v-if="isSaveAsButtonShow"
size="mini"
@click="handleSaveAs"
:disabled="readOnly"
>
{{ $t("commons.save_as") }}<i class="el-icon-files el-icon--right"></i
></el-button>
<el-button
type="primary"
v-if="isSaveButtonShow"
size="mini"
@click="handleSave"
:disabled="readOnly"
>
{{ $t("commons.save") }}<i class="el-icon-files el-icon--right"></i
></el-button>
<el-button
type=""
size="mini"
@click="handleExport"
:disabled="readOnly"
>{{ $t("report.export")
}}<i class="el-icon-download el-icon--right"></i
></el-button>
<span class="ms-span">|</span>
<i class="el-icon-close report-alt-ico" @click="close" />
</div>
@ -21,15 +42,14 @@
</template>
<script>
import {exportPdf,} from "metersphere-frontend/src/utils";
import { hasPermission } from "metersphere-frontend/src/utils/permission";
import html2canvas from 'html2canvas';
import html2canvas from "html2canvas";
export default {
name: "ReportHeader",
components: {},
data() {
return {}
return {};
},
props: {
title: String,
@ -37,20 +57,22 @@ export default {
historyReportName: String,
},
watch: {
historyReportName() {
}
},
created() {
historyReportName() {},
},
created() {},
computed: {
readOnly() {
return !hasPermission('PROJECT_REPORT_ANALYSIS:READ+EXPORT');
return !hasPermission("PROJECT_REPORT_ANALYSIS:READ+EXPORT");
},
isSaveAsButtonShow() {
if (!this.historyReportId || this.historyReportId === null || this.historyReportId === '') {
if (
!this.historyReportId ||
this.historyReportId === null ||
this.historyReportId === ""
) {
return false;
} else {
if (hasPermission('PROJECT_REPORT_ANALYSIS:READ+CREATE')) {
if (hasPermission("PROJECT_REPORT_ANALYSIS:READ+CREATE")) {
return true;
} else {
return false;
@ -58,28 +80,23 @@ export default {
}
},
isSaveButtonShow() {
if (hasPermission('PROJECT_REPORT_ANALYSIS:READ+UPDATE')) {
if (hasPermission("PROJECT_REPORT_ANALYSIS:READ+UPDATE")) {
return true;
} else {
return false;
}
}
},
},
methods: {
handleExport() {
let name = this.title;
this.$nextTick(function () {
setTimeout(() => {
html2canvas(document.getElementById('reportAnalysis'), {
scale: 2
}).then(function (canvas) {
exportPdf(name, [canvas]);
});
}, 1000);
});
this.$emit("exportReport", this.title);
},
handleSave() {
if (!this.historyReportId || this.historyReportId === null || this.historyReportId === '') {
if (
!this.historyReportId ||
this.historyReportId === null ||
this.historyReportId === ""
) {
this.$emit("selectAndSaveReport");
} else {
this.$emit("updateReport");
@ -89,16 +106,16 @@ export default {
this.$emit("selectAndSaveReport");
},
close() {
this.$emit('closePage');
this.$emit("closePage");
},
},
}
};
</script>
<style scoped>
.ms-header {
border-bottom: 1px solid #E6E6E6;
background-color: #FFF;
border-bottom: 1px solid #e6e6e6;
background-color: #fff;
}
.ms-div {

134
report-stat/frontend/src/business/projectstatistics/ProjectStatistics.vue
View File

@ -2,9 +2,19 @@
<div>
<el-row type="flex">
<p class="tip">
<span class="ms-span">{{ $t('commons.report_statistics.name') }}</span>
<el-select v-model="reportType" class="ms-col-type" size="mini" style="width: 120px">
<el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in reportTypes"/>
<span class="ms-span">{{ $t("commons.report_statistics.name") }}</span>
<el-select
v-model="reportType"
class="ms-col-type"
size="mini"
style="width: 120px"
>
<el-option
:key="t.id"
:value="t.id"
:label="t.name"
v-for="t in reportTypes"
/>
</el-select>
</p>
</el-row>
@ -15,43 +25,78 @@
</transition>
<!-- 测试用例趋势页面 -->
<ms-drawer :visible="testCaseTrendDrawer" :size="100" @close="close" direction="right" :show-full-screen="false"
:is-show-close="false" style="overflow: hidden">
<ms-drawer
:visible="testCaseTrendDrawer"
:size="100"
@close="close"
direction="right"
:show-full-screen="false"
:is-show-close="false"
style="overflow: hidden"
>
<template v-slot:header>
<report-header :title="$t('commons.report_statistics.test_case_analysis')" :history-report-id="historyReportId"
<report-header
:title="$t('commons.report_statistics.test_case_analysis')"
:history-report-id="historyReportId"
:history-report-name="historyReportName"
@closePage="close" @updateReport="updateReport"
@selectAndSaveReport="openSaveReportDialog('saveAs')"/>
@closePage="close"
@updateReport="updateReport"
@exportReport="exportReport"
@selectAndSaveReport="openSaveReportDialog('saveAs')"
/>
</template>
<test-analysis-container @initHistoryReportId="initHistoryReportId" ref="testAnalysisContainer"/>
<test-analysis-container
@initHistoryReportId="initHistoryReportId"
ref="testAnalysisContainer"
/>
</ms-drawer>
<!-- 测试用例分析页面 -->
<ms-drawer :visible="testCaseCountDrawer" :size="100" @close="close" direction="right" :show-full-screen="false"
:is-show-close="false" style="overflow: hidden">
<ms-drawer
:visible="testCaseCountDrawer"
:size="100"
@close="close"
direction="right"
:show-full-screen="false"
:is-show-close="false"
style="overflow: hidden"
>
<template v-slot:header>
<report-header :title="$t('commons.report_statistics.test_case_count')" :history-report-id="historyReportId"
<report-header
:title="$t('commons.report_statistics.test_case_count')"
:history-report-id="historyReportId"
@closePage="close"
:history-report-name="historyReportName"
@updateReport="updateReport"
@selectAndSaveReport="openSaveReportDialog('saveAs')"/>
@exportReport="exportReport"
@selectAndSaveReport="openSaveReportDialog('saveAs')"
/>
</template>
<test-case-count-container @initHistoryReportId="initHistoryReportId" ref="testCaseCountContainer"/>
<test-case-count-container
@initHistoryReportId="initHistoryReportId"
ref="testCaseCountContainer"
/>
</ms-drawer>
<el-dialog
:title="$t('commons.save')"
:visible.sync="dialogFormVisible"
width="30%"
:before-close="handleCloseSaveReportDialog">
:before-close="handleCloseSaveReportDialog"
>
<el-form :model="form" :rules="saveReportRules" ref="saveReportRuleForm">
<el-form-item :label="$t('commons.input_name')" prop="reportName" label-width="120px">
<el-form-item
:label="$t('commons.input_name')"
prop="reportName"
label-width="120px"
>
<el-input v-model="form.reportName" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveReport">{{ $t('commons.confirm') }}</el-button>
<el-button type="primary" @click="saveReport">{{
$t("commons.confirm")
}}</el-button>
</div>
</el-dialog>
</div>
@ -63,11 +108,17 @@ import TestAnalysisContainer from "@/business/projectstatistics/track/TestAnalys
import MsDrawer from "metersphere-frontend/src/components/MsDrawer";
import ReportHeader from "@/business/base/ReportHeader";
import TestCaseCountContainer from "@/business/projectstatistics/casecount/TestCaseCountContainer";
import html2canvas from "html2canvas";
export default {
name: "ReportAnalysis",
components: {ReportCard, TestAnalysisContainer, MsDrawer, ReportHeader, TestCaseCountContainer},
components: {
ReportCard,
TestAnalysisContainer,
MsDrawer,
ReportHeader,
TestCaseCountContainer,
},
data() {
return {
reportType: "track",
@ -75,7 +126,7 @@ export default {
testCaseCountDrawer: false,
historyReportId: "",
historyReportName: "",
reportTypes: [{id: 'track', name: this.$t('test_track.test_track')}],
reportTypes: [{ id: "track", name: this.$t("test_track.test_track") }],
dialogFormVisible: false,
form: {
reportName: "",
@ -83,19 +134,30 @@ export default {
},
saveReportRules: {
reportName: [
{required: true, message: this.$t('commons.input_name'), trigger: 'blur'},
{min: 1, max: 20, message: '长度不大于20个字符', trigger: 'blur'}
{
required: true,
message: this.$t("commons.input_name"),
trigger: "blur",
},
{ min: 1, max: 20, message: "长度不大于20个字符", trigger: "blur" },
],
}
}
},
};
},
methods: {
exportReport(title) {
if (this.testCaseCountDrawer && this.$refs.testCaseCountContainer) {
this.$refs.testCaseCountContainer.handleExport();
} else if (this.testCaseTrendDrawer) {
this.$refs.testAnalysisContainer.handleExport();
}
},
openCard(type) {
this.historyReportName = "";
this.historyReportId = "";
if (type === 'trackTestCase') {
if (type === "trackTestCase") {
this.testCaseTrendDrawer = true;
} else if (type === 'countTestCase') {
} else if (type === "countTestCase") {
this.testCaseCountDrawer = true;
}
},
@ -119,12 +181,18 @@ export default {
}
},
saveReport() {
this.$refs['saveReportRuleForm'].validate((valid) => {
this.$refs["saveReportRuleForm"].validate((valid) => {
if (valid) {
if (this.testCaseTrendDrawer) {
this.$refs.testAnalysisContainer.saveAndSaveAsReport(this.form.reportName, this.form.saveType);
this.$refs.testAnalysisContainer.saveAndSaveAsReport(
this.form.reportName,
this.form.saveType
);
} else if (this.testCaseCountDrawer) {
this.$refs.testCaseCountContainer.saveAndSaveAsReport(this.form.reportName, this.form.saveType);
this.$refs.testCaseCountContainer.saveAndSaveAsReport(
this.form.reportName,
this.form.saveType
);
}
this.form.reportName = "";
this.form.saveType = "";
@ -142,14 +210,14 @@ export default {
this.form.reportName = "";
this.form.saveType = "";
this.dialogFormVisible = false;
}
},
}
},
};
</script>
<style scoped>
.ms-span {
margin: 10px 10px 0px
margin: 10px 10px 0px;
}
.tip {

187
report-stat/frontend/src/business/projectstatistics/casecount/TestCaseCountContainer.vue
View File

@ -1,24 +1,53 @@
<template>
<div>
<el-container v-loading="loading" :style="{ 'max-height': (h-50) + 'px', 'overflow': 'auto'}">
<el-aside v-if="!isHide" :width="!isHide ?'235px':'0px'" :style="{ 'margin-left': '5px'}">
<history-report-data report-type="TEST_CASE_COUNT"
@selectReport="selectReport" @removeHistoryReportId="removeHistoryReportId"
ref="historyReport"/>
<el-container
v-loading="loading"
:style="{ 'max-height': h - 50 + 'px', overflow: 'auto' }"
>
<el-aside
v-if="!isHide"
:width="!isHide ? '235px' : '0px'"
:style="{ 'margin-left': '5px' }"
>
<history-report-data
report-type="TEST_CASE_COUNT"
@selectReport="selectReport"
@removeHistoryReportId="removeHistoryReportId"
ref="historyReport"
/>
</el-aside>
<el-main class="ms-main" id="reportAnalysis" style="padding: 0px 5px 0px">
<div id="testCaseCountPicDiv">
<div>
<test-case-count-chart @hidePage="hidePage" @orderCharts="orderCharts"
ref="analysisChart" @updateChartType="updateChartType"
:chart-width="chartWidth" :load-option="loadOption" :pie-option="pieOption"/>
<test-case-count-chart
@hidePage="hidePage"
@orderCharts="orderCharts"
ref="analysisChart"
@updateChartType="updateChartType"
:chart-width="chartWidth"
:load-option="loadOption"
:pie-option="pieOption"
/>
</div>
<div class="ms-row">
<test-case-count-table
:group-name="getGroupNameStr(options.xaxis)"
:show-columns="options.yaxis"
ref="caseCountTable"
:tableData="tableData"
/>
</div>
<div class="ms-row" v-if="!isHide">
<test-case-count-table :group-name="getGroupNameStr(options.xaxis)" :show-columns="options.yaxis"
:tableData="tableData"/>
</div>
</el-main>
<el-aside v-if="!isHide" style="height: 100%" :width="!isHide ?'485px':'0px'">
<test-case-count-filter @filterCharts="filterCharts" ref="countFilter"/>
<el-aside
v-if="!isHide"
style="height: 100%"
:width="!isHide ? '485px' : '0px'"
>
<test-case-count-filter
@filterCharts="filterCharts"
ref="countFilter"
/>
</el-aside>
</el-container>
</div>
@ -28,16 +57,24 @@
import TestCaseCountChart from "./chart/TestCaseCountChart";
import TestCaseCountTable from "@/business/projectstatistics/casecount/table/TestCaseCountTable";
import TestCaseCountFilter from "./filter/TestCaseCountFilter";
import {exportPdf} from "metersphere-frontend/src/utils";
import { getCurrentProjectID } from "metersphere-frontend/src/utils/token";
import html2canvas from 'html2canvas';
import { downloadPDF } from "metersphere-frontend/src/utils";
import { getCountReport } from "@/api/report";
import HistoryReportData from "../../base/HistoryReportData";
import {createHistoryReport, selectHistoryReportById, updateHistoryReport} from "@/api/history-report";
import {
createHistoryReport,
selectHistoryReportById,
updateHistoryReport,
} from "@/api/history-report";
export default {
name: "TestCaseCountContainer",
components: {TestCaseCountChart, TestCaseCountTable, TestCaseCountFilter, HistoryReportData},
components: {
TestCaseCountChart,
TestCaseCountTable,
TestCaseCountFilter,
HistoryReportData,
},
data() {
return {
isHide: false,
@ -52,7 +89,7 @@ export default {
yAxis: {},
label: {},
tooltip: {},
series: []
series: [],
},
pieOption: {
legend: {},
@ -71,26 +108,29 @@ export default {
this.chartType = value;
},
handleExport() {
let name = this.$t('commons.report_statistics.test_case_analysis');
this.hidePage(true);
let name = this.$t("commons.report_statistics.test_case_count");
this.$nextTick(function () {
setTimeout(() => {
html2canvas(document.getElementById('reportAnalysis'), {
scale: 2
}).then(function (canvas) {
exportPdf(name, [canvas]);
});
downloadPDF(
document.getElementById("testCaseCountPicDiv"),
name || "MeterSphere-report"
);
}, 1000);
});
},
hidePage(isHide) {
this.isHide = isHide;
this.$refs.analysisChart.reCountWidth(isHide);
this.$refs.caseCountTable.reCountWidth(isHide);
},
close() {
this.$emit('closePage');
this.$emit("closePage");
},
init(opt) {
this.options = opt;
this.loading = getCountReport(opt).then(response => {
this.loading = getCountReport(opt).then((response) => {
let data = response.data.barChartDTO;
let pieData = response.data.pieChartDTO;
let selectTableData = response.data.tableDTOs;
@ -101,19 +141,18 @@ export default {
if (!formatData) {
return;
}
if (typeof (formatData.legend) === 'string') {
if (typeof formatData.legend === "string") {
formatData.legend = JSON.parse(formatData.legend);
}
if (typeof (formatData.xaxis) === 'string') {
if (typeof formatData.xaxis === "string") {
formatData.xaxis = JSON.parse(formatData.xaxis);
}
if (typeof (formatData.series) === 'string') {
if (typeof formatData.series === "string") {
formatData.series = JSON.parse(formatData.series);
}
if (typeof (formatData.title) === 'string') {
if (typeof formatData.title === "string") {
formatData.title = JSON.parse(formatData.title);
}
},
initPic(barData, pieData, selectTableData) {
this.loading = true;
@ -126,9 +165,9 @@ export default {
this.loadOption.xaxis = barData.xaxis;
this.loadOption.series = barData.series;
this.loadOption.grid = {
bottom: '75px',//距离下边距
bottom: "75px", //距离下边距
};
this.loadOption.series.forEach(item => {
this.loadOption.series.forEach((item) => {
if (this.$refs.analysisChart) {
item.type = this.$refs.analysisChart.chartType;
}
@ -141,14 +180,14 @@ export default {
this.pieOption.series = pieData.series;
this.pieOption.title = pieData.title;
this.pieOption.grid = {
bottom: '75px',//距离下边距
bottom: "75px", //距离下边距
};
if (pieData.width) {
this.pieOption.width = pieData.width;
this.chartWidth = pieData.width;
}
if (this.pieOption.series) {
this.pieOption.series.forEach(item => {
this.pieOption.series.forEach((item) => {
if (this.$refs.analysisChart) {
item.type = this.$refs.analysisChart.chartType;
}
@ -158,7 +197,10 @@ export default {
if (selectTableData) {
this.tableData = selectTableData;
}
this.$refs.analysisChart.setPieOptionAndBarOption(this.loadOption, this.pieOption);
this.$refs.analysisChart.setPieOptionAndBarOption(
this.loadOption,
this.pieOption
);
this.loading = false;
this.$refs.analysisChart.generateOption(this.chartType);
},
@ -181,9 +223,9 @@ export default {
chartType: this.chartType,
};
obj.dataOption = JSON.stringify(dataOptionObj);
obj.reportType = 'TEST_CASE_COUNT';
obj.reportType = "TEST_CASE_COUNT";
updateHistoryReport(obj).then(() => {
this.$alert(this.$t('commons.save_success'));
this.$alert(this.$t("commons.save_success"));
this.$refs.historyReport.initReportData();
});
},
@ -199,9 +241,9 @@ export default {
chartType: this.chartType,
};
obj.dataOption = JSON.stringify(dataOptionObj);
obj.reportType = 'TEST_CASE_COUNT';
obj.reportType = "TEST_CASE_COUNT";
createHistoryReport(obj).then(() => {
this.$alert(this.$t('commons.save_success'));
this.$alert(this.$t("commons.save_success"));
this.$refs.historyReport.initReportData();
});
},
@ -210,18 +252,19 @@ export default {
if (selectId) {
this.loading = true;
let paramObj = {
id: selectId
}
selectHistoryReportById(paramObj).then((response) => {
id: selectId,
};
selectHistoryReportById(paramObj).then(
(response) => {
let reportData = response.data;
if (reportData) {
selectName = reportData.name;
if (reportData.dataOption) {
let dataOptionObj = JSON.parse(reportData.dataOption);
if (dataOptionObj.chartType) {
if (dataOptionObj.chartType === "\"bar\"") {
if (dataOptionObj.chartType === '"bar"') {
this.chartType = "bar";
} else if (dataOptionObj.chartType === "\"pie\"") {
} else if (dataOptionObj.chartType === '"pie"') {
this.chartType = "pie";
} else {
this.chartType = dataOptionObj.chartType;
@ -229,7 +272,11 @@ export default {
} else {
this.chartType = "bar";
}
this.initPic(dataOptionObj.loadOption, dataOptionObj.pieOption, dataOptionObj.tableData);
this.initPic(
dataOptionObj.loadOption,
dataOptionObj.pieOption,
dataOptionObj.tableData
);
}
if (reportData.selectOption) {
let selectOptionObj = JSON.parse(reportData.selectOption);
@ -237,27 +284,39 @@ export default {
}
this.loading = false;
}
this.$emit('initHistoryReportId', selectId, selectName);
}, (error) => {
this.$emit("initHistoryReportId", selectId, selectName);
},
(error) => {
this.loading = false;
this.removeHistoryReportId();
});
}
);
}
},
removeHistoryReportId() {
this.$emit('initHistoryReportId', "", "");
this.$emit("initHistoryReportId", "", "");
},
getGroupNameStr(groupName) {
if (groupName === 'creator') {
return this.$t('commons.report_statistics.report_filter.select_options.creator');
} else if (groupName === 'maintainer') {
return this.$t('commons.report_statistics.report_filter.select_options.maintainer');
} else if (groupName === 'casetype') {
return this.$t('commons.report_statistics.report_filter.select_options.case_type');
} else if (groupName === 'casestatus') {
return this.$t('commons.report_statistics.report_filter.select_options.case_status');
} else if (groupName === 'caselevel') {
return this.$t('commons.report_statistics.report_filter.select_options.case_level');
if (groupName === "creator") {
return this.$t(
"commons.report_statistics.report_filter.select_options.creator"
);
} else if (groupName === "maintainer") {
return this.$t(
"commons.report_statistics.report_filter.select_options.maintainer"
);
} else if (groupName === "casetype") {
return this.$t(
"commons.report_statistics.report_filter.select_options.case_type"
);
} else if (groupName === "casestatus") {
return this.$t(
"commons.report_statistics.report_filter.select_options.case_status"
);
} else if (groupName === "caselevel") {
return this.$t(
"commons.report_statistics.report_filter.select_options.case_level"
);
} else {
return "";
}
@ -269,7 +328,7 @@ export default {
yAxis: {},
label: {},
tooltip: {},
series: []
series: [],
};
this.pieOption = {
legend: {},
@ -286,12 +345,12 @@ export default {
this.saveReport(reportName);
},
saveAndSaveAsReport(reportName, saveType) {
if (saveType === 'save') {
if (saveType === "save") {
this.saveReport(reportName);
} else if (saveType === 'saveAs') {
} else if (saveType === "saveAs") {
this.selectAndSaveReport(reportName);
}
}
},
},
};
</script>

257
report-stat/frontend/src/business/projectstatistics/casecount/chart/TestCaseCountChart.vue
View File

@ -1,12 +1,20 @@
<template>
<div v-loading="loading">
<el-card class="ms-test-chart" :style="{ width: w+'px', height: h + 'px'}" ref="msDrawer">
<el-card
class="ms-test-chart"
:style="{ width: w + 'px', height: h + 'px' }"
ref="msDrawer"
>
<el-row class="ms-row">
<p class="tip"><span style="margin-left: 5px"></span> {{ $t('commons.report_statistics.chart') }} </p>
<p class="tip">
<span style="margin-left: 5px"></span>
{{ $t("commons.report_statistics.chart") }}
</p>
<div class="ms-test-chart-header" v-if="!readOnly">
<el-dropdown @command="exportCommand" :hide-on-click="false">
<span class="el-dropdown-link">
{{ $t('commons.export') }}<i class="el-icon-arrow-down el-icon--right"></i>
{{ $t("commons.export")
}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="jpg">JPG</el-dropdown-item>
@ -14,26 +22,63 @@
</el-dropdown-menu>
</el-dropdown>
<span style="margin: 0px 10px 10px">|</span>
<el-select v-model="chartType" class="ms-col-type" size="mini" style="width: 100px" @change="generateOption">
<el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in charts"/>
<el-select
v-model="chartType"
class="ms-col-type"
size="mini"
style="width: 100px"
@change="generateOption"
>
<el-option
:key="t.id"
:value="t.id"
:label="t.name"
v-for="t in charts"
/>
</el-select>
<span style="margin: 0px 10px 10px">|</span>
<el-select v-model="order" class="ms-col-type" size="mini" style="width: 120px" @change="orderCharts">
<el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in orders"/>
<el-select
v-model="order"
class="ms-col-type"
size="mini"
style="width: 120px"
@change="orderCharts"
>
<el-option
:key="t.id"
:value="t.id"
:label="t.name"
v-for="t in orders"
/>
</el-select>
<span style="margin: 0px 10px 10px">|</span>
<font-awesome-icon v-if="!isFullScreen && showFullScreen" class="report-alt-ico" :icon="['fa', 'expand-alt']"
size="lg" @click="fullScreen"/>
<font-awesome-icon v-if="isFullScreen && showFullScreen" class="report-alt-ico" :icon="['fa', 'compress-alt']"
size="lg" @click="unFullScreen"/>
<font-awesome-icon
v-if="!isFullScreen && showFullScreen"
class="report-alt-ico"
:icon="['fa', 'expand-alt']"
size="lg"
@click="fullScreen"
/>
<font-awesome-icon
v-if="isFullScreen && showFullScreen"
class="report-alt-ico"
:icon="['fa', 'compress-alt']"
size="lg"
@click="unFullScreen"
/>
</div>
</el-row>
<el-row>
<div class="chart-style">
<ms-chart ref="chart1" v-if="!loading" :options="dataOption"
:style="{width: chartWidthNumber+'px', height: (h-70) + 'px'}" class="chart-config"
<ms-chart
ref="chart1"
v-if="!loading"
:options="dataOption"
:style="{ width: chartWidthNumber + 'px', height: h - 70 + 'px' }"
class="chart-config"
:autoresize="true"
id="picChart"/>
id="picChart"
/>
</div>
</el-row>
</el-card>
@ -42,6 +87,7 @@
<script>
import MsChart from "metersphere-frontend/src/components/chart/MsChart";
import html2canvas from "html2canvas";
export default {
name: "TestCaseCountChart",
@ -68,24 +114,28 @@ export default {
type: Boolean,
default() {
return true;
}
},
},
charts: [
{id: 'bar', name: this.$t('commons.report_statistics.bar')},
{id: 'pie', name: this.$t('commons.report_statistics.pie')}
{ id: "bar", name: this.$t("commons.report_statistics.bar") },
{ id: "pie", name: this.$t("commons.report_statistics.pie") },
],
order: "",
orders: [{id: '', name: this.$t('commons.sort_default')}, {
id: 'desc',
name: this.$t('commons.report_statistics.desc')
}, {
id: 'asc',
name: this.$t('commons.report_statistics.asc')
}],
orders: [
{ id: "", name: this.$t("commons.sort_default") },
{
id: "desc",
name: this.$t("commons.report_statistics.desc"),
},
{
id: "asc",
name: this.$t("commons.report_statistics.asc"),
},
],
loading: false,
options: {},
chartType: "bar",
}
};
},
created() {
this.dataOption = this.loadOption;
@ -104,32 +154,109 @@ export default {
},
},
methods: {
reCountWidth(isHideOther) {
if (isHideOther) {
this.w = document.documentElement.clientWidth - 50;
} else {
this.w = document.documentElement.clientWidth - 760;
}
this.generateOption(this.chartType);
this.countChartWidth();
this.reload();
},
countChartWidth() {
if (this.chartWidth === 0 || this.chartType === 'bar') {
if (this.chartWidth === 0 || this.chartType === "bar") {
this.chartWidthNumber = this.w;
} else if (
this.chartType === "pie" &&
this.dataOption.width &&
this.dataOption.width > 0
) {
this.chartWidthNumber = this.dataOption.width;
} else {
this.chartWidthNumber = this.chartWidth;
}
},
orderCharts() {
this.$emit('orderCharts', this.order);
this.$emit("orderCharts", this.order);
},
generateOption(chartTypeParam) {
if (chartTypeParam) {
this.chartType = chartTypeParam;
}
if (this.chartType === 'pie') {
this.dataOption = this.pieOption;
if (this.chartType === "pie") {
this.dataOption = this.formatPieOption(this.pieOption);
} else {
this.dataOption = this.loadOption;
}
if (this.dataOption.series) {
this.dataOption.series.forEach(item => {
item.type = this.chartType;
this.dataOption.series.forEach((item) => {
item.type = chartTypeParam;
});
}
this.reload();
},
formatPieOption(reformatPieOption) {
let finalPieOption = reformatPieOption;
/**
* 根据现有的 width，动态计算饼图各个模块的位置。
* 假设饼图共n个， 一行为c，一共r行
* 则 r 取 200 + 350 * c <= width 的最大值。
* 高度为： n/r 进一法取整数， height = 200*n
* 第一行
* 第一个饼图位置(center属性)为："center": ["200", "150"],title位置："left": "200","top": "200",
* 第二个饼图位置(center属性)为："center": ["550", "150"],title位置："left": "550","top": "200",
* 第二行
* 第一个饼图位置(center属性)为："center": ["200", "350"],title位置："left": "200","top": "400",
* 第二个饼图位置(center属性)为："center": ["550", "350"],title位置："left": "550","top": "400",
*/
this.h = document.documentElement.clientHeight * 0.5;
// "series" "title"
if (
finalPieOption.series &&
finalPieOption.title &&
finalPieOption.series.length > 0 &&
finalPieOption.series.length === finalPieOption.title.length
) {
let cNum = 0;
let rNum = 0;
let countWidth = this.w;
let countHeight = 0;
let allPieCount = finalPieOption.series.length;
if (countWidth >= 550) {
countWidth = countWidth - 200;
do {
cNum++;
countWidth = countWidth - 350;
} while (countWidth > 350);
if (cNum > 0) {
rNum = Math.ceil(allPieCount / cNum);
countHeight = 200 * rNum + 100;
if (countHeight > this.h) {
this.h = countHeight;
}
let pieRowIndex = 1; //饼状图起始行
for (let pieIndex = 0; pieIndex < allPieCount; pieIndex++) {
if (pieIndex >= cNum * pieRowIndex) {
pieRowIndex++;
}
let pieInRow = pieIndex;
if (pieIndex >= cNum) {
pieInRow = pieIndex % cNum;
}
finalPieOption.series[pieIndex].center = [
200 + 350 * pieInRow,
200 * pieRowIndex - 60,
];
finalPieOption.title[pieIndex].left = 200 + 350 * pieInRow;
finalPieOption.title[pieIndex].top = 200 * pieRowIndex;
}
finalPieOption.width = this.w;
}
}
}
return finalPieOption;
},
setPieOptionAndBarOption(barOption, pieOption) {
if (barOption) {
this.loadOption = barOption;
@ -139,33 +266,32 @@ export default {
}
},
reload() {
this.loading = true
this.loading = true;
this.$nextTick(() => {
this.loading = false;
})
});
},
fullScreen() {
this.originalW = this.w;
this.originalH = this.h;
this.w = document.body.clientWidth - 50;
this.h = document.body.clientHeight;
this.isFullScreen = true;
this.$emit('hidePage', true);
this.$emit("hidePage", true);
},
unFullScreen() {
this.w = this.originalW;
this.h = this.originalH;
this.isFullScreen = false;
this.$emit('hidePage', false);
this.$emit("hidePage", false);
},
getImages(command) {
let imageType = 'image/png';
if (command === 'jpg') {
imageType = 'image/jpg';
let imageType = "image/png";
if (command === "jpg") {
imageType = "image/jpg";
}
let returnImageData = "";
if (document.getElementById('picChart')) {
let chartsCanvas = document.getElementById('picChart').querySelectorAll('canvas')[0];
if (document.getElementById("picChart")) {
let chartsCanvas = document
.getElementById("picChart")
.querySelectorAll("canvas")[0];
if (chartsCanvas) {
// toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码
returnImageData = chartsCanvas && chartsCanvas.toDataURL(imageType);
@ -175,46 +301,50 @@ export default {
return returnImageData;
},
exportCommand(command) {
let fileName = 'report_pic.' + command;
if (document.getElementById('picChart')) {
let chartsCanvas = document.getElementById('picChart').querySelectorAll('canvas')[0]
let mime = 'image/png';
if (command === 'jpg') {
mime = 'image/jpg';
let fileName = "report_pic." + command;
if (document.getElementById("picChart")) {
let chartsCanvas = document
.getElementById("picChart")
.querySelectorAll("canvas")[0];
let mime = "image/png";
if (command === "jpg") {
mime = "image/jpg";
}
if (chartsCanvas) {
// toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码
let imageUrl = chartsCanvas && chartsCanvas.toDataURL(mime)
if (navigator.userAgent.indexOf('Trident') > -1) {
let imageUrl = chartsCanvas && chartsCanvas.toDataURL(mime);
if (navigator.userAgent.indexOf("Trident") > -1) {
// IE11
let arr = imageUrl.split(',')
let arr = imageUrl.split(",");
// atob() 函数对已经使用base64编码编码的数据字符串进行解码
let bstr = atob(arr[1])
let bstrLen = bstr.length
let bstr = atob(arr[1]);
let bstrLen = bstr.length;
// Uint8Array, 开辟 8 位无符号整数值的类型化数组。内容将初始化为 0
let u8arr = new Uint8Array(bstrLen)
let u8arr = new Uint8Array(bstrLen);
while (bstrLen--) {
// charCodeAt() 方法可返回指定位置的字符的 Unicode 编码
u8arr[bstrLen] = bstr.charCodeAt(bstrLen)
u8arr[bstrLen] = bstr.charCodeAt(bstrLen);
}
// msSaveOrOpenBlob 方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件，这是此类文件保存到“下载”文件夹的原因
window.navigator.msSaveOrOpenBlob(new Blob([u8arr], {type: mime}), fileName);
window.navigator.msSaveOrOpenBlob(
new Blob([u8arr], { type: mime }),
fileName
);
} else {
// 其他浏览器
let $a = document.createElement('a')
$a.setAttribute('href', imageUrl)
$a.setAttribute('download', fileName)
$a.click()
let $a = document.createElement("a");
$a.setAttribute("href", imageUrl);
$a.setAttribute("download", fileName);
$a.click();
}
}
}
},
},
}
};
</script>
<style scoped>
.ms-test-chart-header {
z-index: 999;
width: 380px;
@ -261,5 +391,4 @@ export default {
:deep(.el-card__body) {
padding: 0px;
}
</style>

67
report-stat/frontend/src/business/projectstatistics/casecount/table/TestCaseCountTable.vue
View File

@ -2,45 +2,62 @@
<div v-loading="loading" class="ms-div">
<el-card :style="{ width: w + 'px' }">
<el-row style="padding-top: 10px">
<p class="tip"><span style="margin-left: 5px"></span>{{ $t('commons.report_statistics.excel') }} </p>
<p class="tip">
<span style="margin-left: 5px"></span
>{{ $t("commons.report_statistics.excel") }}
</p>
</el-row>
<el-row>
<el-table
:data="tableData"
:max-height="tableHeight"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
row-key="id"
border
class="ms-table">
<el-table-column
prop="name"
:label="groupName">
</el-table-column>
class="ms-table"
>
<el-table-column prop="name" :label="groupName"> </el-table-column>
<el-table-column
prop="allCount"
:label="$t('commons.report_statistics.count')">
:label="$t('commons.report_statistics.count')"
>
</el-table-column>
<el-table-column
prop="testCaseCount"
:label="$t('api_test.home_page.failed_case_list.table_value.case_type.functional')"
:label="
$t(
'api_test.home_page.failed_case_list.table_value.case_type.functional'
)
"
v-if="isShowColumn('testCase')"
>
</el-table-column>
<el-table-column
prop="apiCaseCount"
:label="$t('api_test.home_page.failed_case_list.table_value.case_type.api')"
:label="
$t(
'api_test.home_page.failed_case_list.table_value.case_type.api'
)
"
v-if="isShowColumn('apiCase')"
>
</el-table-column>
<el-table-column
prop="scenarioCaseCount"
:label="$t('api_test.home_page.failed_case_list.table_value.case_type.scene')"
:label="
$t(
'api_test.home_page.failed_case_list.table_value.case_type.scene'
)
"
v-if="isShowColumn('scenarioCase')"
>
</el-table-column>
<el-table-column
prop="loadCaseCount"
:label="$t('api_test.home_page.failed_case_list.table_value.case_type.load')"
:label="
$t(
'api_test.home_page.failed_case_list.table_value.case_type.load'
)
"
v-if="isShowColumn('loadCase')"
>
</el-table-column>
@ -62,15 +79,15 @@ export default {
type: Boolean,
default() {
return false;
}
}
},
},
},
data() {
return {
tableHeight: "100px",
w: document.documentElement.clientWidth - 760,
loading: false,
}
};
},
created() {
this.getTableHeight();
@ -79,25 +96,30 @@ export default {
}
},
methods: {
reCountWidth(isHideOther) {
if (isHideOther) {
this.w = document.documentElement.clientWidth - 50;
} else {
this.w = document.documentElement.clientWidth - 760;
}
},
isShowColumn(type) {
if (this.showColumns) {
return this.showColumns.findIndex(item => item === type) >= 0;
return this.showColumns.findIndex((item) => item === type) >= 0;
} else {
return false;
}
},
getTableHeight() {
let countNumber = document.documentElement.clientHeight * 0.4 / 1 - 140;
let countNumber = (document.documentElement.clientHeight * 0.4) / 1 - 140;
countNumber = Math.ceil(countNumber);
this.tableHeight = countNumber + 'px';
}
this.tableHeight = countNumber + "px";
},
}
},
};
</script>
<style scoped>
.tip {
float: left;
font-size: 14px;
@ -118,5 +140,4 @@ export default {
:deep(.el-card__body) {
padding: 0px;
}
</style>

109
report-stat/frontend/src/business/projectstatistics/track/TestAnalysisContainer.vue
View File

@ -2,22 +2,35 @@
<div :style="{ height: h + 'px' }">
<el-container v-loading="loading" style="overflow: scroll">
<el-container class="ms-row">
<el-aside :width="!isHide ?'235px':'0px'" style="margin-left: 5px; max-height: 843px">
<history-report-data report-type="TEST_CASE_ANALYSIS"
@selectReport="selectReport" @removeHistoryReportId="removeHistoryReportId"
ref="historyReport"/>
<el-aside
:width="!isHide ? '235px' : '0px'"
style="margin-left: 5px; max-height: 843px"
>
<history-report-data
report-type="TEST_CASE_ANALYSIS"
@selectReport="selectReport"
@removeHistoryReportId="removeHistoryReportId"
ref="historyReport"
/>
</el-aside>
<el-main class="ms-main" id="reportAnalysis">
<div>
<test-analysis-chart @hidePage="hidePage" @orderCharts="orderCharts" ref="analysisChart"
:load-option="loadOption"/>
<test-analysis-chart
@hidePage="hidePage"
@orderCharts="orderCharts"
ref="analysisChart"
:load-option="loadOption"
/>
</div>
<div class="ms-row" v-if="!isHide">
<test-analysis-table :tableData="tableData" />
</div>
</el-main>
<el-aside :width="!isHide ? '485px' : '0px'">
<test-analysis-filter @filterCharts="filterCharts" ref="analysisFilter"/>
<test-analysis-filter
@filterCharts="filterCharts"
ref="analysisFilter"
/>
</el-aside>
</el-container>
</el-container>
@ -31,13 +44,22 @@ import TestAnalysisFilter from "./filter/TestAnalysisFilter";
import { getCurrentProjectID } from "metersphere-frontend/src/utils/token";
import { exportPdf } from "metersphere-frontend/src/utils";
import { getAnalysisReport } from "@/api/report";
import html2canvas from 'html2canvas';
import html2canvas from "html2canvas";
import HistoryReportData from "../../base/HistoryReportData";
import {createHistoryReport, selectHistoryReportById, updateHistoryReport} from "@/api/history-report";
import {
createHistoryReport,
selectHistoryReportById,
updateHistoryReport,
} from "@/api/history-report";
export default {
name: "TestAnalysisContainer",
components: {TestAnalysisChart, TestAnalysisTable, TestAnalysisFilter, HistoryReportData},
components: {
TestAnalysisChart,
TestAnalysisTable,
TestAnalysisFilter,
HistoryReportData,
},
data() {
return {
isHide: false,
@ -49,35 +71,41 @@ export default {
yAxis: {},
label: {},
tooltip: {},
series: []
series: [],
},
tableData: [],
h: document.documentElement.clientHeight - 40,
}
};
},
methods: {
handleExport() {
let name = this.$t('commons.report_statistics.test_case_analysis');
this.hidePage(true);
let name = this.$t("commons.report_statistics.test_case_analysis");
this.$nextTick(function () {
setTimeout(() => {
html2canvas(document.getElementById('reportAnalysis'), {
scale: 2
}).then(function (canvas) {
html2canvas(document.getElementById("reportAnalysis"), {
scale: 2,
})
.then(function (canvas) {
exportPdf(name, [canvas]);
})
.then(() => {
this.hidePage(false);
});
}, 1000);
});
},
hidePage(isHide) {
this.isHide = isHide;
this.$refs.analysisChart.reCountWidth(isHide);
},
close() {
this.$emit('closePage');
this.$emit("closePage");
},
init(opt) {
this.loading = true;
this.options = opt;
getAnalysisReport(opt).then(response => {
getAnalysisReport(opt).then((response) => {
let data = response.data.chartDTO;
let tableDTOs = response.data.tableDTOs;
this.initPic(data, tableDTOs);
@ -102,9 +130,9 @@ export default {
tableData: this.tableData,
};
obj.dataOption = JSON.stringify(dataOptionObj);
obj.reportType = 'TEST_CASE_ANALYSIS';
obj.reportType = "TEST_CASE_ANALYSIS";
updateHistoryReport(obj).then(() => {
this.$alert(this.$t('commons.save_success'));
this.$alert(this.$t("commons.save_success"));
this.$refs.historyReport.initReportData();
});
},
@ -119,9 +147,9 @@ export default {
tableData: this.tableData,
};
obj.dataOption = JSON.stringify(dataOptionObj);
obj.reportType = 'TEST_CASE_ANALYSIS';
obj.reportType = "TEST_CASE_ANALYSIS";
createHistoryReport(obj).then(() => {
this.$alert(this.$t('commons.save_success'));
this.$alert(this.$t("commons.save_success"));
this.$refs.historyReport.initReportData();
});
},
@ -132,11 +160,11 @@ export default {
this.loadOption.xAxis = loadOptionParam.xaxis;
this.loadOption.series = loadOptionParam.series;
this.loadOption.grid = {
bottom: '75px',//距离下边距
}
this.loadOption.series.forEach(item => {
bottom: "75px", //距离下边距
};
this.loadOption.series.forEach((item) => {
item.type = this.$refs.analysisChart.chartType;
})
});
}
if (tableData) {
this.tableData = tableData;
@ -148,32 +176,37 @@ export default {
if (selectId) {
this.loading = true;
let paramObj = {
id: selectId
}
selectHistoryReportById(paramObj).then(response => {
id: selectId,
};
selectHistoryReportById(paramObj)
.then((response) => {
let reportData = response.data;
if (reportData) {
selectName = reportData.name;
if (reportData.dataOption) {
let dataOptionObj = JSON.parse(reportData.dataOption);
this.initPic(dataOptionObj.loadOption, dataOptionObj.pieOption, dataOptionObj.tableData);
this.initPic(
dataOptionObj.loadOption,
dataOptionObj.pieOption,
dataOptionObj.tableData
);
}
if (reportData.selectOption) {
let selectOptionObj = JSON.parse(reportData.selectOption);
this.$refs.analysisFilter.initSelectOption(selectOptionObj);
}
}
this.$emit('initHistoryReportId', selectId, selectName);
this.$emit("initHistoryReportId", selectId, selectName);
this.loading = false;
}).catch(() => {
})
.catch(() => {
this.loading = false;
this.removeHistoryReportId();
});
}
},
removeHistoryReportId() {
this.$emit('initHistoryReportId', "", "");
this.$emit("initHistoryReportId", "", "");
},
selectAndSaveReport(reportName) {
let opt = this.$refs.analysisFilter.getOption();
@ -181,14 +214,14 @@ export default {
this.saveReport(reportName);
},
saveAndSaveAsReport(reportName, saveType) {
if (saveType === 'save') {
if (saveType === "save") {
this.saveReport(reportName);
} else if (saveType === 'saveAs') {
} else if (saveType === "saveAs") {
this.selectAndSaveReport(reportName);
}
}
},
}
},
};
</script>
<style scoped>

117
report-stat/frontend/src/business/projectstatistics/track/chart/TestAnalysisChart.vue
View File

@ -1,25 +1,69 @@
<template>
<div v-loading="loading">
<el-card class="ms-test-chart" :style="{ width: w+'px', height: h + 'px'}" ref="msDrawer">
<el-card
class="ms-test-chart"
:style="{ width: w + 'px', height: h + 'px' }"
ref="msDrawer"
>
<el-row class="ms-row">
<p class="tip"><span style="margin-left: 5px"></span> {{ $t('commons.report_statistics.chart') }} </p>
<p class="tip">
<span style="margin-left: 5px"></span>
{{ $t("commons.report_statistics.chart") }}
</p>
<div class="ms-test-chart-header">
<el-select v-model="chartType" class="ms-col-type" size="mini" style="width: 100px" @change="generateOption">
<el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in charts"/>
<el-select
v-model="chartType"
class="ms-col-type"
size="mini"
style="width: 100px"
@change="generateOption"
>
<el-option
:key="t.id"
:value="t.id"
:label="t.name"
v-for="t in charts"
/>
</el-select>
<span style="margin: 0px 10px 10px">|</span>
<el-select v-model="order" class="ms-col-type" size="mini" style="width: 120px" @change="orderCharts">
<el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in orders"/>
<el-select
v-model="order"
class="ms-col-type"
size="mini"
style="width: 120px"
@change="orderCharts"
>
<el-option
:key="t.id"
:value="t.id"
:label="t.name"
v-for="t in orders"
/>
</el-select>
<span style="margin: 0px 10px 10px">|</span>
<font-awesome-icon v-if="!isFullScreen && showFullScreen" class="report-alt-ico" :icon="['fa', 'expand-alt']" size="lg"
@click="fullScreen"/>
<font-awesome-icon v-if="isFullScreen && showFullScreen" class="report-alt-ico" :icon="['fa', 'compress-alt']" size="lg"
@click="unFullScreen"/>
<font-awesome-icon
v-if="!isFullScreen && showFullScreen"
class="report-alt-ico"
:icon="['fa', 'expand-alt']"
size="lg"
@click="fullScreen"
/>
<font-awesome-icon
v-if="isFullScreen && showFullScreen"
class="report-alt-ico"
:icon="['fa', 'compress-alt']"
size="lg"
@click="unFullScreen"
/>
</div>
</el-row>
<el-row>
<ms-chart ref="chart1" :options="loadOption" class="chart-config" :autoresize="true"/>
<ms-chart
ref="chart1"
:options="loadOption"
class="chart-config"
:autoresize="true"
/>
</el-row>
</el-card>
</div>
@ -49,35 +93,50 @@ export default {
type: Boolean,
default() {
return true;
}
},
},
// 头部部分
chartType: "line",
charts: [{id: 'line', name: this.$t('commons.report_statistics.line')}, {id: 'bar', name: this.$t('commons.report_statistics.bar')}],
charts: [
{ id: "line", name: this.$t("commons.report_statistics.line") },
{ id: "bar", name: this.$t("commons.report_statistics.bar") },
],
order: "",
orders: [{id: '', name: this.$t('commons.sort_default')}, {id: 'desc', name: this.$t('commons.report_statistics.desc')}, {
id: 'asc',
name: this.$t('commons.report_statistics.asc')
}],
orders: [
{ id: "", name: this.$t("commons.sort_default") },
{ id: "desc", name: this.$t("commons.report_statistics.desc") },
{
id: "asc",
name: this.$t("commons.report_statistics.asc"),
},
],
loading: false,
options: {},
}
};
},
methods: {
reCountWidth(isHideOther) {
if (isHideOther) {
this.w = document.documentElement.clientWidth - 20;
} else {
this.w = document.documentElement.clientWidth - 760;
}
this.reload();
},
orderCharts() {
this.$emit('orderCharts', this.order);
this.$emit("orderCharts", this.order);
},
generateOption() {
this.loadOption.series.forEach(item => {
this.loadOption.series.forEach((item) => {
item.type = this.chartType;
})
});
this.reload();
},
reload() {
this.loading = true
this.loading = true;
this.$nextTick(() => {
this.loading = false
})
this.loading = false;
});
},
fullScreen() {
this.originalW = this.w;
@ -85,23 +144,22 @@ export default {
this.w = document.body.clientWidth - 50;
this.h = document.body.clientHeight;
this.isFullScreen = true;
this.$emit('hidePage', true);
this.$emit("hidePage", true);
},
unFullScreen() {
this.w = this.originalW;
this.h = this.originalH;
this.isFullScreen = false;
this.$emit('hidePage', false);
this.$emit("hidePage", false);
},
getOptions() {
return this.loadOption;
}
},
}
},
};
</script>
<style scoped>
.ms-test-chart-header {
z-index: 999;
width: 320px;
@ -144,5 +202,4 @@ export default {
:deep(.el-card__body) {
padding: 0px;
}
</style>