Skip to content

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

feat(任务概览): 页面内容

parent cfa252a2
Hide whitespace changes
Inline Side-by-side
Showing with 203 additions and 15 deletions
src/views/setting/sample/taskDetails/index.vue
View file @ 17a91106
<template> <template>
<page-standard> <page-standard>
<div> <div class="header">
<div>任务编号</div> <div class="header-title">任务编号</div>
<div>(任务状态：)</div> <div class="header-state">(任务状态：)</div>
</div> </div>
<div class="detailsCard"> <div class="detailsCard">
<el-row :gutter="41"> <el-row :gutter="41" style="margin-bottom: 24px">
<el-col :span="8"> 检验依据： </el-col> <el-col :span="8" class="card-title">
<el-col :span="8"> 检验项目： </el-col> 检验依据：<sapn class="card-contnet">GBxxx</sapn>
<el-col :span="8"> 保密等级 </el-col> </el-col>
<el-col :span="8" class="card-title"> 检验项目： </el-col>
<el-col :span="8" class="card-title" v> 保密等级 </el-col>
</el-row> </el-row>
<el-row :gutter="41"> <el-row :gutter="41" style="margin-bottom: 24px">
<el-col :span="8"> 产品名称： </el-col> <el-col :span="8" class="card-title"> 产品名称： </el-col>
<el-col :span="8"> 小组成员： </el-col> <el-col :span="8" class="card-title"> 小组成员： </el-col>
<el-col :span="8"> 委托单位： </el-col> <el-col :span="8" class="card-title"> 委托单位： </el-col>
</el-row> </el-row>
<el-row :gutter="41"> <el-row :gutter="41" style="margin-bottom: 24px">
<el-col :span="8"> 车辆型号： </el-col> <el-col :span="8" class="card-title"> 车辆型号： </el-col>
</el-row> </el-row>
</div> </div>
<div> <div>
<el-tabs v-model="activeName" @tab-click="tabClick"> <el-tabs v-model="activeName" @tab-click="tabClick">
<el-tab-pane label="数据统计" name="dataStatistics"></el-tab-pane> <el-tab-pane label="数据统计" name="dataStatistics">
<el-tab-pane label="样品信息" name="sampleInformation"></el-tab-pane> <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 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>
</el-col>
<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">
<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>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="样品信息" name="sampleInformation">
<div class="tip-navigation">
<div class="tip"></div>
<div class="tip-title">整车样品信息</div>
</div>
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</page-standard> </page-standard>
...@@ -33,6 +159,12 @@ export default { ...@@ -33,6 +159,12 @@ export default {
return { return {
activeName: 'dataStatistics' activeName: 'dataStatistics'
} }
},
methods: {
tabClick() {},
format(percentage) {
return (percentage = '审查通过率' + `${percentage}%`)
}
} }
} }
</script> </script>
...@@ -42,5 +174,61 @@ export default { ...@@ -42,5 +174,61 @@ export default {
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
padding: 25px 25px 0 25px;
margin-bottom: 40px;
.card-title {
font-size: 14px;
font-weight: 700;
color: #606266;
}
.card-contnet {
font-size: 14px;
font-weight: 400;
color: #606266;
}
}
.header {
text-align: center;
margin-bottom: 40px;
.header-title {
font-size: 20px;
font-weight: 700;
color: #303133;
margin-bottom: 16px;
}
.header-state {
font-size: 16px;
font-weight: 400;
color: #13be24;
}
}
.tip-navigation {
display: flex;
align-items: center;
margin-bottom: 30px;
.tip {
width: 4px;
height: 26px;
background: #1a6fd7;
margin-right: 14px;
}
.tip-title {
font-size: 16px;
font-weight: 700;
color: #1a6fd7;
}
}
.prograss-laout {
height: 120px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
.line-prograss-title {
font-size: 14px;
font-weight: 400;
color: #606266;
} }
</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