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

fix(任务中心): 语言选择英文，翻页按钮被挤没了 

--bug=1008242 --user=王孝刚 【任务中心】语言选择英文，翻页按钮被挤没了
https://www.tapd.cn/55049933/s/1076087
This commit is contained in:
wxg0103 2021-11-23 20:15:32 +08:00 committed by 刘瑞斌
parent e97de5d7b9
commit d455a97f3b
4 changed files with 86 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,17 +50,17 @@
</el-row> </el-row>
</el-header> </el-header>
<el-main style="padding: 5px 5px 0px 5px;margin-top: 10px"> <el-main style="padding: 5px 5px 0px 5px;margin-top: 10px">
<el-container> <el-container style="height: 100px;margin-top: 10px">
<el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px"> <el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
<el-container style="height: 50px;margin-top: 10px"> <el-container style="height: 50px;margin-top: 10px">
<el-aside width="50%" style="line-height: 40px;"> <el-aside width="50%" style="line-height: 40px;">
{{$t('api_test.home_page.detail_card.rate.pass')+":"}} {{ $t('api_test.home_page.detail_card.rate.pass') + ":" }}
</el-aside> </el-aside>
<el-main style="padding: 0px 0px 0px 0px; line-height: 40px; text-align: center;"> <el-main style="padding: 0px 0px 0px 0px; line-height: 40px; text-align: center;">
<span class="rows-count-number"> <span class="rows-count-number">
{{sceneCountData.passRage}} {{ sceneCountData.passRage }}
<el-tooltip placement="top" class="info-tool-tip"> <el-tooltip placement="top" class="info-tool-tip">
<div slot="content">{{ $t('api_test.home_page.formula.pass')}}</div> <div slot="content">{{ $t('api_test.home_page.formula.pass') }}</div>
<el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button> <el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button>
</el-tooltip> </el-tooltip>
</span> </span>

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

@ -44,17 +44,17 @@
</el-row> </el-row>
</el-header> </el-header>
<el-main style="padding: 5px;margin-top: 10px"> <el-main style="padding: 5px;margin-top: 10px">
<el-container> <el-container style="height: 96px;margin-top: 10px">
<el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px"> <el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
<el-container> <el-container>
<el-aside width="30%"> <el-aside width="30%">
{{$t('api_test.home_page.detail_card.rate.success')+":"}} {{ $t('api_test.home_page.detail_card.rate.success') + ":" }}
</el-aside> </el-aside>
<el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;"> <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
<span class="count-number"> <span class="count-number">
{{scheduleTaskCountData.successRage}} {{ scheduleTaskCountData.successRage }}
<el-tooltip placement="top" class="info-tool-tip"> <el-tooltip placement="top" class="info-tool-tip">
<div slot="content">{{ $t('api_test.home_page.formula.success')}}</div> <div slot="content">{{ $t('api_test.home_page.formula.success') }}</div>
<el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button> <el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button>
</el-tooltip> </el-tooltip>
</span> </span>

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

