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

refactor: 首页数量统计显示优化 

--bug=1009703 --user=陈建星 [测试跟踪] github#9466测试跟踪首页用例数量统计显示不全 https://www.tapd.cn/55049933/s/10932477
This commit is contained in:
chenjianxing 2022-01-18 15:34:25 +08:00 committed by fit2-zhao
parent 4d15bf649d
commit a0ee35fe63
9 changed files with 81 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
View File

@ -7,15 +7,9 @@
</div>
<el-container>
<el-aside width="120px">
<div class="main-number-show">
<span class="count-number">
{{ apiCountData.allApiDataCountNumber }}
</span>
<span style="color: #6C317C;">
{{ $t('api_test.home_page.unit_of_measurement') }}
</span>
</div>
<ms-count-ring-chart :content="apiCountData.allApiDataCountNumber"/>
</el-aside>
<el-main style="padding-left: 0px;padding-right: 0px;">
<div style="width: 200px;margin:0 auto">
@ -162,10 +156,11 @@
<script>
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default {
name: "MsApiInfoCard",
components: {},
components: {MsCountRingChart},
data() {
return {
@ -205,16 +200,6 @@ export default {
position: relative;
}
.main-number-show {
width: 100px;
height: 100px;
border-style: solid;
border-width: 7px;
border-color: var(--count_number_shallow);
border-radius: 50%;
}
.count-number-show {
margin: 20px auto;
}

19
frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
View File

@ -7,14 +7,7 @@
</div>
<el-container>
<el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
<div class="main-number-show" style="margin: 0px auto;">
<span class="count-number">
{{sceneCountData.allApiDataCountNumber}}
</span>
<span style="color: #6C317C;">
{{$t('api_test.home_page.unit_of_measurement')}}
</span>
</div>
<ms-count-ring-chart :content="sceneCountData.allApiDataCountNumber"/>
</el-main>
</el-container>
<el-container class="detail-container">
@ -127,10 +120,11 @@
<script>
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default {
name: "MsSceneInfoCard",
components: {},
components: {MsCountRingChart},
data() {
return {
@ -176,12 +170,7 @@ export default {
font-weight: bold;
}
.main-number-show {
width: 100px;
height: 100px;
border-style: solid;
border-width: 7px;
border-color: var(--count_number_shallow);
border-radius:50%;
margin: 0 auto;
}
.count-number-show{

20
frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
View File

@ -7,14 +7,7 @@
</div>
<el-container>
<el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
<div class="main-number-show" style="margin: 0px auto;">
<span class="count-number">
{{scheduleTaskCountData.allApiDataCountNumber}}
</span>
<span style="color: #6C317C;">
{{$t('api_test.home_page.unit_of_measurement')}}
</span>
</div>
<ms-count-ring-chart :content="scheduleTaskCountData.allApiDataCountNumber"/>
</el-main>
</el-container>
@ -93,13 +86,14 @@
<script>
import 'element-ui/lib/theme-chalk/display.css';
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default {
name: "MsScheduleTaskInfoCard",
components: {},
components: {MsCountRingChart},
data() {
return {
@ -133,13 +127,7 @@ export default {
}
.main-number-show {
width: 100px;
height: 100px;
border-style: solid;
border-width: 7px;
border-color: var(--count_number_shallow);
border-radius:50%;
margin: 0px auto;
}
.count-number-show{

22
frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
View File

@ -7,14 +7,7 @@
</div>
<el-container>
<el-aside width="120px">
<div class="main-number-show">
<span class="count-number">
{{ testCaseCountData.allApiDataCountNumber }}
</span>
<span style="color: #6C317C;">
{{ $t('api_test.home_page.unit_of_measurement') }}
</span>
</div>
<ms-count-ring-chart :content="testCaseCountData.allApiDataCountNumber"/>
</el-aside>
<el-main style="padding-left: 0px;padding-right: 0px">
<div style="width: 200px;margin:0 auto">
@ -147,10 +140,11 @@
<script>
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default {
name: "MsTestCaseInfoCard",
components: {},
components: {MsCountRingChart},
data() {
return {
@ -194,16 +188,6 @@ export default {
position: relative;
}
.main-number-show {
width: 100px;
height: 100px;
border-style: solid;
border-width: 7px;
border-color: var(--count_number_shallow);
border-radius: 50%;
}
.count-number-show {
margin: 20px auto;
}

46
frontend/src/business/components/common/chart/MsCountRingChart.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<el-tooltip :content="content + ''" placement="top-start">
<div class="main-number-show">
<span class="count-number">
{{content}}
</span>
<span style="color: #6C317C;">
{{$t('api_test.home_page.unit_of_measurement')}}
</span>
</div>
</el-tooltip>
</template>
<script>
export default {
name: "MsCountRingChart",
props: {
content: {
type: [Number, String]
}
}
}
</script>
<style scoped>
.main-number-show {
width: 100px;
height: 100px;
border-style: solid;
border-width: 7px;
border-color: var(--count_number_shallow);
border-radius:50%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.count-number {
font-family:'ArialMT', 'Arial', sans-serif;
font-size: 33px;
color: var(--count_number);
position: relative;
}
</style>

1
frontend/src/business/components/track/home/TrackHome.vue
View File

@ -38,7 +38,6 @@
</el-col>
</el-row>
</ms-main-container>
</ms-container>
</template>

20
frontend/src/business/components/track/home/components/BugCountCard.vue
View File

@ -7,21 +7,17 @@
</div>
<el-container>
<el-aside width="150px">
<div class="main-number-show">
<span class="count-number">
{{ bugTotalSize }}
</span>
<span style="color: #6C317C;">
{{ $t('api_test.home_page.unit_of_measurement') }}
</span>
<div>
{{ $t('test_track.home.percentage') }}
<span class="rage">
<ms-count-ring-chart :content="bugTotalSize"/>
<div>
{{ $t('test_track.home.percentage') }}
<span class="rage">
{{rage}}
</span>
</div>
</div>
</el-aside>
<el-table border :data="tableData" class="adjust-table table-content" height="300">
<el-table-column prop="index" :label="$t('test_track.home.serial_number')"
width="60" show-overflow-tooltip/>
@ -57,10 +53,12 @@
<script>
import {getCurrentProjectID} from "@/common/js/utils";
import PlanStatusTableItem from "@/business/components/track/common/tableItems/plan/PlanStatusTableItem";
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default {
name: "BugCountCard",
components: {
MsCountRingChart,
PlanStatusTableItem
},
data() {

24
frontend/src/business/components/track/home/components/CaseCountCard.vue
View File

@ -7,16 +7,11 @@
</div>
<el-container>
<el-aside width="120px">
<div class="main-number-show">
<span class="count-number">
{{trackCountData.allCaseCountNumber}}
</span>
<span style="color: #6C317C;">
{{$t('api_test.home_page.unit_of_measurement')}}
</span>
</div>
<ms-count-ring-chart :content="trackCountData.allCaseCountNumber"/>
</el-aside>
<el-main style="padding-left: 0px;padding-right: 0px;">
<div style="width: 200px;margin:0 auto">
@ -123,8 +118,11 @@
</template>
<script>
import MsInstructionsIcon from "@/business/components/common/components/MsInstructionsIcon";
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default {
name: "CaseCountCard",
components: {MsCountRingChart, MsInstructionsIcon},
props:{
trackCountData: {},
},
@ -155,16 +153,6 @@ export default {
position: relative;
}
.main-number-show {
width: 100px;
height: 100px;
border-style: solid;
border-width: 7px;
border-color: var(--count_number_shallow);
border-radius:50%;
}
.count-number-show{
margin:20px auto;
}

23
frontend/src/business/components/track/home/components/RelevanceCaseCard.vue
View File

@ -7,16 +7,11 @@
</div>
<el-container>
<el-aside width="120px">
<div class="main-number-show">
<span class="count-number">
{{relevanceCountData.allRelevanceCaseCount}}
</span>
<span style="color: #6C317C;">
{{$t('api_test.home_page.unit_of_measurement')}}
</span>
</div>
<ms-count-ring-chart :content="relevanceCountData.allRelevanceCaseCount"/>
</el-aside>
<el-main style="padding-left: 0px;padding-right: 0px;">
<div style="width: 300px;margin:0 auto">
@ -97,8 +92,10 @@
</template>
<script>
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default {
name: "RelevanceCaseCard",
components: {MsCountRingChart},
props:{
relevanceCountData:{},
},
@ -129,16 +126,6 @@ export default {
position: relative;
}
.main-number-show {
width: 100px;
height: 100px;
border-style: solid;
border-width: 7px;
border-color: var(--count_number_shallow);
border-radius:50%;
}
.count-number-show{
margin:20px auto;
}