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

refactor(接口测试): 接口测试首页样式优化 

接口测试首页样式优化
This commit is contained in:
song-tianyang 2022-02-28 16:14:42 +08:00 committed by CountryBuilder
parent d1350de0a1
commit 5a972277aa
5 changed files with 232 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/business/components/api/homepage/ApiTestHomePage.vue
View File

@ -1,27 +1,25 @@
<template> <template>
<ms-container> <ms-container>
<ms-main-container v-loading="result.loading"> <ms-main-container v-loading="result.loading">
<el-row :gutter="10"> <el-row :gutter="10" style="margin-bottom: 5px; margin-top: -5px;">
<el-col :span="6"> <el-col :span="6" style="padding-left: 5px;padding-right: 0px">
<ms-api-info-card @redirectPage="redirectPage" :api-count-data="apiCountData" <ms-api-info-card @redirectPage="redirectPage" :api-count-data="apiCountData"
:interface-coverage="apiCoverage"/> :interface-coverage="apiCoverage"/>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6" style="padding-left: 5px;padding-right: 0px">
<ms-test-case-info-card @redirectPage="redirectPage" :test-case-count-data="testCaseCountData"/> <ms-test-case-info-card @redirectPage="redirectPage" :test-case-count-data="testCaseCountData"/>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6" style="padding-left: 5px;padding-right: 0px">
<ms-scene-info-card @redirectPage="redirectPage" :scene-count-data="sceneCountData" <ms-scene-info-card @redirectPage="redirectPage" :scene-count-data="sceneCountData"
:interface-coverage="interfaceCoverage"/> :interface-coverage="interfaceCoverage"/>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6" style="padding-left: 5px;padding-right: 5px">
<ms-schedule-task-info-card :schedule-task-count-data="scheduleTaskCountData"/> <ms-schedule-task-info-card :schedule-task-count-data="scheduleTaskCountData"/>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="10" style="margin-top: 0px; margin-bottom: 5px;">
<el-col :span="12" style="padding-left: 5px;padding-right: 0px">
<el-row :gutter="10">
<el-col :span="12">
<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;">
<template v-slot:header> <template v-slot:header>
<el-col :span="22"> <el-col :span="22">
@ -66,7 +64,7 @@
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12" style="padding-left: 5px;padding-right: 5px">
<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 v-if="testTitleSecond === 'caseTitle'"> <div v-if="testTitleSecond === 'caseTitle'">
<ms-api-failure-test-case-list @redirectPage="redirectPage" /> <ms-api-failure-test-case-list @redirectPage="redirectPage" />

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