@ -1,31 +1,34 @@
<template> <template>
<el-card class="table-card" v-loading="result.loading" body-style="padding:10px;"> <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
<div slot="header" > <div slot="header">
<span class="title"> <span class="title">
{{$t('api_test.home_page.test_case_count_card.title')}} {{ $t('api_test.home_page.test_case_count_card.title') }}
</span> </span>
</div> </div>
<el-container> <el-container>
<el-aside width="120px"> <el-aside width="120px">
<div class="main-number-show"> <div class="main-number-show">
<span class="count-number"> <span class="count-number">
{{testCaseCountData.allApiDataCountNumber}} {{ testCaseCountData.allApiDataCountNumber }}
</span> </span>
<span style="color: #6C317C;"> <span style="color: #6C317C;">
{{$t('api_test.home_page.unit_of_measurement')}} {{ $t('api_test.home_page.unit_of_measurement') }}
</span> </span>
</div> </div>
</el-aside> </el-aside>
<el-main style="padding-left: 0px;padding-right: 0px"> <el-main style="padding-left: 0px;padding-right: 0px">
<div style="width: 200px;margin:0 auto"> <div style="width: 200px;margin:0 auto">
<el-row align="center" class="hidden-lg-and-down"> <el-row align="center" class="hidden-lg-and-down">
<el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;"> <el-col :span="6"
style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
<div class="count-info-div" v-html="testCaseCountData.httpCountStr"></div> <div class="count-info-div" v-html="testCaseCountData.httpCountStr"></div>
</el-col> </el-col>
<el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;"> <el-col :span="6"
style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
<div class="count-info-div" v-html="testCaseCountData.rpcCountStr"></div> <div class="count-info-div" v-html="testCaseCountData.rpcCountStr"></div>
</el-col> </el-col>
<el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;"> <el-col :span="6"
style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
<div class="count-info-div" v-html="testCaseCountData.tcpCountStr"></div> <div class="count-info-div" v-html="testCaseCountData.tcpCountStr"></div>
</el-col> </el-col>
<el-col :span="6" style="padding: 5px;"> <el-col :span="6" style="padding: 5px;">
@ -33,13 +36,16 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row align="right" style="margin-left: 20px" class="hidden-xl-only"> <el-row align="right" style="margin-left: 20px" class="hidden-xl-only">
<el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;"> <el-col :span="6"
style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
<div class="count-info-div" v-html="testCaseCountData.httpCountStr"></div> <div class="count-info-div" v-html="testCaseCountData.httpCountStr"></div>
</el-col> </el-col>
<el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;"> <el-col :span="6"
style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
<div class="count-info-div" v-html="testCaseCountData.rpcCountStr"></div> <div class="count-info-div" v-html="testCaseCountData.rpcCountStr"></div>
</el-col> </el-col>
<el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;"> <el-col :span="6"
style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
<div class="count-info-div" v-html="testCaseCountData.tcpCountStr"></div> <div class="count-info-div" v-html="testCaseCountData.tcpCountStr"></div>
</el-col> </el-col>
<el-col :span="6" style="padding: 5px;"> <el-col :span="6" style="padding: 5px;">
@ -52,47 +58,53 @@
<el-container class="detail-container"> <el-container class="detail-container">
<el-header style="height:20px;padding: 0px;margin-bottom: 10px;"> <el-header style="height:20px;padding: 0px;margin-bottom: 10px;">
<el-row :gutter="20" class="hidden-lg-and-down "> <el-row :gutter="20" class="hidden-lg-and-down ">
<el-col :span="8"> <el-col :span="8">
{{$t('api_test.home_page.test_case_details_card.this_week_add')}} {{ $t('api_test.home_page.test_case_details_card.this_week_add') }}
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{testCaseCountData.thisWeekAddedCount}} <el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">
{{ testCaseCountData.thisWeekAddedCount }}
</el-link> </el-link>
{{$t('api_test.home_page.unit_of_measurement')}} {{ $t('api_test.home_page.unit_of_measurement') }}
</el-col> </el-col>
<el-col :span="8" > <el-col :span="8">
{{$t('api_test.home_page.test_case_details_card.this_week_execute',[testCaseCountData.thisWeekExecutedCount])}} {{
$t('api_test.home_page.test_case_details_card.this_week_execute', [testCaseCountData.thisWeekExecutedCount])
}}
</el-col> </el-col>
<el-col :span="8" > <el-col :span="8">
{{$t('api_test.home_page.test_case_details_card.executed',[testCaseCountData.executedCount])}} {{ $t('api_test.home_page.test_case_details_card.executed', [testCaseCountData.executedCount]) }}
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20" class="hidden-xl-only"> <el-row :gutter="20" class="hidden-xl-only">
<el-col :span="8"> <el-col :span="8">
{{$t('api_test.home_page.test_case_details_card.this_week_add_sm')}} {{ $t('api_test.home_page.test_case_details_card.this_week_add_sm') }}
<br/> <br/>
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{testCaseCountData.thisWeekAddedCount}} <el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">
{{ testCaseCountData.thisWeekAddedCount }}
</el-link> </el-link>
{{$t('api_test.home_page.unit_of_measurement')}} {{ $t('api_test.home_page.unit_of_measurement') }}
</el-col> </el-col>
<el-col :span="8" > <el-col :span="8">
<div class="count-info-div" v-html="$t('api_test.home_page.test_case_details_card.this_week_execute_sm',[testCaseCountData.thisWeekExecutedCount])"></div> <div class="count-info-div"
v-html="$t('api_test.home_page.test_case_details_card.this_week_execute_sm',[testCaseCountData.thisWeekExecutedCount])"></div>
</el-col> </el-col>
<el-col :span="8" > <el-col :span="8">
<div class="count-info-div" v-html="$t('api_test.home_page.test_case_details_card.executed_sm',[testCaseCountData.executedCount])"></div> <div class="count-info-div"
v-html="$t('api_test.home_page.test_case_details_card.executed_sm',[testCaseCountData.executedCount])"></div>
</el-col> </el-col>
</el-row> </el-row>
</el-header> </el-header>
<el-main style="padding: 5px;margin-top: 10px"> <el-main style="padding: 5px;margin-top: 10px">
<el-container> <el-container style="height: 96px;margin-top: 10px">
<el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px"> <el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
<el-container> <el-container>
<el-aside width="30%"> <el-aside width="30%">
{{$t('api_test.home_page.detail_card.rate.coverage')+":"}} {{ $t('api_test.home_page.detail_card.rate.coverage') + ":" }}
</el-aside> </el-aside>
<el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;"> <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
<span class="count-number"> <span class="count-number">
{{testCaseCountData.coverageRage}} {{ testCaseCountData.coverageRage }}
<el-tooltip placement="top" class="info-tool-tip"> <el-tooltip placement="top" class="info-tool-tip">
<div slot="content">{{ $t('api_test.home_page.formula.coverage')}}</div> <div slot="content">{{ $t('api_test.home_page.formula.coverage') }}</div>
<el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button> <el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button>
</el-tooltip> </el-tooltip>
</span> </span>
@ -105,10 +117,10 @@
<el-row> <el-row>
<el-col> <el-col>
<span class="default-property"> <span class="default-property">
{{$t('api_test.home_page.detail_card.uncoverage')}} {{ $t('api_test.home_page.detail_card.uncoverage') }}
{{"\xa0\xa0"}} {{ "\xa0\xa0" }}
<el-link type="info" @click="redirectPage('uncoverage')" target="_blank" style="color: #000000"> <el-link type="info" @click="redirectPage('uncoverage')" target="_blank" style="color: #000000">
{{testCaseCountData.uncoverageCount}} {{ testCaseCountData.uncoverageCount }}
</el-link> </el-link>
</span> </span>
</el-col> </el-col>
@ -116,10 +128,10 @@
</el-col> </el-col>
<el-col style="margin-top: 5px;"> <el-col style="margin-top: 5px;">
<span class="main-property"> <span class="main-property">
{{$t('api_test.home_page.detail_card.coverage')}} {{ $t('api_test.home_page.detail_card.coverage') }}
{{"\xa0\xa0"}} {{ "\xa0\xa0" }}
<el-link type="info" @click="redirectPage('coverage')" target="_blank" style="color: #000000"> <el-link type="info" @click="redirectPage('coverage')" target="_blank" style="color: #000000">
{{testCaseCountData.coverageCount}} {{ testCaseCountData.coverageCount }}
</el-link> </el-link>
</span> </span>
</el-col> </el-col>
@ -146,17 +158,17 @@ export default {
loading: false, loading: false,
} }
}, },
props:{ props: {
testCaseCountData:{}, testCaseCountData: {},
}, },
methods: { methods: {
redirectPage(clickType){ redirectPage(clickType) {
if(clickType === 'thisWeekCount'){ if (clickType === 'thisWeekCount') {
//这里业务逻辑应当跳转接口案例列表 //这里业务逻辑应当跳转接口案例列表
this.$emit("redirectPage","api","apiTestCase",clickType); this.$emit("redirectPage", "api", "apiTestCase", clickType);
}else{ } else {
//这里业务逻辑应当跳转接口列表 //这里业务逻辑应当跳转接口列表
this.$emit("redirectPage","api","api",clickType); this.$emit("redirectPage", "api", "api", clickType);
} }
} }
@ -174,9 +186,10 @@ export default {
line-height: 100px; line-height: 100px;
text-align: center; text-align: center;
} }
.count-number{
font-family:'ArialMT', 'Arial', sans-serif; .count-number {
font-size:33px; font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 33px;
color: var(--count_number); color: var(--count_number);
position: relative; position: relative;
} }
@ -187,24 +200,28 @@ export default {
border-style: solid; border-style: solid;
border-width: 7px; border-width: 7px;
border-color: var(--count_number_shallow); border-color: var(--count_number_shallow);
border-radius:50%; border-radius: 50%;
} }
.count-number-show{ .count-number-show {
margin:20px auto; margin: 20px auto;
} }
.detail-container{
.detail-container {
margin-top: 30px margin-top: 30px
} }
.no-shadow-card{
-webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,.1); .no-shadow-card {
box-shadow: 0 0px 0px 0 rgba(0,0,0,.1); -webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
} }
.default-property{
.default-property {
font-size: 12px font-size: 12px
} }
.main-property{
.main-property {
color: #F39021; color: #F39021;
font-size: 12px font-size: 12px
} }
@ -213,13 +230,15 @@ export default {
border-bottom: 0px solid #EBEEF5; border-bottom: 0px solid #EBEEF5;
} }
.count-info-div{ .count-info-div {
margin: 3px; margin: 3px;
} }
.count-info-div >>>p{
.count-info-div >>> p {
font-size: 10px; font-size: 10px;
} }
.info-tool-tip{
.info-tool-tip {
position: absolute; position: absolute;
top: 0; top: 0;
} }

2
frontend/src/business/components/task/TaskCenter.vue
View File

@ -44,7 +44,7 @@
<el-card style="width: 550px;float: right" v-loading="loading"> <el-card style="width: 550px;float: right" v-loading="loading">
<div style="color: #2B415C;margin: 0px 20px 0px;"> <div style="color: #2B415C;margin: 0px 20px 0px;">
<el-form label-width="68px" class="ms-el-form-item"> <el-form label-width="95px" class="ms-el-form-item">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item :label="$t('test_track.report.list.trigger_mode')" prop="runMode"> <el-form-item :label="$t('test_track.report.list.trigger_mode')" prop="runMode">