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; @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', position: 'top',
backgroundColor: '#fff', backgroundColor: '#fff',
padding: 24, padding: 16,
borderWidth: 0, borderWidth: 0,
formatter(params: any) { formatter(params: any) {
const html = ` const html = `
@ -173,12 +173,18 @@ export const commonConfig = {
legend: { legend: {
show: false, show: false,
}, },
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
}; };
export const seriesConfig = { export const seriesConfig = {
name: '', name: '',
type: 'pie', type: 'pie',
radius: ['62%', '80%'], radius: ['75%', '93%'],
center: ['50%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
@ -196,5 +202,3 @@ export const seriesConfig = {
show: false, 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="relative mr-4">
<div class="charts"> <div class="charts">
<div class="text-[12px] text-[(var(--color-text-4))]">{{ t('report.detail.api.total') }}</div> <div class="text-[12px] text-[(var(--color-text-4))]">{{ t('report.detail.api.total') }}</div>
<a-popover position="bottom" content-class="response-popover-content"> <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">{{ <div class="one-line-text w-full max-w-[90%] text-center text-[18px] font-medium">
getIndicators(requestTotal) {{ getIndicators(requestTotal) }}
}}</div> </div>
<template #content> <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="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)]">{{ <div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">
getIndicators(addCommasToNumber(requestTotal)) {{ getIndicators(addCommasToNumber(requestTotal)) }}
}}</div> </div>
</div> </div>
</template> </template>
</a-popover> </a-popover>
</div> </div>
<!-- TODO 汇总图例暂时不要了 --> <!-- 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> <div> <MsChart :width="props.size || '120px'" :height="props.size || '120px'" :options="props.options" /></div>
<!-- <template #content> <!-- <template #content>
<div class="min-w-[176px] max-w-[400px] p-4"> <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 class="text-[var(--color-text-4)]">{{ item.label }}</div>
</div> </div>
<div class="text-end font-medium text-[var(--color-text-1)]">{{ item.count || 0 }}</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)]" <div class="text-right font-medium text-[var(--color-text-1)]">
>{{ item.rote || 0 }} <span v-if="String(item.rote) !== 'Calculating'"></span {{ item.rote || 0 }}
></div> <span v-if="String(item.rote) !== 'Calculating'"> </span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -54,8 +55,6 @@
/** /**
* @description 用例报告独立报告 * @description 用例报告独立报告
*/ */
import { ref } from 'vue';
import MsChart from '@/components/pure/chart/index.vue'; import MsChart from '@/components/pure/chart/index.vue';
import { useI18n } from '@/hooks/useI18n'; 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 reportInfoHeader from './step/reportInfoHeaders.vue';
import TiledList from './tiledList.vue'; import TiledList from './tiledList.vue';
import { toolTipConfig } from '@/config/testPlan'; import { commonConfig, toolTipConfig } from '@/config/testPlan';
import { useI18n } from '@/hooks/useI18n'; import { useI18n } from '@/hooks/useI18n';
import { addCommasToNumber, formatDuration } from '@/utils'; import { addCommasToNumber, formatDuration } from '@/utils';
@ -248,6 +248,7 @@
const legendData = ref<LegendData[]>([]); const legendData = ref<LegendData[]>([]);
const charOptions = ref({ const charOptions = ref({
...commonConfig,
tooltip: { tooltip: {
...toolTipConfig, ...toolTipConfig,
}, },

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

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