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 @@
<el-row class="prograss-title"> 用例维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
type="circle"
:percentage="
percentageChange(dataStatistic.systemDetailsPass)
"
color="#13BE24"
:width="130"
:stroke-width="16"
:format="format"
></el-progress>
<div class="circleBox">
<el-progress
type="circle"
:percentage="
percentageChange(dataStatistic.systemDetailsPass)
"
color="#13BE24"
:width="140"
:stroke-width="16"
/>
<div class="circleCenter">
<span>审查通过率</span>
<div>
{{
percentageChange(dataStatistic.systemDetailsPass)
}}%
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="prograss-laout" style="text-align: end">
......@@ -167,16 +176,25 @@
<el-row class="prograss-title"> 合规维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
type="circle"
:percentage="
percentageChange(dataStatistic.systemStandardsPass)
"
color="#13BE24"
:width="130"
:stroke-width="16"
:format="format"
></el-progress>
<div class="circleBox">
<el-progress
type="circle"
:percentage="
percentageChange(dataStatistic.systemStandardsPass)
"
color="#13BE24"
:width="140"
:stroke-width="16"
/>
<div class="circleCenter">
<span>审查通过率</span>
<div>
{{
percentageChange(dataStatistic.systemStandardsPass)
}}%
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="prograss-laout" style="text-align: end">
......@@ -253,16 +271,23 @@
<el-row class="prograss-title"> 用例维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
type="circle"
:percentage="
percentageChange(dataStatistic.carDetailsPass)
"
color="#13BE24"
:width="130"
:stroke-width="16"
:format="format"
></el-progress>
<div class="circleBox">
<el-progress
type="circle"
:percentage="
percentageChange(dataStatistic.carDetailsPass)
"
color="#13BE24"
:width="140"
:stroke-width="16"
/>
<div class="circleCenter">
<span>审查通过率</span>
<div>
{{ percentageChange(dataStatistic.carDetailsPass) }}%
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="prograss-laout" style="text-align: end">
......@@ -326,16 +351,25 @@
<el-row class="prograss-title"> 合规维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
type="circle"
:percentage="
percentageChange(dataStatistic.carStandardsPass)
"
color="#13BE24"
:width="130"
:stroke-width="16"
:format="format"
></el-progress>
<div class="circleBox">
<el-progress
type="circle"
:percentage="
percentageChange(dataStatistic.carStandardsPass)
"
color="#13BE24"
:width="140"
:stroke-width="16"
/>
<div class="circleCenter">
<span>审查通过率</span>
<div>
{{
percentageChange(dataStatistic.carStandardsPass)
}}%
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="prograss-laout" style="text-align: end">
......@@ -407,16 +441,23 @@
<el-row class="prograss-title"> 用例维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
type="circle"
:percentage="
percentageChange(dataStatistic.testDetailsPass)
"
color="#13BE24"
:width="130"
:stroke-width="16"
:format="formatTest"
></el-progress>
<div class="circleBox">
<el-progress
type="circle"
:percentage="
percentageChange(dataStatistic.testDetailsPass)
"
color="#13BE24"
:width="140"
:stroke-width="16"
/>
<div class="circleCenter">
<span>测试通过率</span>
<div>
{{ percentageChange(dataStatistic.testDetailsPass) }}%
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="prograss-laout" style="text-align: end">
......@@ -480,16 +521,25 @@
<el-row class="prograss-title"> 合规维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
type="circle"
:percentage="
percentageChange(dataStatistic.testStandardsPass)
"
color="#13BE24"
:width="130"
:stroke-width="16"
:format="format"
></el-progress>
<div class="circleBox">
<el-progress
type="circle"
:percentage="
percentageChange(dataStatistic.testStandardsPass)
"
color="#13BE24"
:width="140"
:stroke-width="16"
/>
<div class="circleCenter">
<span>测试通过率</span>
<div>
{{
percentageChange(dataStatistic.testStandardsPass)
}}%
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="prograss-laout" style="text-align: end">
......@@ -822,12 +872,6 @@ export default {
return data.split(',')
},
tabClick() {},
formatTest(percentage) {
return (percentage = `测试通过率\n\n ${percentage}%`)
},
format(percentage) {
return (percentage = `审查通过率\n\n ${percentage}%`)
},
progressLine(percentage) {
return (percentage = `${percentage}`)
},
......@@ -842,6 +886,28 @@ export default {
}
</script>
<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 {
background: #ffffff;
border: 1px solid #ebebeb;
......@@ -1011,5 +1077,12 @@ export default {
}
::v-deep .el-progress__text {
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>
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