Skip to content

W
web
Commit f30ec767 authored by 高滢's avatar 高滢
Browse files
Options

feat(数据统计): ui

parent f4ee30cf
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 66 deletions
src/views/setting/sample/taskDetails/index.vue
View file @ f30ec767
...@@ -92,16 +92,25 @@ ...@@ -92,16 +92,25 @@
<el-row class="prograss-title"> 用例维度 </el-row> <el-row class="prograss-title"> 用例维度 </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="4"> <el-col :span="4">
<el-progress <div class="circleBox">
type="circle" <el-progress
:percentage=" type="circle"
percentageChange(dataStatistic.systemDetailsPass) :percentage="
" percentageChange(dataStatistic.systemDetailsPass)
color="#13BE24" "
:width="130" color="#13BE24"
:stroke-width="16" :width="140"
:format="format" :stroke-width="16"
></el-progress> />
<div class="circleCenter">
<span>审查通过率</span>
<div>
{{
percentageChange(dataStatistic.systemDetailsPass)
}}%
</div>
</div>
</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="prograss-laout" style="text-align: end"> <div class="prograss-laout" style="text-align: end">
...@@ -167,16 +176,25 @@ ...@@ -167,16 +176,25 @@
<el-row class="prograss-title"> 合规维度 </el-row> <el-row class="prograss-title"> 合规维度 </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="4"> <el-col :span="4">
<el-progress <div class="circleBox">
type="circle" <el-progress
:percentage=" type="circle"
percentageChange(dataStatistic.systemStandardsPass) :percentage="
" percentageChange(dataStatistic.systemStandardsPass)
color="#13BE24" "
:width="130" color="#13BE24"
:stroke-width="16" :width="140"
:format="format" :stroke-width="16"
></el-progress> />
<div class="circleCenter">
<span>审查通过率</span>
<div>
{{
percentageChange(dataStatistic.systemStandardsPass)
}}%
</div>
</div>
</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="prograss-laout" style="text-align: end"> <div class="prograss-laout" style="text-align: end">
...@@ -253,16 +271,23 @@ ...@@ -253,16 +271,23 @@
<el-row class="prograss-title"> 用例维度 </el-row> <el-row class="prograss-title"> 用例维度 </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="4"> <el-col :span="4">
<el-progress <div class="circleBox">
type="circle" <el-progress
:percentage=" type="circle"
percentageChange(dataStatistic.carDetailsPass) :percentage="
" percentageChange(dataStatistic.carDetailsPass)
color="#13BE24" "
:width="130" color="#13BE24"
:stroke-width="16" :width="140"
:format="format" :stroke-width="16"
></el-progress> />
<div class="circleCenter">
<span>审查通过率</span>
<div>
{{ percentageChange(dataStatistic.carDetailsPass) }}%
</div>
</div>
</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="prograss-laout" style="text-align: end"> <div class="prograss-laout" style="text-align: end">
...@@ -326,16 +351,25 @@ ...@@ -326,16 +351,25 @@
<el-row class="prograss-title"> 合规维度 </el-row> <el-row class="prograss-title"> 合规维度 </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="4"> <el-col :span="4">
<el-progress <div class="circleBox">
type="circle" <el-progress
:percentage=" type="circle"
percentageChange(dataStatistic.carStandardsPass) :percentage="
" percentageChange(dataStatistic.carStandardsPass)
color="#13BE24" "
:width="130" color="#13BE24"
:stroke-width="16" :width="140"
:format="format" :stroke-width="16"
></el-progress> />
<div class="circleCenter">
<span>审查通过率</span>
<div>
{{
percentageChange(dataStatistic.carStandardsPass)
}}%
</div>
</div>
</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="prograss-laout" style="text-align: end"> <div class="prograss-laout" style="text-align: end">
...@@ -407,16 +441,23 @@ ...@@ -407,16 +441,23 @@
<el-row class="prograss-title"> 用例维度 </el-row> <el-row class="prograss-title"> 用例维度 </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="4"> <el-col :span="4">
<el-progress <div class="circleBox">
type="circle" <el-progress
:percentage=" type="circle"
percentageChange(dataStatistic.testDetailsPass) :percentage="
" percentageChange(dataStatistic.testDetailsPass)
color="#13BE24" "
:width="130" color="#13BE24"
:stroke-width="16" :width="140"
:format="formatTest" :stroke-width="16"
></el-progress> />
<div class="circleCenter">
<span>测试通过率</span>
<div>
{{ percentageChange(dataStatistic.testDetailsPass) }}%
</div>
</div>
</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="prograss-laout" style="text-align: end"> <div class="prograss-laout" style="text-align: end">
...@@ -480,16 +521,25 @@ ...@@ -480,16 +521,25 @@
<el-row class="prograss-title"> 合规维度 </el-row> <el-row class="prograss-title"> 合规维度 </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="4"> <el-col :span="4">
<el-progress <div class="circleBox">
type="circle" <el-progress
:percentage=" type="circle"
percentageChange(dataStatistic.testStandardsPass) :percentage="
" percentageChange(dataStatistic.testStandardsPass)
color="#13BE24" "
:width="130" color="#13BE24"
:stroke-width="16" :width="140"
:format="format" :stroke-width="16"
></el-progress> />
<div class="circleCenter">
<span>测试通过率</span>
<div>
{{
percentageChange(dataStatistic.testStandardsPass)
}}%
</div>
</div>
</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="prograss-laout" style="text-align: end"> <div class="prograss-laout" style="text-align: end">
...@@ -822,12 +872,6 @@ export default { ...@@ -822,12 +872,6 @@ export default {
return data.split(',') return data.split(',')
}, },
tabClick() {}, tabClick() {},
formatTest(percentage) {
return (percentage = `测试通过率\n\n ${percentage}%`)
},
format(percentage) {
return (percentage = `审查通过率\n\n ${percentage}%`)
},
progressLine(percentage) { progressLine(percentage) {
return (percentage = `${percentage}`) return (percentage = `${percentage}`)
}, },
...@@ -842,6 +886,28 @@ export default { ...@@ -842,6 +886,28 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.circleBox {
position: relative;
text-align: center;
width: 140px;
.circleCenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
div {
margin-top: 10px;
font-size: 16px;
font-weight: 700;
color: #303133;
}
span {
font-size: 14px;
font-weight: 400;
color: #606266;
}
}
}
.detailsCard { .detailsCard {
background: #ffffff; background: #ffffff;
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
...@@ -1011,5 +1077,12 @@ export default { ...@@ -1011,5 +1077,12 @@ export default {
} }
::v-deep .el-progress__text { ::v-deep .el-progress__text {
white-space: pre; white-space: pre;
display: none;
}
::v-deep .el-progress-bar__outer {
border-radius: 0px !important;
}
::v-deep .el-progress-bar__inner {
border-radius: 0px !important;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment