This commit is contained in:
qianhao.xu
2023-11-30 18:45:29 +08:00
parent c42f5256e0
commit 4a32635b07
8 changed files with 261 additions and 3 deletions

View File

@@ -0,0 +1,245 @@
<template>
<div class="app-container">
<div class="animate__animated animate__shakeX title">车镜油漆缺陷采集系统</div>
<el-row>
<el-col :span="1">
<div style="height: 225px">
<div class="title_Line">抛光</div>
<div class="title_Line">打磨</div>
<div class="title_Line">报废</div>
</div>
<div style="height: 250px">
<div class="title_Line">抛光</div>
<div class="title_Line">打磨</div>
<div class="title_Line">报废</div>
</div>
</el-col>
<el-col :span="23">
<div>
<div class="grid">
<div class="a">
<div class="title_sub">{{ checkItemTable.paint[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.paint" :key="index">{{ item.inspectionName }}</div>
</div>
</div>
<div class="b">
<div class="title_sub">{{ checkItemTable.device[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.device" :key="index">{{ item.inspectionName }}</div>
</div>
</div>
<div class="c">
<div class="title_sub">{{ checkItemTable.blank[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.blank" :key="index">{{ item.inspectionName }}</div>
</div>
</div>
<div class="d">
<div class="title_sub">{{ checkItemTable.program[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.program" :key="index">{{ item.inspectionName }}</div>
</div>
</div>
<div class="e">
<div class="title_sub">{{ checkItemTable.team[0].inspectionModule }}</div>
<div class="grid_sub">
<div class="a_11" v-for="(item, index) of checkItemTable.team" :key="index">{{ item.inspectionName }}</div>
</div>
</div>
<div class="f">
<div class="f_item">
<div class="f_name">产品名称</div>
<div></div>
</div>
<div class="f_item">
<div class="f_name">左右:</div>
<div></div>
</div>
<div class="f_item">
<div class="f_name">颜色:</div>
<div></div>
</div>
<div class="f_item">
<div class="f_name">班组:</div>
<div></div>
</div>
<div class="f_item">
<div class="f_name">投入数:</div>
<div></div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import { GetcheckItemTable } from '@/api/qualityManagement/firstFQC.js'
export default {
name: 'firstFQC',
data() {
return {
checkItemTable: {
paint: [],
device: [],
blank: [], // 毛坯
program: [], // 程序
team: [], //班组
},
ProductSituationForm: {
name: '',
},
}
},
mounted() {
this.getCheckItemList()
},
methods: {
//todo 获取检测项
getCheckItemList() {
GetcheckItemTable()
.then((result) => {
if (result.code == 200) {
this.checkItemTable = result.data
}
})
.catch((err) => {})
},
},
}
</script>
<style lang="scss" scoped>
.title {
font-family: Arial, sans-serif;
font-size: 30px;
color: #303133;
line-height: 1.5;
text-align: center;
}
.grid {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0.5em;
.a {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.b {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.c {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.d {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.e {
.title_sub {
font-family: Arial, sans-serif;
font-size: 1.5rem;
color: #303133;
text-align: center;
}
.grid_sub {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
}
.f {
}
}
.grid > * {
height: 250px;
background-color: #EBEEF5;
color: white;
border-radius: 0.5em;
}
.grid_sub > * {
height: 60px;
background-color: #53a8ff;
color: white;
border-radius: 0.2em;
transition: all 0.2s ease-in-out;
&:hover {
cursor: pointer;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 #c6e2ff, inset 18px 18px 30px rgba(0, 0, 0, 0.1),
inset -18px -18px 30px #c6e2ff;
}
}
.title_Line {
color: #409eff;
font-family: Arial, sans-serif;
font-size: 1.5rem;
text-align: center;
margin-top: 40px;
}
.f_item {
margin-top: 10px;
margin-left: 20px;
}
.f_name {
color: #dd7118;
font-family: Arial, sans-serif;
font-size: 1.2rem;
}
</style>

View File

@@ -31,6 +31,7 @@
<vxe-column field="inspectionModule" title="检测模块"></vxe-column>
<vxe-column field="inspectionType" title="检测类型"></vxe-column>
</vxe-table>
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</div>
</template>