@ -1,5 +1,5 @@
<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:16px 5px 16px 16px;" style="height: 350px;margin-top: 5px">
<div slot="header"> <div slot="header">
<span class="title"> <span class="title">
{{ $t('api_test.home_page.api_count_card.title') }} {{ $t('api_test.home_page.api_count_card.title') }}
@ -11,7 +11,7 @@
</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: 185px; float:right;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" <el-col :span="6"
@ -30,7 +30,7 @@
<div class="count-info-div" v-html="apiCountData.sqlCountStr"></div> <div class="count-info-div" v-html="apiCountData.sqlCountStr"></div>
</el-col> </el-col>
</el-row> </el-row>
<el-row align="right" style="margin-left: 20px" class="hidden-xl-only"> <el-row align="right" class="hidden-xl-only">
<el-col :span="6" <el-col :span="6"
style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;"> style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
<div class="count-info-div" v-html="apiCountData.httpCountStr"></div> <div class="count-info-div" v-html="apiCountData.httpCountStr"></div>
@ -62,58 +62,46 @@
</el-col> </el-col>
</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 0px;margin-top: 10px">
<!-- <el-container>--> <el-container style="height: 96px">
<!-- <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 style="height: 40px;margin-top: 10px">
<el-aside width="30%"> <el-aside width="80px" style="line-height: 40px;">
{{ $t('api_test.home_page.detail_card.rate.completion') + ":" }} <span style="float: left">
{{ $t('api_test.home_page.detail_card.rate.completion') + ":" }}
</span>
</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: 40px; text-align: center;">
<span class="count-number"> <span class="rows-count-number">
{{ apiCountData.completionRage }} {{ apiCountData.completionRage }}
<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.completion')}}</div> <div slot="content">{{ $t('api_test.home_page.formula.completion') }}</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>
</el-main> </el-main>
</el-container>--> </el-container>
<el-container> <el-container style="height: 40px;margin-top: 1px">
<el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px"> <el-aside width="80px" style="line-height: 40px;">
<el-container style="height: 50px;margin-top: 10px"> <span style="float: left">
<el-aside width="50%" style="line-height: 40px;"> <span>{{ $t('api_test.home_page.detail_card.rate.interface_coverage') + ":" }}</span>
{{$t('api_test.home_page.detail_card.rate.completion')+":"}} </span>
</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">
{{ apiCountData.completionRage }}
<el-tooltip placement="top" class="info-tool-tip">
<div slot="content">{{ $t('api_test.home_page.formula.completion')}}</div>
<el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button>
</el-tooltip>
</span>
</el-main>
</el-container>
<el-container style="height: 50px;margin-top: 1px">
<el-aside width="50%" style="line-height: 40px;">
<span>{{$t('api_test.home_page.detail_card.rate.interface_coverage')+":"}}</span>
</el-aside>
<el-main style="padding: 0px 0px 0px 0px; line-height: 40px; text-align: center;">
<span v-if="interfaceCoverage === 'waitting...'"> <span v-if="interfaceCoverage === 'waitting...'">
<i class="el-icon-loading lading-icon"></i> <i class="el-icon-loading lading-icon"></i>
</span> </span>
<span v-else class="rows-count-number"> <span v-else class="rows-count-number">
{{interfaceCoverage}} {{ interfaceCoverage }}
<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.api_coverage')}}</div> <div slot="content">{{ $t('api_test.home_page.formula.api_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>
</el-main> </el-main>
</el-container> </el-container>
</el-aside> </el-aside>
<el-main style="padding: 5px"> <el-main style="padding: 0px; height: 80px; float:right;">
<el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px"> <el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px">
<main> <main>
<el-row> <el-row>
@ -157,6 +145,7 @@
<script> <script>
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart"; import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default { export default {
name: "MsApiInfoCard", name: "MsApiInfoCard",
@ -170,7 +159,7 @@ export default {
}, },
props: { props: {
apiCountData: {}, apiCountData: {},
interfaceCoverage:String, interfaceCoverage: String,
}, },
methods: { methods: {
redirectPage(clickType) { redirectPage(clickType) {
@ -192,12 +181,13 @@ export default {
position: relative; position: relative;
} }
.rows-count-number{ .rows-count-number {
font-family:'ArialMT', 'Arial', sans-serif; font-family: 'ArialMT', 'Arial', sans-serif;
font-size:19px; font-size: 19px;
color: var(--count_number); color: var(--count_number);
margin:20px auto;
position: relative; position: relative;
margin-left: 10px;
float: left;
} }
.count-number-show { .count-number-show {
@ -209,6 +199,8 @@ export default {
} }
.no-shadow-card { .no-shadow-card {
width: 115px;
float: right;
-webkit-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); box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
} }
@ -233,7 +225,8 @@ export default {
.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;
} }

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

@ -1,8 +1,9 @@
<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:16px 5px 16px 16px;"
<div slot="header" > style="height: 350px;margin-top: 5px">
<div slot="header">
<span class="title"> <span class="title">
{{$t('api_test.home_page.test_scene_count_card.title')}} {{ $t('api_test.home_page.test_scene_count_card.title') }}
</span> </span>
</div> </div>
<el-container> <el-container>
@ -12,42 +13,46 @@
</el-container> </el-container>
<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_scene_details_card.this_week_add')}} {{ $t('api_test.home_page.test_scene_details_card.this_week_add') }}
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{sceneCountData.thisWeekAddedCount}} <el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">
</el-link> {{ sceneCountData.thisWeekAddedCount }}
{{$t('api_test.home_page.unit_of_measurement')}} </el-link>
</el-col> {{ $t('api_test.home_page.unit_of_measurement') }}
<el-col :span="8" > </el-col>
{{$t('api_test.home_page.test_scene_details_card.this_week_execute',[sceneCountData.thisWeekExecutedCount])}} <el-col :span="8">
</el-col> {{
<el-col :span="8" > $t('api_test.home_page.test_scene_details_card.this_week_execute', [sceneCountData.thisWeekExecutedCount])
{{$t('api_test.home_page.test_scene_details_card.executed',[sceneCountData.executedCount])}} }}
</el-col> </el-col>
</el-row> <el-col :span="8">
<el-row :gutter="20" class="hidden-xl-only"> {{ $t('api_test.home_page.test_scene_details_card.executed', [sceneCountData.executedCount]) }}
<el-col :span="8"> </el-col>
{{$t('api_test.home_page.test_scene_details_card.this_week_add_sm')}} </el-row>
<br/> <el-row :gutter="20" class="hidden-xl-only">
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{sceneCountData.thisWeekAddedCount}} <el-col :span="8">
</el-link> <div class="count-info-div"
{{$t('api_test.home_page.unit_of_measurement')}} v-html="$t('api_test.home_page.schedule_task_details_card.this_week_add_sm',[sceneCountData.thisWeekAddedCount])"></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_scene_details_card.this_week_execute_sm',[sceneCountData.thisWeekExecutedCount])"></div> <div class="count-info-div"
</el-col> v-html="$t('api_test.home_page.test_scene_details_card.this_week_execute_sm',[sceneCountData.thisWeekExecutedCount])"></div>
<el-col :span="8" > </el-col>
<div class="count-info-div" v-html="$t('api_test.home_page.test_scene_details_card.executed_sm',[sceneCountData.executedCount])"></div> <el-col :span="8">
</el-col> <div class="count-info-div"
</el-row> v-html="$t('api_test.home_page.test_scene_details_card.executed_sm',[sceneCountData.executedCount])"></div>
</el-col>
</el-row>
</el-header> </el-header>
<el-main style="padding: 5px 5px 0px 5px;margin-top: 10px"> <el-main style="padding: 5px 5px 0px 0px;margin-top: 10px">
<el-container> <el-container style="height: 96px">
<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: 40px;margin-top: 10px">
<el-aside width="50%" style="line-height: 40px;"> <el-aside width="80px" style="line-height: 40px;">
{{ $t('api_test.home_page.detail_card.rate.pass') + ":" }} <span style="float: left">
{{ $t('api_test.home_page.detail_card.rate.pass') + ":" }}
</span>
</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">
@ -59,52 +64,55 @@
</span> </span>
</el-main> </el-main>
</el-container> </el-container>
<el-container style="height: 50px;margin-top: 1px"> <el-container style="height: 40px;margin-top: 1px">
<el-aside width="50%" style="line-height: 40px;"> <el-aside width="80px" style="line-height: 40px;">
<span>{{$t('api_test.home_page.detail_card.rate.interface_coverage')+":"}}</span> <span style="float: left">
{{ $t('api_test.home_page.detail_card.rate.interface_coverage') + ":" }}
</span>
</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 v-if="interfaceCoverage === 'waitting...'"> <span v-if="interfaceCoverage === 'waitting...'">
<i class="el-icon-loading lading-icon"></i> <i class="el-icon-loading lading-icon"></i>
</span> </span>
<span v-else class="rows-count-number"> <span v-else class="rows-count-number">
{{interfaceCoverage}} {{ interfaceCoverage }}
<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.interface_coverage')}}</div> <div slot="content">{{ $t('api_test.home_page.formula.interface_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>
</el-main> </el-main>
</el-container> </el-container>
</el-aside> </el-aside>
<el-main style="padding: 5px"> <el-main style="padding: 0px; height: 80px; float:right;">
<el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px"> <el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px">
<main> <main>
<el-row> <el-row>
<el-col> <el-col>
<span class="defaultProperty"> <span class="defaultProperty">
{{$t('api_test.home_page.detail_card.unexecute')}} {{ $t('api_test.home_page.detail_card.unexecute') }}
{{"\xa0\xa0"}} {{ "\xa0\xa0" }}
<el-link type="info" @click="redirectPage('unExecute')" target="_blank" style="color: #000000"> <el-link type="info" @click="redirectPage('unExecute')" target="_blank" style="color: #000000">
{{sceneCountData.unexecuteCount}} {{ sceneCountData.unexecuteCount }}
</el-link> </el-link>
</span> </span>
</el-col> </el-col>
<el-col style="margin-top: 5px;"> <el-col style="margin-top: 5px;">
<span class="defaultProperty"> <span class="defaultProperty">
{{$t('api_test.home_page.detail_card.execution_failed')}} {{ $t('api_test.home_page.detail_card.execution_failed') }}
{{"\xa0\xa0"}} {{ "\xa0\xa0" }}
<el-link type="info" @click="redirectPage('executeFailed')" target="_blank" style="color: #000000"> <el-link type="info" @click="redirectPage('executeFailed')" target="_blank"
{{sceneCountData.executionFailedCount}} style="color: #000000">
{{ sceneCountData.executionFailedCount }}
</el-link> </el-link>
</span> </span>
</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.execution_pass')}} {{ $t('api_test.home_page.detail_card.execution_pass') }}
{{"\xa0\xa0"}} {{ "\xa0\xa0" }}
<el-link type="info" @click="redirectPage('executePass')" target="_blank" style="color: #000000"> <el-link type="info" @click="redirectPage('executePass')" target="_blank" style="color: #000000">
{{sceneCountData.executionPassCount}} {{ sceneCountData.executionPassCount }}
</el-link> </el-link>
</span> </span>
</el-col> </el-col>
@ -121,6 +129,7 @@
<script> <script>
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart"; import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default { export default {
name: "MsSceneInfoCard", name: "MsSceneInfoCard",
@ -133,14 +142,14 @@ export default {
} }
}, },
props:{ props: {
sceneCountData:{}, sceneCountData: {},
interfaceCoverage:String, interfaceCoverage: String,
}, },
methods: { methods: {
redirectPage(clickType){ redirectPage(clickType) {
this.$emit("redirectPage","scenario","scenario",clickType); this.$emit("redirectPage", "scenario", "scenario", clickType);
} }
}, },
} }
@ -150,43 +159,53 @@ 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);
margin:20px auto; margin: 20px auto;
} }
.rows-count-number{ .rows-count-number {
font-family:'ArialMT', 'Arial', sans-serif; font-family: 'ArialMT', 'Arial', sans-serif;
font-size:19px; font-size: 19px;
color: var(--count_number); color: var(--count_number);
margin:20px auto;
position: relative; position: relative;
margin-left: 10px;
float: left;
} }
.lading-icon{
.lading-icon {
font-size: 25px; font-size: 25px;
color: var(--count_number); color: var(--count_number);
font-weight: bold; font-weight: bold;
} }
.main-number-show { .main-number-show {
margin: 0 auto; margin: 0 auto;
} }
.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); width: 115px;
float: right;
-webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
} }
.defaultProperty{
.defaultProperty {
font-size: 12px font-size: 12px
} }
.main-property{
.main-property {
color: #F39021; color: #F39021;
font-size: 12px font-size: 12px
} }
@ -195,13 +214,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;
} }

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

