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:
xinxin.wu 2024-05-23 10:30:39 +08:00 committed by Craftsman
parent 6787bbc9d4
commit 8647152be3
2 changed files with 91 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,15 +35,13 @@
<div class="chart-legend grid flex-1 gap-y-3">
<!-- 图例开始 -->
<div v-for="item of legendData" :key="item.value" class="chart-legend-item">
<div class="chart-flag">
<div v-for="item of legendData" :key="item.value" class="grid grid-cols-3">
<div class="flex flex-nowrap items-center">
<div class="mb-[2px] mr-[4px] h-[6px] w-[6px] rounded-full" :class="item.class"></div>
<div class="mr-2 text-[var(--color-text-4)]">{{ item.label }}</div>
<div class="text-[var(--color-text-4)]">{{ item.label }}</div>
</div>
<div class="count text-center font-medium">{{ item.count || 0 }}</div>
<div class="count text-right font-medium"
>{{ item.rote || 0 }} <span v-if="String(item.rote) !== 'Calculating'"></span
></div>
<div class="text-center">{{ item.count || 0 }}</div>
<div class="text-right">{{ item.rote || 0 }} <span v-if="String(item.rote) !== 'Calculating'"></span></div>
</div>
</div>
</div>
@ -79,12 +77,14 @@
<style scoped lang="less">
.chart-legend {
.chart-legend-item {
@apply grid grid-cols-3;
@apply flex items-center justify-between;
}
.chart-flag {
width: 80px;
@apply flex flex-nowrap items-center;
.count {
color: var(--color-text-1);
@apply flex-1;
}
}
}

26
frontend/src/views/test-plan/report/detail/component/planDetail.vue
View File

@ -39,8 +39,7 @@
</template>
</MsCard>
<div class="analysis-wrapper">
<div class="analysis">
<div>
<div class="analysis min-w-[238px]">
<div class="block-title">{{ t('report.detail.api.requestAnalysis') }}</div>
<ul class="report-analysis">
<li class="report-analysis-item">
@ -85,21 +84,17 @@
</li>
</ul>
</div>
</div>
<div class="analysis mx-4">
<div>
<div class="analysis min-w-[410px]">
<div class="block-title">{{ t('report.detail.executionAnalysis') }}</div>
<SetReportChart
size="160px"
size="150px"
offset="top-[34%] right-0 bottom-0 left-0"
:legend-data="legendData"
:options="charOptions"
:request-total="getIndicators(detail.caseTotal) || 0"
/>
</div>
</div>
<div class="analysis">
<div>
<div class="analysis min-w-[297px]">
<div class="block-title">{{ t('report.detail.useCaseAnalysis') }}</div>
<div class="flex">
<div class="w-[70%]">
@ -108,7 +103,7 @@
<SingleStatusProgress :detail="detail" status="block" />
<SingleStatusProgress :detail="detail" status="error" />
</div>
<div class="relative w-[30%]">
<div class="relative w-[30%] min-w-[120px]">
<div class="charts absolute w-full text-center">
<div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
<a-popover position="bottom" content-class="response-popover-content">
@ -123,14 +118,13 @@
</template>
</a-popover>
</div>
<div class="flex h-full w-full items-center justify-center">
<div class="flex h-full w-full min-w-[120px] items-center justify-center">
<MsChart width="120px" height="120px" :options="functionCaseOptions"
/></div>
</div>
</div>
</div>
</div>
</div>
<MsCard class="mb-[16px]" simple auto-height>
<div class="font-medium">{{ t('report.detail.reportSummary') }}</div>
<div
@ -482,12 +476,12 @@
@apply mb-4 font-medium;
}
.analysis-wrapper {
height: 250px;
@apply mb-4 flex items-center;
@apply mb-4 flex flex-wrap items-center gap-4;
.analysis {
padding: 24px;
height: 250px;
box-shadow: 0 0 10px rgba(120 56 135/ 5%);
@apply h-full flex-1 rounded-xl bg-white;
@apply flex-1 rounded-xl bg-white;
.report-analysis {
.report-analysis-item {
padding: 4px 8px;
@ -507,7 +501,7 @@
}
}
.charts {
top: 34%;
top: 36%;
right: 0;
bottom: 0;
left: 0;