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:
baiqi 2024-08-14 11:55:57 +08:00 committed by 刘瑞斌
parent 18b2135216
commit aa0f7f0a00
6 changed files with 88 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/assets/style/global.less
View File

@ -182,3 +182,11 @@ body {
@apply cursor-not-allowed;
}
}
/* 报告气泡样式 */
.report-popover-content {
padding: 16px;
.arco-popover-content {
@apply mt-0;
}
}

12
frontend/src/config/testPlan.ts
View File

@ -147,7 +147,7 @@ export const toolTipConfig = {
},
position: 'top',
backgroundColor: '#fff',
padding: 24,
padding: 16,
borderWidth: 0,
formatter(params: any) {
const html = `
@ -173,12 +173,18 @@ export const commonConfig = {
legend: {
show: false,
},
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
};
export const seriesConfig = {
name: '',
type: 'pie',
radius: ['62%', '80%'],
radius: ['75%', '93%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
label: {
@ -196,5 +202,3 @@ export const seriesConfig = {
show: false,
},
};
export default {};

27
frontend/src/views/api-test/report/component/case/setReportChart.vue
View File

@ -3,22 +3,22 @@
<div class="relative mr-4">
<div class="charts">
<div class="text-[12px] text-[(var(--color-text-4))]">{{ t('report.detail.api.total') }}</div>
<a-popover position="bottom" content-class="response-popover-content">
<div class="one-line-text w-full max-w-[90%] text-center text-[18px] font-medium">{{
getIndicators(requestTotal)
}}</div>
<a-popover position="bottom" content-class="report-popover-content">
<div class="one-line-text w-full max-w-[90%] text-center text-[18px] font-medium">
{{ getIndicators(requestTotal) }}
</div>
<template #content>
<div class="min-w-[176px] max-w-[400px] p-4 text-[14px]">
<div class="min-w-[176px] max-w-[400px] text-[14px]">
<div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.detail.api.total') }}</div>
<div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{
getIndicators(addCommasToNumber(requestTotal))
}}</div>
<div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">
{{ getIndicators(addCommasToNumber(requestTotal)) }}
</div>
</div>
</template>
</a-popover>
</div>
<!-- TODO 汇总图例暂时不要了 -->
<!-- <a-popover position="bottom" content-class="response-popover-content"> -->
<!-- <a-popover position="bottom" content-class="report-popover-content"> -->
<div> <MsChart :width="props.size || '120px'" :height="props.size || '120px'" :options="props.options" /></div>
<!-- <template #content>
<div class="min-w-[176px] max-w-[400px] p-4">
@ -42,9 +42,10 @@
<div class="text-[var(--color-text-4)]">{{ item.label }}</div>
</div>
<div class="text-end font-medium text-[var(--color-text-1)]">{{ item.count || 0 }}</div>
<div class="text-right font-medium text-[var(--color-text-1)]"
>{{ item.rote || 0 }} <span v-if="String(item.rote) !== 'Calculating'"></span
></div>
<div class="text-right font-medium text-[var(--color-text-1)]">
{{ item.rote || 0 }}
<span v-if="String(item.rote) !== 'Calculating'"> </span>
</div>
</div>
</div>
</div>
@ -54,8 +55,6 @@
/**
* @description 用例报告独立报告
*/
import { ref } from 'vue';
import MsChart from '@/components/pure/chart/index.vue';
import { useI18n } from '@/hooks/useI18n';

3
frontend/src/views/api-test/report/component/caseReportCom.vue
View File

@ -179,7 +179,7 @@
import reportInfoHeader from './step/reportInfoHeaders.vue';
import TiledList from './tiledList.vue';
import { toolTipConfig } from '@/config/testPlan';
import { commonConfig, toolTipConfig } from '@/config/testPlan';
import { useI18n } from '@/hooks/useI18n';
import { addCommasToNumber, formatDuration } from '@/utils';
@ -248,6 +248,7 @@
const legendData = ref<LegendData[]>([]);
const charOptions = ref({
...commonConfig,
tooltip: {
...toolTipConfig,
},

7
frontend/src/views/test-plan/report/detail/component/system-card/executeAnalysis.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="block-title">{{ t('report.detail.executionAnalysis') }}</div>
<div class="mb-[16px] font-medium">{{ t('report.detail.executionAnalysis') }}</div>
<SetReportChart
size="160px"
size="130px"
:legend-data="legendData"
:options="executeCharOptions"
:request-total="getIndicators(getTotal) || 0"
@ -13,7 +13,7 @@
import SetReportChart from '@/views/api-test/report/component/case/setReportChart.vue';
import { seriesConfig, statusConfig, toolTipConfig } from '@/config/testPlan';
import { commonConfig, seriesConfig, statusConfig, toolTipConfig } from '@/config/testPlan';
import { useI18n } from '@/hooks/useI18n';
import type { LegendData } from '@/models/apiTest/report';
@ -31,6 +31,7 @@
// 执行分析
const executeCharOptions = ref({
...commonConfig,
tooltip: {
...toolTipConfig,
},

112
frontend/src/views/test-plan/report/detail/component/viewReport.vue
View File

@ -23,31 +23,21 @@
<div v-if="functionalCaseTotal" :class="`${getAnalysisHover} analysis min-w-[330px]`">
<div class="block-title">{{ t('report.detail.useCaseAnalysis') }}</div>
<div class="flex">
<div class="w-[70%]">
<div class="mr-[24px] flex-1">
<SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="pending" />
<SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="success" />
<SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="block" />
<SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="error" />
<SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="error" class="!mb-0" />
</div>
<div class="relative w-[30%] min-w-[150px]">
<div class="charts absolute w-full text-center">
<div class="relative">
<div class="charts">
<div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
<a-popover position="bottom" content-class="response-popover-content">
<div class="flex justify-center text-[18px] font-medium">
<div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{ functionCasePassRate }} </div>
</div>
<template #content>
<div class="min-w-[95px] max-w-[400px] p-4 text-[14px]">
<div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
<div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{
functionCasePassRate
}}</div>
</div>
</template>
</a-popover>
<div class="flex justify-center text-[16px] font-medium">
<div class="one-line-text max-w-[100px] text-[var(--color-text-1)]">{{ functionCasePassRate }} </div>
</div>
</div>
<div class="flex h-full w-full min-w-[150px] items-center justify-center">
<MsChart width="150px" height="150px" :options="functionCaseOptions" />
<div class="flex h-full w-full items-center justify-center">
<MsChart width="100px" height="100px" :options="functionCaseOptions" />
</div>
</div>
</div>
@ -57,29 +47,21 @@
<div v-if="apiCaseTotal" :class="`${getAnalysisHover} analysis min-w-[330px]`">
<div class="block-title">{{ t('report.detail.apiUseCaseAnalysis') }}</div>
<div class="flex">
<div class="w-[70%]">
<div class="mr-[24px] flex-1">
<SingleStatusProgress type="API" :detail="detail" status="pending" />
<SingleStatusProgress type="API" :detail="detail" status="success" />
<SingleStatusProgress type="API" :detail="detail" status="fakeError" />
<SingleStatusProgress type="API" :detail="detail" status="error" />
<SingleStatusProgress type="API" :detail="detail" status="error" class="!mb-0" />
</div>
<div class="relative w-[30%] min-w-[150px]">
<div class="charts absolute w-full text-center">
<div class="relative">
<div class="charts">
<div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
<a-popover position="bottom" content-class="response-popover-content">
<div class="flex justify-center text-[18px] font-medium">
<div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{ apiCasePassRate }} </div>
</div>
<template #content>
<div class="min-w-[95px] max-w-[400px] p-4 text-[14px]">
<div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
<div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{ apiCasePassRate }}</div>
</div>
</template>
</a-popover>
<div class="flex justify-center text-[16px] font-medium">
<div class="one-line-text max-w-[100px] text-[var(--color-text-1)]">{{ apiCasePassRate }} </div>
</div>
</div>
<div class="flex h-full w-full min-w-[150px] items-center justify-center">
<MsChart width="150px" height="150px" :options="apiCaseOptions" />
<div class="flex h-full w-full items-center justify-center">
<MsChart width="100px" height="100px" :options="apiCaseOptions" />
</div>
</div>
</div>
@ -92,31 +74,21 @@
<div v-if="scenarioCaseTotal" :class="`${getAnalysisHover} analysis min-w-[330px]`">
<div class="block-title">{{ t('report.detail.scenarioUseCaseAnalysis') }}</div>
<div class="flex">
<div class="w-[70%]">
<div class="mr-[24px] flex-1">
<SingleStatusProgress type="SCENARIO" :detail="detail" status="pending" />
<SingleStatusProgress type="SCENARIO" :detail="detail" status="success" />
<SingleStatusProgress type="SCENARIO" :detail="detail" status="fakeError" />
<SingleStatusProgress type="SCENARIO" :detail="detail" status="error" />
<SingleStatusProgress type="SCENARIO" :detail="detail" status="error" class="!mb-0" />
</div>
<div class="relative w-[30%] min-w-[150px]">
<div class="charts absolute w-full text-center">
<div class="relative">
<div class="charts">
<div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
<a-popover position="bottom" content-class="response-popover-content">
<div class="flex justify-center text-[18px] font-medium">
<div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{ scenarioCasePassRate }} </div>
</div>
<template #content>
<div class="min-w-[95px] max-w-[400px] p-4 text-[14px]">
<div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
<div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{
scenarioCasePassRate
}}</div>
</div>
</template>
</a-popover>
<div class="flex justify-center text-[16px] font-medium">
<div class="one-line-text max-w-[100px] text-[var(--color-text-1)]">{{ scenarioCasePassRate }} </div>
</div>
</div>
<div class="flex h-full w-full min-w-[150px] items-center justify-center">
<MsChart width="150px" height="150px" :options="scenarioCaseOptions" />
<div class="flex h-full w-full items-center justify-center">
<MsChart width="100px" height="100px" :options="scenarioCaseOptions" />
</div>
</div>
</div>
@ -253,7 +225,14 @@
import SystemTrigger from '@/views/test-plan/report/detail/component/system-card/systemTrigger.vue';
import { getReportLayout, updateReportDetail } from '@/api/modules/test-plan/report';
import { commonConfig, defaultCount, defaultReportDetail, seriesConfig, statusConfig } from '@/config/testPlan';
import {
commonConfig,
defaultCount,
defaultReportDetail,
seriesConfig,
statusConfig,
toolTipConfig,
} from '@/config/testPlan';
import { useI18n } from '@/hooks/useI18n';
import useLeaveUnSaveTip from '@/hooks/useLeaveUnSaveTip';
import { addCommasToNumber } from '@/utils';
@ -317,6 +296,9 @@
// 功能用例分析
const functionCaseOptions = ref({
...commonConfig,
tooltip: {
...toolTipConfig,
},
series: {
...seriesConfig,
data: [
@ -333,6 +315,9 @@
// 接口用例分析
const apiCaseOptions = ref({
...commonConfig,
tooltip: {
...toolTipConfig,
},
series: {
...seriesConfig,
data: [
@ -349,6 +334,9 @@
// 场景用例分析
const scenarioCaseOptions = ref({
...commonConfig,
tooltip: {
...toolTipConfig,
},
series: {
...seriesConfig,
data: [
@ -478,6 +466,7 @@
innerCardList.value = result;
originLayoutInfo.value = cloneDeep(result);
} catch (error) {
// eslint-disable-next-line no-console
console.log(error);
}
}
@ -606,6 +595,7 @@
currentItem.enableEdit = false;
emit('updateSuccess');
} catch (error) {
// eslint-disable-next-line no-console
console.log(error);
}
}
@ -654,12 +644,16 @@
box-shadow: 0 0 10px rgba(120 56 135/ 5%);
@apply rounded-xl bg-white;
.charts {
top: 36%;
@apply absolute text-center;
top: 50%;
right: 0;
bottom: 0;
left: 0;
left: 50%;
z-index: 99;
margin: auto;
width: 70px;
height: 42px;
transform: translateY(-50%) translateX(-50%);
}
}
&[data-cards='2'],