@ -1,8 +1,9 @@
<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:16px 5px 16px 16px;"
<div slot="header" > style="height: 350px;margin-top: 5px">
<div slot="header">
<span class="title"> <span class="title">
{{$t('api_test.home_page.schedule_task_count_card.title')}} {{ $t('api_test.home_page.schedule_task_count_card.title') }}
</span> </span>
</div> </div>
<el-container> <el-container>
@ -10,38 +11,46 @@
<ms-count-ring-chart :content="scheduleTaskCountData.allApiDataCountNumber"/> <ms-count-ring-chart :content="scheduleTaskCountData.allApiDataCountNumber"/>
</el-main> </el-main>
</el-container> </el-container>
<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.schedule_task_details_card.this_week_add',[scheduleTaskCountData.thisWeekAddedCount])}} {{
$t('api_test.home_page.schedule_task_details_card.this_week_add', [scheduleTaskCountData.thisWeekAddedCount])
}}
</el-col> </el-col>
<el-col :span="8" > <el-col :span="8">
{{$t('api_test.home_page.schedule_task_details_card.this_week_execute',[scheduleTaskCountData.thisWeekExecutedCount])}} {{
$t('api_test.home_page.schedule_task_details_card.this_week_execute', [scheduleTaskCountData.thisWeekExecutedCount])
}}
</el-col> </el-col>
<el-col :span="8" > <el-col :span="8">
{{$t('api_test.home_page.schedule_task_details_card.executed',[scheduleTaskCountData.executedCount])}} {{ $t('api_test.home_page.schedule_task_details_card.executed', [scheduleTaskCountData.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">
<div class="count-info-div" v-html="$t('api_test.home_page.schedule_task_details_card.this_week_add_sm',[scheduleTaskCountData.thisWeekAddedCount])"></div> <div class="count-info-div"
v-html="$t('api_test.home_page.schedule_task_details_card.this_week_add_sm',[scheduleTaskCountData.thisWeekAddedCount])"></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.schedule_task_details_card.this_week_execute_sm',[scheduleTaskCountData.thisWeekExecutedCount])"></div> <div class="count-info-div"
v-html="$t('api_test.home_page.schedule_task_details_card.this_week_execute_sm',[scheduleTaskCountData.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.schedule_task_details_card.executed_sm',[scheduleTaskCountData.executedCount])"></div> <div class="count-info-div"
v-html="$t('api_test.home_page.schedule_task_details_card.executed_sm',[scheduleTaskCountData.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 5px 0px 0px;margin-top: 10px">
<el-container> <el-container>
<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="50px">
{{ $t('api_test.home_page.detail_card.rate.success') + ":" }} <span style="float: left">
{{ $t('api_test.home_page.detail_card.rate.success') + ":" }}
</span>
</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">
@ -54,24 +63,24 @@
</el-main> </el-main>
</el-container> </el-container>
</el-aside> </el-aside>
<el-main style="padding: 5px"> <el-main style="padding: 0px; height: 80px; float:right;">
<el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px;"> <el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px;">
<main> <main>
<el-row> <el-row>
<el-col> <el-col>
<span class="default-property"> <span class="default-property">
{{$t('api_test.home_page.detail_card.failed')}} {{ $t('api_test.home_page.detail_card.failed') }}
{{"\xa0\xa0"}} {{ "\xa0\xa0" }}
{{scheduleTaskCountData.failedCount}} {{ scheduleTaskCountData.failedCount }}
</span> </span>
</el-col> </el-col>
<el-col style=" height: 20px;margin-top: 3px;"> <el-col style=" height: 20px;margin-top: 3px;">
</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.success')}} {{ $t('api_test.home_page.detail_card.success') }}
{{"\xa0\xa0"}} {{ "\xa0\xa0" }}
{{scheduleTaskCountData.successCount}} {{ scheduleTaskCountData.successCount }}
</span> </span>
</el-col> </el-col>
</el-row> </el-row>
@ -102,11 +111,10 @@ export default {
loading: false loading: false
} }
}, },
props:{ props: {
scheduleTaskCountData:{}, scheduleTaskCountData: {},
},
methods: {
}, },
methods: {},
created() { created() {
}, },
@ -119,31 +127,36 @@ 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: 19px;
color: var(--count_number); color: var(--count_number);
position: relative; position: relative;
margin-left: 10px;
float: left;
} }
.main-number-show { .count-number-show {
margin: 0px auto; margin: 20px auto;
} }
.count-number-show{ .detail-container {
margin:20px auto;
}
.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); width: 115px;
float: right;
-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;
} }
@ -152,14 +165,16 @@ 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{
position: absolute; .info-tool-tip {
top: 0; position: absolute;
} top: 30px;
}
</style> </style>

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

