Skip to content

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

feat(任务概览): ui

parent 17a91106
Hide whitespace changes
Inline Side-by-side
Showing with 364 additions and 92 deletions
src/views/setting/sample/taskDetails/index.vue
View file @ 7a920c5d
......@@ -10,7 +10,7 @@
检验依据：<sapn class="card-contnet">GBxxx</sapn>
</el-col>
<el-col :span="8" class="card-title"> 检验项目： </el-col>
<el-col :span="8" class="card-title" v> 保密等级 </el-col>
<el-col :span="8" class="card-title" v> 保密等级： </el-col>
</el-row>
<el-row :gutter="41" style="margin-bottom: 24px">
<el-col :span="8" class="card-title"> 产品名称： </el-col>
......@@ -30,116 +30,381 @@
</div>
<el-row :gutter="40">
<el-col :span="12">
<el-row style="text-align: center"> 用例维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
type="circle"
:percentage="30"
color="#13BE24"
:width="120"
:stroke-width="16"
:format="format"
></el-progress>
</el-col>
<el-col :span="4">
<div class="prograss-laout" style="float: right">
<span class="line-prograss-title">审查细则（条）</span>
<span class="line-prograss-title">审查细则通过（个）</span>
<span class="line-prograss-title"
>审查细则未通过（个）</span
>
<span class="line-prograss-title">审查中（个）</span>
</div>
</el-col>
<el-col :span="14">
<div class="prograss-laout">
<div style="border: 1px solid #ebebeb; padding: 24px 0 24px 24px">
<el-row class="prograss-title"> 用例维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
:text-inside="true"
type="circle"
:percentage="30"
color="#13BE24"
:width="120"
:stroke-width="16"
:percentage="70"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
status="warning"
text-color="#fff"
:format="format"
></el-progress>
</el-col>
<el-col :span="4">
<div class="prograss-laout" style="text-align: end">
<span class="line-prograss-title">审查细则（条）</span>
<span class="line-prograss-title"
>审查细则通过（个）</span
>
<span class="line-prograss-title"
>审查细则未通过（个）</span
>
<span class="line-prograss-title">审查中（个）</span>
</div>
</el-col>
<el-col :span="14">
<div class="prograss-laout">
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="70"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
status="warning"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="50"
status="exception"
color="#f98921"
text-color="#fff"
></el-progress>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="12">
<div style="border: 1px solid #ebebeb; padding: 24px 0 24px 24px">
<el-row class="prograss-title"> 合规维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
:text-inside="true"
type="circle"
:percentage="30"
color="#13BE24"
:width="120"
:stroke-width="16"
:percentage="50"
status="exception"
color="#f98921"
text-color="#fff"
:format="format"
></el-progress>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="4">
<div class="prograss-laout" style="text-align: end">
<span class="line-prograss-title">标准条款（个）</span>
<span class="line-prograss-title"
>标准条款通过（个）</span
>
<span class="line-prograss-title"
>标准条款未通过（个）</span
>
<span class="line-prograss-title">审查中（个）</span>
</div>
</el-col>
<el-col :span="14">
<div class="prograss-laout">
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="70"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
status="warning"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="50"
status="exception"
color="#f98921"
text-color="#fff"
></el-progress>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<div class="tip-navigation">
<div class="tip"></div>
<div class="tip-title">车型审查</div>
</div>
<el-row :gutter="40">
<el-col :span="12">
<el-row style="text-align: center"> 合规维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
type="circle"
:percentage="30"
color="#13BE24"
:width="120"
:stroke-width="16"
:format="format"
></el-progress>
</el-col>
<el-col :span="4">
<div class="prograss-laout" style="float: right">
<span>shen</span>
<span>shen</span>
<span>shen</span>
<span>shen</span>
</div>
</el-col>
<el-col :span="14">
<div class="prograss-laout">
<div style="border: 1px solid #ebebeb; padding: 24px 0 24px 24px">
<el-row style="text-align: center"> 用例维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
:text-inside="true"
type="circle"
:percentage="30"
color="#13BE24"
:width="120"
:stroke-width="16"
:percentage="70"
text-color="#fff"
:format="format"
></el-progress>
</el-col>
<el-col :span="4">
<div class="prograss-laout" style="text-align: end">
<span class="line-prograss-title"
>测试用例合计（个）</span
>
<span class="line-prograss-title">测试通过（个）</span>
<span class="line-prograss-title">测试未通过（个）</span>
<span class="line-prograss-title">执行未完成（个）</span>
</div>
</el-col>
<el-col :span="14">
<div class="prograss-laout">
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="70"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
status="warning"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="50"
status="exception"
color="#f98921"
text-color="#fff"
></el-progress>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="12">
<div style="border: 1px solid #ebebeb; padding: 24px 0 24px 24px">
<el-row style="text-align: center"> 合规维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
:text-inside="true"
type="circle"
:percentage="30"
color="#13BE24"
:width="120"
:stroke-width="16"
:percentage="100"
status="success"
text-color="#fff"
:format="format"
></el-progress>
</el-col>
<el-col :span="4">
<div class="prograss-laout" style="text-align: end">
<span class="line-prograss-title">标准条款（个）</span>
<span class="line-prograss-title"
>审查细则通过（个）</span
>
<span class="line-prograss-title"
>审查细则未通过（个）</span
>
<span class="line-prograss-title">审查中（个）</span>
</div>
</el-col>
<el-col :span="14">
<div class="prograss-laout">
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="70"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
status="warning"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="50"
status="exception"
color="#f98921"
text-color="#fff"
></el-progress>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<div class="tip-navigation">
<div class="tip"></div>
<div class="tip-title">体系审查</div>
</div>
<el-row :gutter="40">
<el-col :span="12">
<div style="border: 1px solid #ebebeb; padding: 24px 0 24px 24px">
<el-row style="text-align: center"> 用例维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
:text-inside="true"
type="circle"
:percentage="30"
color="#13BE24"
:width="120"
:stroke-width="16"
:percentage="80"
status="warning"
text-color="#fff"
:format="format"
></el-progress>
</el-col>
<el-col :span="4">
<div class="prograss-laout" style="text-align: end">
<span class="line-prograss-title">审查细则（条）</span>
<span class="line-prograss-title"
>审查细则通过（个）</span
>
<span class="line-prograss-title"
>审查细则未通过（个）</span
>
<span class="line-prograss-title">审查中（个）</span>
</div>
</el-col>
<el-col :span="14">
<div class="prograss-laout">
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="70"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
status="warning"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="50"
status="exception"
color="#f98921"
text-color="#fff"
></el-progress>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="12">
<div style="border: 1px solid #ebebeb; padding: 24px 0 24px 24px">
<el-row style="text-align: center"> 用例维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
:text-inside="true"
type="circle"
:percentage="30"
color="#13BE24"
:width="120"
:stroke-width="16"
:percentage="50"
status="exception"
color="#f98921"
text-color="#fff"
:format="format"
></el-progress>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="4">
<div class="prograss-laout" style="text-align: end">
<span class="line-prograss-title">审查细则（条）</span>
<span class="line-prograss-title"
>审查细则通过（个）</span
>
<span class="line-prograss-title"
>审查细则未通过（个）</span
>
<span class="line-prograss-title">审查中（个）</span>
</div>
</el-col>
<el-col :span="14">
<div class="prograss-laout">
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="70"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
status="warning"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="50"
status="exception"
color="#f98921"
text-color="#fff"
></el-progress>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</el-tab-pane>
......@@ -205,7 +470,7 @@ export default {
.tip-navigation {
display: flex;
align-items: center;
margin-bottom: 30px;
margin: 30px 0;
.tip {
width: 4px;
height: 26px;
......@@ -231,4 +496,11 @@ export default {
font-weight: 400;
color: #606266;
}
.prograss-title {
text-align: center;
font-size: 14px;
font-weight: 700;
color: #606266;
margin-bottom: 20px;
}
</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