Skip to content

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

feat(任务概览): 页面

parent 66b6b886
Show whitespace changes
Inline Side-by-side
Showing with 603 additions and 93 deletions
src/api/system/sample.js
View file @ 53d97782
......@@ -47,3 +47,22 @@ export function selectMaterial(data) {
data: data
})
}
// 查看任务概览任务详情
export function selectTaskInfo(data){
return request({
url:'/task/getById',
method:'post',
data: data
})
}
// 查看任务概览数据统计
export function selectDataStatistics(data){
return request({
url:'/task/dataStatistics',
method: 'post',
data: data
})
}
src/assets/styles/element-ui.scss
View file @ 53d97782
......@@ -118,3 +118,7 @@
top: 20px;
transform: translateX(100%);
}
.el-checkbox__input.is-disabled + span.el-checkbox__label {
color: #606266;
}
src/views/setting/sample/index.vue
View file @ 53d97782
......@@ -150,7 +150,7 @@
@click="goTaskDetails(item.taskId)"
>{{ item.taskNo ? item.taskNo : '--' }}
<span v-show="index + 1 != scope.row.taskSampleRelation.length">
,
、
</span></el-link
>
</div>
......
src/views/setting/sample/taskDetails/index.vue
View file @ 53d97782
<template>
<page-standard>
<div class="header">
<div class="header-title">任务编号</div>
<div class="header-state">(任务状态：)</div>
<div class="header-title">
{{ taskForm.taskNo }} - {{ taskForm.taskName }}
</div>
<div class="header-state">
(任务状态：<dict-tag
:options="dict.type.system_task_status"
:value="taskForm.taskStatus"
/>)
</div>
</div>
<div class="detailsCard">
<el-row :gutter="41" style="margin-bottom: 24px">
<el-form
:model="taskForm"
size="small"
label-position="right"
label-width="100px"
>
<el-row :gutter="41">
<el-col :span="8">
<el-form-item label="检验依据：">
<sapn class="card-contnet">{{ taskForm.name }}</sapn>
</el-form-item>
</el-col>
<el-col :span="8" class="card-title">
检验依据：<sapn class="card-contnet">GBxxx</sapn>
<el-form-item label="检验项目：">
<el-checkbox-group v-model="taskList">
<el-checkbox
v-for="(item, index) in taskList"
:key="index"
:label="item"
disabled
></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-col>
<el-col :span="8" class="card-title" style="display: flex">
<el-form-item label="保密等级：">
<dict-tag
:options="dict.type.confidentiality_level"
:value="taskForm.confidentialityLevel"
/>
</el-form-item>
</el-col>
<el-col :span="8" class="card-title"> 检验项目： </el-col>
<el-col :span="8" class="card-title"> 保密等级： </el-col>
</el-row>
<el-row :gutter="41" style="margin-bottom: 24px">
<el-col :span="8" class="card-title"> 产品名称： </el-col>
<el-col :span="8" class="card-title"> 小组成员： </el-col>
<el-col :span="8" class="card-title"> 委托单位： </el-col>
<el-row :gutter="41">
<el-col :span="8" class="card-title">
<el-form-item label="产品名称：">
<sapn class="card-contnet">{{ taskForm.productName }}</sapn>
</el-form-item>
</el-col>
<el-col :span="8" class="card-title">
<el-form-item label="小组成员：">
<sapn class="card-contnet"
>{{ taskForm.leader ? taskForm.leader + '(组长)、' : '' }}
<div v-for="(item, index) in taskForm.auditors" :key="index">
{{ item.name }}
<span v-show="index + 1 != taskForm.auditors.length">
、
</span>
</div>
</sapn>
</el-form-item>
</el-col>
<el-col :span="8" class="card-title">
<el-form-item label="委托单位：">
<sapn class="card-contnet">{{ taskForm.entrustedUnit }}</sapn>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="41" style="margin-bottom: 24px">
<el-col :span="8" class="card-title"> 车辆型号： </el-col>
<el-row :gutter="41">
<el-col :span="8" class="card-title">
<el-form-item label="车辆型号：">
<sapn class="card-contnet">{{ taskForm.productModel }}</sapn>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div>
<el-tabs v-model="activeName" @tab-click="tabClick">
......@@ -36,14 +94,16 @@
<el-col :span="4">
<el-progress
type="circle"
:percentage="30"
:percentage="
percentageChange(dataStatistic.systemDetailsPass)
"
color="#13BE24"
:width="120"
:width="130"
:stroke-width="16"
:format="format"
></el-progress>
</el-col>
<el-col :span="4">
<el-col :span="6">
<div class="prograss-laout" style="text-align: end">
<span class="line-prograss-title">审查细则（条）</span>
<span class="line-prograss-title"
......@@ -55,32 +115,44 @@
<span class="line-prograss-title">审查中（个）</span>
</div>
</el-col>
<el-col :span="14">
<el-col :span="12">
<div class="prograss-laout">
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="70"
:percentage="
percentageChange(dataStatistic.systemDetails)
"
:format="progressLine"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
:percentage="
percentageChange(dataStatistic.systemDetailsPassNum)
"
:format="progressLine"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
:percentage="
percentageChange(dataStatistic.systemDetailsNoPassNum)
"
:format="progressLine"
status="warning"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="50"
:percentage="
percentageChange(dataStatistic.systemDetailsUnderNum)
"
:format="progressLine"
status="exception"
color="#f98921"
text-color="#fff"
......@@ -97,14 +169,16 @@
<el-col :span="4">
<el-progress
type="circle"
:percentage="30"
:percentage="
percentageChange(dataStatistic.systemStandardsPass)
"
color="#13BE24"
:width="120"
:width="130"
:stroke-width="16"
:format="format"
></el-progress>
</el-col>
<el-col :span="4">
<el-col :span="6">
<div class="prograss-laout" style="text-align: end">
<span class="line-prograss-title">标准条款（个）</span>
<span class="line-prograss-title"
......@@ -116,32 +190,48 @@
<span class="line-prograss-title">审查中（个）</span>
</div>
</el-col>
<el-col :span="14">
<el-col :span="12">
<div class="prograss-laout">
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="70"
:percentage="
percentageChange(dataStatistic.systemStandards)
"
:format="progressLine"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
:percentage="
percentageChange(dataStatistic.systemStandardsPassNum)
"
:format="progressLine"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
:percentage="
percentageChange(
dataStatistic.systemStandardsNoPassNum
)
"
:format="progressLine"
status="warning"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="50"
:percentage="
percentageChange(
dataStatistic.systemStandardsUnderNum
)
"
:format="progressLine"
status="exception"
color="#f98921"
text-color="#fff"
......@@ -160,54 +250,68 @@
<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 class="prograss-title"> 用例维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
type="circle"
:percentage="30"
:percentage="
percentageChange(dataStatistic.carDetailsPass)
"
color="#13BE24"
:width="120"
:width="130"
:stroke-width="16"
:format="format"
></el-progress>
</el-col>
<el-col :span="4">
<el-col :span="6">
<div class="prograss-laout" style="text-align: end">
<span class="line-prograss-title">审查细则（条）</span>
<span class="line-prograss-title"
>测试用例合计（个）</span
>审查细则通过（个）</span
>
<span class="line-prograss-title">测试通过（个）</span>
<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">
<el-col :span="12">
<div class="prograss-laout">
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="70"
:percentage="percentageChange(dataStatistic.carDetails)"
:format="progressLine"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
:percentage="
percentageChange(dataStatistic.carDetailsPassNum)
"
:format="progressLine"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
:percentage="
percentageChange(dataStatistic.carDetailsNoPassNum)
"
:format="progressLine"
status="warning"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="50"
:percentage="
percentageChange(dataStatistic.carDetailsUnderNum)
"
:format="progressLine"
status="exception"
color="#f98921"
text-color="#fff"
......@@ -219,56 +323,70 @@
</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 class="prograss-title"> 合规维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
type="circle"
:percentage="30"
:percentage="
percentageChange(dataStatistic.carStandardsPass)
"
color="#13BE24"
:width="120"
:width="130"
:stroke-width="16"
:format="format"
></el-progress>
</el-col>
<el-col :span="4">
<el-col :span="6">
<div class="prograss-laout" style="text-align: end">
<span class="line-prograss-title">标准条款（个）</span>
<span class="line-prograss-title"
>审查细则通过（个）</span
>标准条款通过（个）</span
>
<span class="line-prograss-title"
>审查细则未通过（个）</span
>标准条款未通过（个）</span
>
<span class="line-prograss-title">审查中（个）</span>
</div>
</el-col>
<el-col :span="14">
<el-col :span="12">
<div class="prograss-laout">
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="70"
:percentage="
percentageChange(dataStatistic.carStandards)
"
:format="progressLine"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
:percentage="
percentageChange(dataStatistic.carStandardsPassNum)
"
:format="progressLine"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
:percentage="
percentageChange(dataStatistic.carStandardsNoPassNum)
"
:format="progressLine"
status="warning"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="50"
:percentage="
percentageChange(dataStatistic.carStandardsUnderNum)
"
:format="progressLine"
status="exception"
color="#f98921"
text-color="#fff"
......@@ -281,61 +399,73 @@
</el-row>
<div class="tip-navigation">
<div class="tip"></div>
<div class="tip-title">体系审查</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 class="prograss-title"> 用例维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
type="circle"
:percentage="30"
:percentage="
percentageChange(dataStatistic.testDetailsPass)
"
color="#13BE24"
:width="120"
:width="130"
:stroke-width="16"
:format="format"
:format="formatTest"
></el-progress>
</el-col>
<el-col :span="4">
<el-col :span="6">
<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
>
<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">
<el-col :span="12">
<div class="prograss-laout">
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="70"
:percentage="
percentageChange(dataStatistic.testDetails)
"
:format="progressLine"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
:percentage="
percentageChange(dataStatistic.testDetailsPassNum)
"
:format="progressLine"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
:percentage="
percentageChange(dataStatistic.testDetailsNoPassNum)
"
:format="progressLine"
status="warning"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="50"
:percentage="
percentageChange(dataStatistic.testDetailsUnderNum)
"
:format="progressLine"
status="exception"
color="#f98921"
text-color="#fff"
......@@ -347,56 +477,66 @@
</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 class="prograss-title"> 合规维度 </el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-progress
type="circle"
:percentage="30"
:percentage="
percentageChange(dataStatistic.testStandardsPass)
"
color="#13BE24"
:width="120"
:width="130"
:stroke-width="16"
:format="format"
></el-progress>
</el-col>
<el-col :span="4">
<el-col :span="6">
<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>
<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">
<el-col :span="12">
<div class="prograss-laout">
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="70"
:percentage="
percentageChange(dataStatistic.testDetailsUnderNum)
"
:format="testStandards"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="100"
:percentage="
percentageChange(dataStatistic.testStandardsPassNum)
"
:format="testStandards"
status="success"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="80"
:percentage="
percentageChange(dataStatistic.testStandardsNoPassNum)
"
:format="testStandards"
status="warning"
text-color="#fff"
></el-progress>
<el-progress
:text-inside="true"
:stroke-width="16"
:percentage="50"
:percentage="
percentageChange(dataStatistic.testStandardsUnderNum)
"
:format="testStandards"
status="exception"
color="#f98921"
text-color="#fff"
......@@ -411,7 +551,212 @@
<el-tab-pane label="样品信息" name="sampleInformation">
<div class="tip-navigation">
<div class="tip"></div>
<div class="tip-title">整车样品信息</div>
<div class="tip-title">
{{
'整车样品信息 (' + taskForm.completeVehicleSample.length + ')'
}}
</div>
</div>
<div style="display: flex; flex-wrap: wrap">
<div
v-for="(item, index) in taskForm.completeVehicleSample"
:key="index"
class="sampleCard"
>
<div class="sampleHeader">
<div class="avater">
<image-preview
width="62px"
height="62px"
:src="item.trademark"
></image-preview>
</div>
<div class="title">
<div class="top">{{ item.sampleNumber }}</div>
<div class="bottom">{{ item.sampleName }}</div>
</div>
</div>
<div style="margin-left: 4.8rem">
<div v-if="item.samplePhotos">
<image-preview
width="32px"
height="32px"
:src="item.samplePhotos"
></image-preview>
</div>
<div v-else>暂无样品照片</div>
</div>
<el-divider></el-divider>
<el-row :gutter="20" style="margin-bottom: 20px">
<el-col :span="8">
<div class="greenCard">
<div>
<div class="title">样品数量</div>
<div class="content">
{{ item.numberOfSamples ? item.numberOfSamples : '-' }}
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="yellowCard">
<div>
<div class="title">送样日期</div>
<div class="content">
{{ item.deliveryDate ? item.deliveryDate : '-' }}
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="blueCard">
<div>
<div class="title">送样者</div>
<div class="content">
{{ item.sampleSender ? item.sampleSender : '-' }}
</div>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<div class="greenCard">
<div>
<div class="title">车辆识别码</div>
<div class="content">
{{
item.identificationCode
? item.identificationCode
: '-'
}}
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="yellowCard">
<div>
<div class="title">生产日期</div>
<div class="content">
{{ item.manufactureDate ? item.manufactureDate : '-' }}
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="blueCard">
<div>
<div class="title">生产企业</div>
<div class="content">
{{
item.manufacturingEnterprise
? item.manufacturingEnterprise
: '-'
}}
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="tip-navigation">
<div class="tip"></div>
<div class="tip-title">
{{ '零部件样品信息 (' + taskForm.partVehicleSample.length + ')' }}
</div>
</div>
<div style="display: flex; flex-wrap: wrap">
<div
v-for="(item, index) in taskForm.partVehicleSample"
:key="index"
class="sampleCard"
>
<div class="sampleHeader">
<div class="avater">
<image-preview
width="62px"
height="62px"
:src="item.trademark"
></image-preview>
</div>
<div class="title">
<div class="top">{{ item.sampleNumber }}</div>
<div class="bottom">{{ item.sampleName }}</div>
</div>
</div>
<div style="margin-left: 4.8rem">
<div v-if="item.samplePhotos">
<image-preview
width="32px"
height="32px"
:src="item.samplePhotos"
></image-preview>
</div>
<div v-else>暂无样品照片</div>
</div>
<el-divider></el-divider>
<el-row :gutter="20" style="margin-bottom: 20px">
<el-col :span="8">
<div class="greenCard">
<div>
<div class="title">样品数量</div>
<div class="content">
{{ item.numberOfSamples ? item.numberOfSamples : '-' }}
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="yellowCard">
<div>
<div class="title">送样日期</div>
<div class="content">
{{ item.deliveryDate ? item.deliveryDate : '-' }}
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="blueCard">
<div>
<div class="title">送样者</div>
<div class="content">
{{ item.sampleSender ? item.sampleSender : '-' }}
</div>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<div class="yellowCard">
<div>
<div class="title">生产日期</div>
<div class="content">
{{ item.manufactureDate ? item.manufactureDate : '-' }}
</div>
</div>
</div>
</el-col>
<el-col :span="16">
<div class="blueCard">
<div>
<div class="title">生产企业</div>
<div class="content">
{{
item.manufacturingEnterprise
? item.manufacturingEnterprise
: '-'
}}
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-tab-pane>
</el-tabs>
......@@ -419,16 +764,60 @@
</page-standard>
</template>
<script>
import { selectDataStatistics, selectTaskInfo } from '@/api/system/sample'
import dict from '@/utils/dict'
export default {
dicts: ['system_task_status', 'confidentiality_level'],
data() {
return {
taskList: [],
taskId: '',
taskForm: {},
dataStatistic: {
systemDetailsPass: 0
},
activeName: 'dataStatistics'
}
},
created() {
this.taskId = this.$route.query.taskId
this.getTaskInfo()
this.getDataStatistics()
},
methods: {
dict,
getDataStatistics() {
selectDataStatistics({ id: this.taskId }).then(res => {
this.dataStatistic = res.data
console.log('数据统计', res)
})
},
getTaskInfo() {
selectTaskInfo({ id: this.taskId }).then(res => {
this.taskForm = res.data
if (res.data.taskList) {
this.taskList = this.taskForm.taskList.split(',')
}
console.log('任务详情', res)
})
},
tabClick() {},
formatTest(percentage) {
return (percentage = `测试通过率\n\n ${percentage}%`)
},
format(percentage) {
return (percentage = `审查通过率\n\n ${percentage}%`)
},
progressLine(percentage) {
return (percentage = `${percentage}`)
},
percentageChange(data) {
if (data) {
return data
} else {
return 0
}
}
}
}
......@@ -442,11 +831,13 @@ export default {
padding: 25px 25px 0 25px;
margin-bottom: 40px;
.card-title {
display: flex;
font-size: 14px;
font-weight: 700;
color: #606266;
}
.card-contnet {
display: flex;
font-size: 14px;
font-weight: 400;
color: #606266;
......@@ -462,6 +853,8 @@ export default {
margin-bottom: 16px;
}
.header-state {
display: flex;
justify-content: center;
font-size: 16px;
font-weight: 400;
color: #13be24;
......@@ -503,6 +896,100 @@ export default {
color: #606266;
margin-bottom: 20px;
}
.sampleCard {
width: 30%;
margin-bottom: 20px;
margin-right: 40px;
padding: 25px;
background: #ffffff;
border: 1px solid #ebebeb;
border-radius: 4px;
.sampleHeader {
display: flex;
.avater {
margin-right: 14px;
}
.title {
height: 62px;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
font-size: 16px;
font-weight: 700;
color: #303133;
}
.bottom {
font-size: 14px;
font-weight: 400;
color: #606266;
}
}
}
.greenCard {
display: flex;
justify-content: center;
align-items: center;
height: 70px;
background: rgba(19, 190, 36, 0.1);
border-radius: 8px;
.title {
text-align: center;
font-size: 14px;
font-weight: 400;
color: #303133;
margin-bottom: 10px;
}
.content {
font-size: 14px;
font-weight: 700;
color: #13be24;
text-align: center;
}
}
.yellowCard {
display: flex;
justify-content: center;
align-items: center;
height: 70px;
background: rgba(249, 171, 56, 0.1);
border-radius: 8px;
.title {
text-align: center;
font-size: 14px;
font-weight: 400;
color: #303133;
margin-bottom: 10px;
}
.content {
font-size: 14px;
font-weight: 700;
color: #f9ab38;
text-align: center;
}
}
.blueCard {
display: flex;
justify-content: center;
align-items: center;
height: 70px;
background: rgba(26, 111, 215, 0.1);
border-radius: 8px;
.title {
font-size: 14px;
font-weight: 400;
color: #303133;
margin-bottom: 10px;
text-align: center;
}
.content {
font-size: 14px;
font-weight: 700;
color: #1a6fd7;
text-align: center;
}
}
}
::v-deep .el-progress__text {
white-space: pre;
}
......
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