<template>
|
<div class="content-main">
|
<div class="top-bar">
|
<el-form ref="form" :inline="true" :model="searchData">
|
<el-form-item label="设备名称:" class="sermargin">
|
<el-select v-model="searchData.devicename" placeholder="全部" style="width: 100px;">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="检验时间:" class="sermargin">
|
<el-date-picker
|
v-model="searchData.time"
|
type="daterange"
|
range-separator="~"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="检验人:" style="margin-right: 20px;">
|
<el-select v-model="searchData.person" placeholder="全部" style="width: 80px;margin-right: 100px;">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" plain style="margin-right: 10px;">重置</el-button>
|
<el-button type="primary">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="table-box">
|
<div class="formwrapper">
|
<el-table
|
ref="planTable"
|
:max-height="800"
|
:cell-style="{textAlign: 'center'}"
|
:header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
|
:data="planTable"
|
style="width: 100%"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
min-width="10%"
|
/>
|
<el-table-column
|
prop="device"
|
label="检验设备"
|
min-width="8%"
|
/>
|
<el-table-column
|
prop="samplename"
|
label="样品名称"
|
min-width="8%"
|
/>
|
<el-table-column
|
prop="sampleid"
|
label="样品编号"
|
min-width="10%"
|
/>
|
<el-table-column
|
prop="modelandspecification"
|
label="规格型号"
|
min-width="12%"
|
/>
|
<el-table-column
|
prop="unit"
|
label="单位"
|
min-width="5%"
|
/>
|
<el-table-column
|
prop="amount"
|
label="数量"
|
min-width="5%"
|
/>
|
<el-table-column
|
prop="checkproject"
|
label="检验项目"
|
min-width="12%"
|
/>
|
<el-table-column
|
prop="checker"
|
label="检验人"
|
min-width="6%"
|
/>
|
<el-table-column
|
prop="duration"
|
label="计划工期/h"
|
min-width="8%"
|
/>
|
<el-table-column
|
prop="progress"
|
label="检验进度"
|
min-width="12%">
|
<template slot-scope="scope">
|
<div v-if="scope.row.progress === 100" style="display: flex;">
|
<el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.progress" status="success" style="width: 70%;"></el-progress>
|
<span style="color: rgb(103, 194, 58);">已完成</span>
|
</div>
|
<div v-if="scope.row.progress <100 && scope.row.progress >0" style="display: flex;">
|
<el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.progress" status="warning" style="width: 70%;"></el-progress>
|
<span style="color: rgb(230, 162, 60);">检验中</span>
|
</div>
|
<div v-if="scope.row.progress === 0" style="display: flex;">
|
<el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.progress" style="width: 70%;"></el-progress>
|
<span style="color: gray">未分配</span>
|
</div>
|
<div v-else>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="starttime"
|
label="计划开始时间"
|
min-width="10%"
|
/>
|
<el-table-column
|
prop="finishtime"
|
label="计划结束时间"
|
min-width="10%"
|
/>
|
<el-table-column
|
label="操作"
|
min-width="8%"
|
>
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
searchData: {
|
devicename: "",
|
time: "",
|
person: "",
|
},
|
options: [
|
{
|
value: "选项1",
|
label: "选项1",
|
},
|
{
|
value: "选项2",
|
label: "选项2",
|
disabled: true,
|
},
|
],
|
planTable: [{
|
device: '拉力机',
|
samplename: '镀锌钢绞线',
|
sampleid: 'SN1027401-12937',
|
modelandspecification: 'JLHA/G1A-185/30-14/7',
|
unit: 'm',
|
amount: '200',
|
checkproject: '抗压强度（绞前）',
|
checker: '黄小明',
|
duration: '2',
|
progress: 100,
|
starttime: '2023-08-04 8:00',
|
finishtime: '2023-08-04 10:00',
|
},{
|
device: '拉力机',
|
samplename: '镀锌钢绞线',
|
sampleid: 'SN1027401-12937',
|
modelandspecification: 'JLHA/G1A-185/30-14/7',
|
unit: 'm',
|
amount: '200',
|
checkproject: '抗压强度（绞前）',
|
checker: '黄小明',
|
duration: '2',
|
progress: 60,
|
starttime: '2023-08-04 8:00',
|
finishtime: '2023-08-04 10:00',
|
},{
|
device: '拉力机',
|
samplename: '镀锌钢绞线',
|
sampleid: 'SN1027401-12937',
|
modelandspecification: 'JLHA/G1A-185/30-14/7',
|
unit: 'm',
|
amount: '200',
|
checkproject: '抗压强度（绞前）',
|
checker: '黄小明',
|
duration: '2',
|
progress: 30,
|
starttime: '2023-08-04 8:00',
|
finishtime: '2023-08-04 10:00',
|
},{
|
device: '拉力机',
|
samplename: '镀锌钢绞线',
|
sampleid: 'SN1027401-12937',
|
modelandspecification: 'JLHA/G1A-185/30-14/7',
|
unit: 'm',
|
amount: '200',
|
checkproject: '抗压强度（绞前）',
|
checker: '黄小明',
|
duration: '2',
|
progress: 0,
|
starttime: '2023-08-04 8:00',
|
finishtime: '2023-08-04 10:00',
|
}]
|
};
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.content-main {
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
}
|
.top-bar {
|
margin: -25px -15px;
|
background: #fff;
|
display: flex;
|
justify-content: space-between;
|
padding: 5px 24px 0px 24px;
|
.sermargin {
|
margin-right: 60px;
|
}
|
}
|
.table-box{
|
background-color: #fff;
|
margin: 0px -15px;
|
margin-top: 35px;
|
display: flex;
|
flex-direction: column;
|
height: 78vh;
|
.formwrapper{
|
padding: 0px 20px;
|
margin-top: 0px;
|
flex: 1;
|
background: #fff;
|
/* padding: 20px 20px 10px 20px; */
|
display: flex;
|
flex-direction: column;
|
.el-table {
|
flex: 1;
|
}
|
}
|
}
|
</style>
|