@ -1,5 +1,6 @@
<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:16px 5px 16px 16px;"
style="height: 350px;margin-top: 5px">
<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') }}
@ -10,7 +11,7 @@
<ms-count-ring-chart :content="testCaseCountData.allApiDataCountNumber"/> <ms-count-ring-chart :content="testCaseCountData.allApiDataCountNumber"/>
</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: 185px; float:right;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" <el-col :span="6"
style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;"> style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
@ -28,7 +29,7 @@
<div class="count-info-div" v-html="testCaseCountData.sqlCountStr"></div> <div class="count-info-div" v-html="testCaseCountData.sqlCountStr"></div>
</el-col> </el-col>
</el-row> </el-row>
<el-row align="right" style="margin-left: 20px" class="hidden-xl-only"> <el-row align="right" class="hidden-xl-only">
<el-col :span="6" <el-col :span="6"
style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;"> 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>
@ -69,12 +70,8 @@
</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') }} <div class="count-info-div"
<br/> v-html="$t('api_test.home_page.schedule_task_details_card.this_week_add_sm',[testCaseCountData.thisWeekAddedCount])"></div>
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">
{{ testCaseCountData.thisWeekAddedCount }}
</el-link>
{{ $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" <div class="count-info-div"
@ -86,12 +83,14 @@
</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 5px 0px 0px;margin-top: 10px">
<el-container> <el-container>
<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="50px">
{{ $t('api_test.home_page.detail_card.rate.coverage') + ":" }} <span style="float: left">
{{ $t('api_test.home_page.detail_card.rate.coverage') + ":" }}
</span>
</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">
@ -104,7 +103,7 @@
</el-main> </el-main>
</el-container> </el-container>
</el-aside> </el-aside>
<el-main style="padding: 5px"> <el-main style="padding: 0px; height: 80px; float:right;">
<el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px"> <el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px">
<main> <main>
<el-row> <el-row>
@ -141,6 +140,7 @@
<script> <script>
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart"; import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default { export default {
name: "MsTestCaseInfoCard", name: "MsTestCaseInfoCard",
@ -183,13 +183,15 @@ export default {
.count-number { .count-number {
font-family: 'ArialMT', 'Arial', sans-serif; font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 33px; font-size: 19px;
color: var(--count_number); color: var(--count_number);
position: relative; position: relative;
margin-left: 10px;
float: left;
} }
.count-number-show { .count-number-show {
margin: 20px auto; margin: 19px auto;
} }
.detail-container { .detail-container {
@ -197,6 +199,8 @@ export default {
} }
.no-shadow-card { .no-shadow-card {
width: 115px;
float: right;
-webkit-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); box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
} }
@ -224,6 +228,6 @@ export default {
.info-tool-tip { .info-tool-tip {
position: absolute; position: absolute;
top: 0; top: 30px;
} }
</style> </style>