1.3
This commit is contained in:
30
src/views/qualityManagement/components/TableTags.vue
Normal file
30
src/views/qualityManagement/components/TableTags.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tag size="medium">{{ showTotal }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'TableTags',
|
||||
data() {
|
||||
return {
|
||||
showTotal: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.injectData)
|
||||
console.log(this.injectData.prop)
|
||||
if (this.injectData.prop === 'ct1') {
|
||||
this.showTotal = this.injectData.ct1
|
||||
} else if (this.injectData.prop === 'ct2') {
|
||||
this.showTotal = this.injectData.ct2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div
|
||||
id="defectScatterPlotChart"
|
||||
style="width: 100%"
|
||||
:style="{ height: chartHeight + 'px' }"
|
||||
/>
|
||||
<span class="text1">文本框11111</span>
|
||||
<span class="text2">文本框222222232323232322</span>
|
||||
<span class="text3">文本框33333</span>
|
||||
<span class="text4">文本框44444</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import resize from '@/utils/chartMixins/resize'
|
||||
export default {
|
||||
name: 'DefectScatterPlotChart',
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: tableHeight(480)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.chartDom = document.getElementById('defectScatterPlotChart')
|
||||
this.chart = echarts.init(this.chartDom)
|
||||
this.getChart()
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartHeight = tableHeight(480)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getChart() {
|
||||
const dataS = [
|
||||
[1, 55, 9, 56, 0.46, 18, 6, '良'],
|
||||
[2, 25, 11, 21, 0.65, 34, 9, '优'],
|
||||
[3, 56, 7, 63, 0.3, 14, 5, '良'],
|
||||
[4, 33, 7, 29, 0.33, 16, 6, '优'],
|
||||
[5, 42, 24, 44, 0.76, 40, 16, '优'],
|
||||
[6, 82, 58, 90, 1.77, 68, 33, '良'],
|
||||
[7, 74, 49, 77, 1.46, 48, 27, '良'],
|
||||
[8, 78, 55, 80, 1.29, 59, 29, '良'],
|
||||
[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
|
||||
[10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
|
||||
[11, 39, 19, 38, 0.57, 31, 15, '优'],
|
||||
[12, 41, 11, 40, 0.43, 21, 7, '优'],
|
||||
[13, 64, 38, 74, 1.04, 46, 22, '良'],
|
||||
[14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
|
||||
[15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
|
||||
[16, 33, 6, 29, 0.34, 13, 5, '优'],
|
||||
[17, 94, 66, 110, 1.54, 62, 31, '良'],
|
||||
[18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
|
||||
[19, 57, 31, 54, 0.96, 32, 14, '良'],
|
||||
[20, 22, 8, 17, 0.48, 23, 10, '优'],
|
||||
[21, 39, 15, 36, 0.61, 29, 13, '优'],
|
||||
[22, 94, 69, 114, 2.08, 73, 39, '良'],
|
||||
[23, 99, 73, 110, 2.43, 76, 48, '良'],
|
||||
[24, 31, 12, 30, 0.5, 32, 16, '优'],
|
||||
[25, 42, 27, 43, 1, 53, 22, '优'],
|
||||
[26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
|
||||
[27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
|
||||
[28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
|
||||
[29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
|
||||
[30, 52, 24, 60, 1.03, 50, 21, '良'],
|
||||
[31, 46, 5, 49, 0.28, 10, 6, '优']
|
||||
]
|
||||
const dataM = [
|
||||
[1, 26, 37, 27, 1.163, 27, 13, '优'],
|
||||
[2, 85, 62, 71, 1.195, 60, 8, '良'],
|
||||
[3, 78, 38, 74, 1.363, 37, 7, '良'],
|
||||
[4, 21, 21, 36, 0.634, 40, 9, '优'],
|
||||
[5, 41, 42, 46, 0.915, 81, 13, '优'],
|
||||
[6, 56, 52, 69, 1.067, 92, 16, '良'],
|
||||
[7, 64, 30, 28, 0.924, 51, 2, '良'],
|
||||
[8, 55, 48, 74, 1.236, 75, 26, '良'],
|
||||
[9, 76, 85, 113, 1.237, 114, 27, '良'],
|
||||
[10, 91, 81, 104, 1.041, 56, 40, '良'],
|
||||
[11, 84, 39, 60, 0.964, 25, 11, '良'],
|
||||
[12, 64, 51, 101, 0.862, 58, 23, '良'],
|
||||
[13, 70, 69, 120, 1.198, 65, 36, '良'],
|
||||
[14, 77, 105, 178, 2.549, 64, 16, '良'],
|
||||
[15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
|
||||
[16, 73, 68, 97, 0.905, 51, 34, '良'],
|
||||
[17, 54, 27, 47, 0.592, 53, 12, '良'],
|
||||
[18, 51, 61, 97, 0.811, 65, 19, '良'],
|
||||
[19, 91, 71, 121, 1.374, 43, 18, '良'],
|
||||
[20, 73, 102, 182, 2.787, 44, 19, '良'],
|
||||
[21, 73, 50, 76, 0.717, 31, 20, '良'],
|
||||
[22, 84, 94, 140, 2.238, 68, 18, '良'],
|
||||
[23, 93, 77, 104, 1.165, 53, 7, '良'],
|
||||
[24, 99, 130, 227, 3.97, 55, 15, '良'],
|
||||
[25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
|
||||
[26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
|
||||
[27, 81, 48, 62, 1.619, 26, 3, '良'],
|
||||
[28, 56, 48, 68, 1.336, 37, 9, '良'],
|
||||
[29, 82, 92, 174, 3.29, 0, 13, '良'],
|
||||
[30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
|
||||
[31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
|
||||
]
|
||||
const dataL = [
|
||||
[1, 91, 45, 125, 0.82, 34, 23, '良'],
|
||||
[2, 65, 27, 78, 0.86, 45, 29, '良'],
|
||||
[3, 83, 60, 84, 1.09, 73, 27, '良'],
|
||||
[4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
|
||||
[5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
|
||||
[6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
|
||||
[7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
|
||||
[8, 89, 65, 78, 0.86, 51, 26, '良'],
|
||||
[9, 53, 33, 47, 0.64, 50, 17, '良'],
|
||||
[10, 80, 55, 80, 1.01, 75, 24, '良'],
|
||||
[11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
|
||||
[12, 99, 71, 142, 1.1, 62, 42, '良'],
|
||||
[13, 95, 69, 130, 1.28, 74, 50, '良'],
|
||||
[14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
|
||||
[15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
|
||||
[16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
|
||||
[17, 79, 43, 107, 1.05, 59, 37, '良'],
|
||||
[18, 71, 46, 89, 0.86, 64, 25, '良'],
|
||||
[19, 97, 71, 113, 1.17, 88, 31, '良'],
|
||||
[20, 84, 57, 91, 0.85, 55, 31, '良'],
|
||||
[21, 87, 63, 101, 0.9, 56, 41, '良'],
|
||||
[22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
|
||||
[23, 87, 62, 100, 1, 72, 28, '良'],
|
||||
[24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
|
||||
[25, 65, 45, 51, 0.74, 39, 17, '良'],
|
||||
[26, 39, 24, 38, 0.61, 47, 17, '优'],
|
||||
[27, 39, 24, 39, 0.59, 50, 19, '优'],
|
||||
[28, 93, 68, 96, 1.05, 79, 29, '良'],
|
||||
[29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
|
||||
[30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
|
||||
[31, 187, 143, 201, 1.39, 89, 53, '中度污染']
|
||||
]
|
||||
var option = {
|
||||
color: ['#dd4444', '#fec42c', '#80F1BE'],
|
||||
legend: {
|
||||
top: 10,
|
||||
left: 0,
|
||||
data: ['S', 'M', 'L'],
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
nameGap: 16,
|
||||
nameTextStyle: {
|
||||
fontSize: 16
|
||||
},
|
||||
max: 31,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.15)'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
nameLocation: 'end',
|
||||
nameGap: 20,
|
||||
nameTextStyle: {
|
||||
fontSize: 16
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.15)'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'S',
|
||||
type: 'scatter',
|
||||
data: dataS
|
||||
},
|
||||
{
|
||||
name: 'M',
|
||||
type: 'scatter',
|
||||
data: dataM
|
||||
},
|
||||
{
|
||||
name: 'L',
|
||||
type: 'scatter',
|
||||
data: dataL
|
||||
}
|
||||
]
|
||||
}
|
||||
option && this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
position: relative;
|
||||
.text1,
|
||||
.text2,
|
||||
.text3,
|
||||
.text4 {
|
||||
position: absolute;
|
||||
}
|
||||
.text1 {
|
||||
top: 30px;
|
||||
left: 0;
|
||||
}
|
||||
.text2 {
|
||||
top: 30px;
|
||||
right: 0;
|
||||
}
|
||||
.text3 {
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
}
|
||||
.text4 {
|
||||
bottom: 10px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<el-row :gutter="4">
|
||||
<el-col :span="6">
|
||||
<div class="title">颗粒数据</div>
|
||||
<ul class="dataTab">
|
||||
<li v-for="(item, index) in a" :key="index">
|
||||
<p class="tabHead">{{ item.name }}</p>
|
||||
<p class="tabValue">{{ item.value }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="title">面检数据</div>
|
||||
<ul class="dataTab">
|
||||
<li v-for="(item, index) in b" :key="index">
|
||||
<p class="tabHead">{{ item.name }}</p>
|
||||
<p class="tabValue">{{ item.value }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefectScatterPlot',
|
||||
data() {
|
||||
return {
|
||||
a: [
|
||||
{ name: 'S', value: 65323 },
|
||||
{ name: 'M', value: 65323 },
|
||||
{ name: 'L', value: 65323 },
|
||||
{ name: 'XL', value: 65323 }
|
||||
],
|
||||
b: [
|
||||
{ name: '气泡', value: 65323 },
|
||||
{ name: '变形', value: 65323 },
|
||||
{ name: '纤维', value: 65323 },
|
||||
{ name: '划伤', value: 65323 },
|
||||
{ name: '点状缺陷', value: 65323 },
|
||||
{ name: '结石', value: 65323 },
|
||||
{ name: '铂金', value: 65323 },
|
||||
{ name: '结节', value: 65323 },
|
||||
{ name: '拖尾', value: 65323 },
|
||||
{ name: 'ADG', value: 65323 },
|
||||
{ name: '锡缺陷(顶部)', value: 65323 },
|
||||
{ name: '锡缺陷(底部)', value: 65323 },
|
||||
{ name: '无法识别', value: 65323 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
height: 27px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
padding-left: 16px;
|
||||
padding-top: 3px;
|
||||
margin-top: 5px;
|
||||
background-color: #fafafa;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
.dataTab {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
li {
|
||||
width: 25%;
|
||||
font-size: 14px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
p {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.tabHead {
|
||||
height: 30px;
|
||||
background: #e9ebf0;
|
||||
}
|
||||
.tabHead,
|
||||
.tabValue {
|
||||
padding-left: 16px;
|
||||
padding-top: 7px;
|
||||
}
|
||||
.tabValue {
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
665
src/views/qualityManagement/components/finalDataTable.vue
Normal file
665
src/views/qualityManagement/components/finalDataTable.vue
Normal file
@@ -0,0 +1,665 @@
|
||||
<template>
|
||||
<div class="finalDataTable">
|
||||
<base-table :table-props="tablePropsT" :table-data="tableDataT" />
|
||||
<base-table :table-props="tablePropsB" :table-data="tableDataB" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const tablePropsT = [
|
||||
{
|
||||
label: '尺寸',
|
||||
children: [
|
||||
{
|
||||
prop: 'name1',
|
||||
label: '面检缺陷',
|
||||
width: 110
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class1',
|
||||
children: [
|
||||
{
|
||||
prop: 'class1',
|
||||
label: '<10*25',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class2',
|
||||
children: [
|
||||
{
|
||||
prop: 'class2',
|
||||
label: '<10*25',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class3',
|
||||
children: [
|
||||
{
|
||||
prop: 'class3',
|
||||
label: '<10*25',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class4',
|
||||
children: [
|
||||
{
|
||||
prop: 'class4',
|
||||
label: '<10*25',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class5',
|
||||
children: [
|
||||
{
|
||||
prop: 'class5',
|
||||
label: '<10*25',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class6',
|
||||
children: [
|
||||
{
|
||||
prop: 'class6',
|
||||
label: '<10*25',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class7',
|
||||
children: [
|
||||
{
|
||||
prop: 'class7',
|
||||
label: '<10*25',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class8',
|
||||
children: [
|
||||
{
|
||||
prop: 'class8',
|
||||
label: '<10*25',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class9',
|
||||
children: [
|
||||
{
|
||||
prop: 'class9',
|
||||
label: '<10*25',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class10',
|
||||
children: [
|
||||
{
|
||||
prop: 'class10',
|
||||
label: '<10*25',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'total',
|
||||
label: '总数',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
const tablePropsB = [
|
||||
{
|
||||
label: '尺寸',
|
||||
children: [
|
||||
{
|
||||
prop: 'name1',
|
||||
label: '面检缺陷',
|
||||
width: 110
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class1',
|
||||
children: [
|
||||
{
|
||||
prop: 'class1',
|
||||
label: '100-200',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class2',
|
||||
children: [
|
||||
{
|
||||
prop: 'class2',
|
||||
label: '200-500',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class3',
|
||||
children: [
|
||||
{
|
||||
prop: 'class3',
|
||||
label: '300-800',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class4',
|
||||
children: [
|
||||
{
|
||||
prop: 'class4',
|
||||
label: '500-1000',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class5',
|
||||
children: [
|
||||
{
|
||||
prop: 'class5',
|
||||
label: '1000-2000',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class6',
|
||||
children: [
|
||||
{
|
||||
prop: 'class6',
|
||||
label: '<1000-30000',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class7',
|
||||
children: [
|
||||
{
|
||||
prop: 'class7',
|
||||
label: '1000-5000',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class8',
|
||||
children: [
|
||||
{
|
||||
prop: 'class8',
|
||||
label: '1000-8000',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class9',
|
||||
children: [
|
||||
{
|
||||
prop: 'class9',
|
||||
label: '1000-10000',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'class10',
|
||||
children: [
|
||||
{
|
||||
prop: 'class10',
|
||||
label: '1000-10000',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'total',
|
||||
label: '总数',
|
||||
minWidth: 70
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'FinalDataTable',
|
||||
data() {
|
||||
return {
|
||||
tablePropsT,
|
||||
tableDataT: [],
|
||||
tablePropsB,
|
||||
tableDataB: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
;(this.tableDataT = [
|
||||
{
|
||||
name1: 'BL',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Distortion',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Fiber',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'IIS rest',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Knot',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'PT',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Scratch',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Stone',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Tail',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Tin',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Tin(Bottom)',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Tin(Top)',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: '面检sum',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
}
|
||||
]),
|
||||
(this.tableDataB = [
|
||||
{
|
||||
name1: 'BL',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Distortion',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Fiber',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'IIS rest',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Knot',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'PT',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Scratch',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Stone',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Tail',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Tin',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Tin(Bottom)',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: 'Tin(Top)',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
},
|
||||
{
|
||||
name1: '面检sum',
|
||||
class1: 0,
|
||||
class2: 2,
|
||||
class3: 54,
|
||||
class4: 0,
|
||||
class5: 0,
|
||||
class6: 0,
|
||||
class7: 7,
|
||||
class8: 0,
|
||||
class9: 0,
|
||||
class10: 0,
|
||||
total: 20
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.finalDataTable {
|
||||
.el-table thead.is-group tr:first-of-type th:first-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
.el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
|
||||
text-align: right;
|
||||
}
|
||||
.el-table th.el-table__cell {
|
||||
height: 28px;
|
||||
}
|
||||
.el-table thead.is-group tr:first-of-type th:first-of-type:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 35px;
|
||||
top: 0;
|
||||
left: 48px;
|
||||
background-color: #ebeef5;
|
||||
transform: rotate(-35deg);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
width: 1px;
|
||||
}
|
||||
.el-table thead.is-group tr:last-of-type th:first-of-type:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 35px;
|
||||
top: 0;
|
||||
left: 68px;
|
||||
background-color: #ebeef5;
|
||||
transform: rotate(-35deg);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
196
src/views/qualityManagement/components/processFlowDetail.vue
Normal file
196
src/views/qualityManagement/components/processFlowDetail.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<el-drawer title="工艺流程" :visible.sync="visible" size="70%">
|
||||
<div class="box">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="1000"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="180"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<el-drawer
|
||||
title="工艺参数"
|
||||
:append-to-body="true"
|
||||
:visible.sync="processParametersVisible"
|
||||
size="50%"
|
||||
>
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="1000"
|
||||
:table-props="tablePropsP"
|
||||
:table-data="tableDataP"
|
||||
:max-height="tableH"
|
||||
/>
|
||||
</el-drawer>
|
||||
<el-drawer
|
||||
title="设备参数"
|
||||
:append-to-body="true"
|
||||
:visible.sync="deviceParametersVisible"
|
||||
size="50%"
|
||||
>
|
||||
<div class="box">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="1000"
|
||||
:table-props="tablePropsD"
|
||||
:table-data="tableDataD"
|
||||
:max-height="tableH"
|
||||
/>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import { tableHeight } from '@/utils/index'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'processName',
|
||||
label: '工序名称',
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
prop: 'deviceName',
|
||||
label: '设备名称',
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
prop: 'glassId',
|
||||
label: '玻璃ID',
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'deviceLaunchTime',
|
||||
label: '设备上片时间',
|
||||
minWidth: 160
|
||||
},
|
||||
{
|
||||
prop: 'deviceUnloadingTime',
|
||||
label: '设备下片时间',
|
||||
minWidth: 160
|
||||
},
|
||||
{
|
||||
prop: 'grindingTrayId',
|
||||
label: '面磨托盘ID',
|
||||
minWidth: 150
|
||||
}
|
||||
]
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'processParameters',
|
||||
btnName: '工艺参数'
|
||||
},
|
||||
{
|
||||
type: 'deviceParameters',
|
||||
btnName: '设备参数'
|
||||
}
|
||||
]
|
||||
const tablePropsP = [
|
||||
{
|
||||
prop: 'process',
|
||||
label: '工艺'
|
||||
},
|
||||
{
|
||||
prop: 'currentValue',
|
||||
label: '当前值'
|
||||
}
|
||||
]
|
||||
const tablePropsD = [
|
||||
{
|
||||
prop: 'device',
|
||||
label: '设备'
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '状态'
|
||||
},
|
||||
{
|
||||
prop: 'changeTime',
|
||||
label: '变更时间'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'processFlowDetail',
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableBtn,
|
||||
tableH: tableHeight(115),
|
||||
processParametersVisible: false,
|
||||
deviceParametersVisible: false,
|
||||
tablePropsP,
|
||||
tablePropsD,
|
||||
tableDataP: [
|
||||
{ process: 'X切刀工作时的高度', currentValue: '20' },
|
||||
{ process: 'X方向划线速度', currentValue: '6' }
|
||||
],
|
||||
tableDataD: [
|
||||
{
|
||||
device: '面研磨上片工位_取纸机器人',
|
||||
status: '生产',
|
||||
changeTime: '2022-04-02 00:00:00 000'
|
||||
},
|
||||
{
|
||||
device: '面研磨上片工位_取纸机器人',
|
||||
status: '生产',
|
||||
changeTime: '2022-04-02 00:00:00 000'
|
||||
},
|
||||
{
|
||||
device: '面研磨上片工位_取纸机器人',
|
||||
status: '生产',
|
||||
changeTime: '2022-04-02 00:00:00 000'
|
||||
},
|
||||
{
|
||||
device: '面研磨上片工位_取纸机器人',
|
||||
status: '待料',
|
||||
changeTime: '2022-04-02 00:00:00 000'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.visible = true
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = tableHeight(115)
|
||||
})
|
||||
for (let i = 0; i < 30; i++) {
|
||||
let obj = {}
|
||||
obj.processName = '1'
|
||||
obj.deviceName = '设备名称' + i
|
||||
obj.glassId = '玻璃ID' + i
|
||||
obj.deviceLaunchTime = '2022-08-22 08:12:15'
|
||||
obj.deviceUnloadingTime = '2022-08-22 08:12:15'
|
||||
obj.grindingTrayId = '面磨托盘ID' + i
|
||||
this.tableData.push(obj)
|
||||
}
|
||||
},
|
||||
handleClick(val) {
|
||||
console.log(val)
|
||||
if (val.type === 'processParameters') {
|
||||
this.processParametersVisible = true
|
||||
} else if (val.type === 'deviceParameters') {
|
||||
this.deviceParametersVisible = true
|
||||
}
|
||||
},
|
||||
handleCloseProcess() {},
|
||||
handleCloseDevice() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
padding: 0 32px;
|
||||
}
|
||||
</style>
|
||||
277
src/views/qualityManagement/components/samplingAdd.vue
Normal file
277
src/views/qualityManagement/components/samplingAdd.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
title="抽检录入"
|
||||
:visible.sync="visible"
|
||||
size="70%"
|
||||
class="samplingAdd"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
:model="form"
|
||||
class="form-box"
|
||||
>
|
||||
<el-row :gutter="20" class="first-line">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="抽检人" prop="detector">
|
||||
<el-input v-model="form.detector"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="玻璃ID" prop="glassId">
|
||||
<el-input v-model="form.glassId"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="抽检时间" prop="detectTime">
|
||||
<el-date-picker
|
||||
v-model="form.detectTime"
|
||||
type="datetime"
|
||||
placeholder="选择抽检时间"
|
||||
value-format="yyyy-MM-DDTHH:mm:ss"
|
||||
style="width: 100%"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div style="display: inline-block; margin-right: 10px">
|
||||
<el-form-item label="型号" prop="model">
|
||||
<el-radio-group v-model="form.model" @change="selectStandard">
|
||||
<el-radio-button
|
||||
v-for="item in productModelVoList"
|
||||
:key="item.dataCode"
|
||||
:label="item.dataName"
|
||||
>{{ item.dataName }}</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="display: inline-block">
|
||||
<el-form-item label="检验项目" prop="detectItem">
|
||||
<el-select
|
||||
v-model="form.detectItem"
|
||||
placeholder="检验项目"
|
||||
style="width: 100%"
|
||||
@change="selectItem"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in testItemList"
|
||||
:key="item.dataCode"
|
||||
:label="item.dataName"
|
||||
:value="item.dataName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" style="margin-bottom: 20px">
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
highlight-current-row
|
||||
@emitFun="inputChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="bottom">
|
||||
<el-col :span="24" style="text-align: right">
|
||||
<el-form-item>
|
||||
<el-button @click="closeForm">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import inputArea from '@/components/BaseTable/subcomponents/InputArea'
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import { getProcessDetectList, detectInput } from '@/api/qualityManagement'
|
||||
import moment from 'moment'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'detectItem',
|
||||
label: '检验项目'
|
||||
},
|
||||
{
|
||||
prop: 'detectPoint',
|
||||
label: '检测点'
|
||||
},
|
||||
{
|
||||
prop: 'detectStandard',
|
||||
label: '检验标准'
|
||||
},
|
||||
{
|
||||
prop: 'value',
|
||||
label: '实测值',
|
||||
subcomponent: inputArea
|
||||
},
|
||||
{
|
||||
prop: 'result',
|
||||
label: '抽检结果',
|
||||
subcomponent: inputArea
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '备注',
|
||||
subcomponent: inputArea
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'SamplingAdd',
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
form: {
|
||||
model: '',
|
||||
detectItem: '',
|
||||
detector: '',
|
||||
glassId: '',
|
||||
detectTime: ''
|
||||
},
|
||||
testItemList: JSON.parse(localStorage.getItem('publicList'))
|
||||
.checkItemVoList,
|
||||
productModelVoList: JSON.parse(localStorage.getItem('publicList'))
|
||||
.productModelVoList,
|
||||
rules: {
|
||||
model: [{ required: true, message: '请输入选择型号', trigger: 'blur' }],
|
||||
detectItem: [
|
||||
{ required: true, message: '请选择检验项目', trigger: 'change' }
|
||||
],
|
||||
detector: [
|
||||
{ required: true, message: '请输入抽检人', trigger: 'blur' }
|
||||
],
|
||||
glassId: [
|
||||
{ required: true, message: '请选择玻璃ID', trigger: 'change' }
|
||||
],
|
||||
detectTime: [
|
||||
{ required: true, message: '请选择抽检时间', trigger: 'change' }
|
||||
]
|
||||
},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableH: tableHeight(250)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.visible = true
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = tableHeight(250)
|
||||
})
|
||||
this.form.model = 'G8.5'
|
||||
this.form.detectTime = moment().format('yyyy-MM-DDTHH:mm:ss')
|
||||
},
|
||||
selectItem() {
|
||||
this.getStandard()
|
||||
},
|
||||
selectStandard() {
|
||||
if (this.form.detectItem) {
|
||||
this.getStandard()
|
||||
}
|
||||
},
|
||||
getStandard() {
|
||||
getProcessDetectList({
|
||||
productSpec: this.form.model,
|
||||
detectItem: this.form.detectItem
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data
|
||||
} else {
|
||||
this.tableData = []
|
||||
}
|
||||
})
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.tableData.length === 0) {
|
||||
this.$message({
|
||||
message: '请先到标准设置中添加该检测项目的检测点',
|
||||
type: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
return false
|
||||
}
|
||||
// for (let item of this.tableData) {
|
||||
// if (!item.value || !item.result) {
|
||||
// this.$message({
|
||||
// message: '表格中有数据空缺，请检查',
|
||||
// type: 'error',
|
||||
// duration: 1500
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// }
|
||||
let arr = []
|
||||
for (let i of this.tableData) {
|
||||
let obj = {}
|
||||
obj.detectStandardId = i.id
|
||||
obj.detectTime = this.form.detectTime
|
||||
obj.detector = this.form.detector
|
||||
obj.glassId = this.form.glassId
|
||||
obj.remark = i.remark ? i.remark : ''
|
||||
obj.result = i.result ? i.result : ''
|
||||
obj.value = i.value ? i.value : ''
|
||||
arr.push(obj)
|
||||
}
|
||||
detectInput(arr).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {}
|
||||
})
|
||||
this.$emit('successSubmit')
|
||||
this.formClear()
|
||||
this.visible = false
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
closeForm() {
|
||||
this.formClear()
|
||||
this.visible = false
|
||||
},
|
||||
formClear() {
|
||||
this.$refs.form.resetFields()
|
||||
this.tableData = []
|
||||
},
|
||||
inputChange(val) {
|
||||
this.tableData[val._pageIndex - 1][val.prop] = val[val.prop]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.samplingAdd {
|
||||
.form-box {
|
||||
height: 100%;
|
||||
padding: 0 32px;
|
||||
position: relative;
|
||||
.first-line {
|
||||
border-bottom: 1px solid rgba(233, 233, 233, 1);
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
254
src/views/qualityManagement/components/standardSetting.vue
Normal file
254
src/views/qualityManagement/components/standardSetting.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
title="标准值设置"
|
||||
:visible.sync="visible"
|
||||
size="70%"
|
||||
class="standardSetting"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
:model="form"
|
||||
class="form-box"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div style="display: inline-block; margin-right: 10px">
|
||||
<el-form-item label="型号" prop="model">
|
||||
<el-radio-group v-model="form.model" @change="selectStandard">
|
||||
<el-radio-button
|
||||
v-for="item in productModelVoList"
|
||||
:key="item.dataCode"
|
||||
:label="item.dataName"
|
||||
>{{ item.dataName }}</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="display: inline-block">
|
||||
<el-form-item label="检验项目" prop="detectItem">
|
||||
<el-select
|
||||
v-model="form.detectItem"
|
||||
placeholder="检验项目"
|
||||
style="width: 100%"
|
||||
@change="selectItem"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in testItemList"
|
||||
:key="item.dataCode"
|
||||
:label="item.dataName"
|
||||
:value="item.dataName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" style="margin-bottom: 20px">
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
:add-button-show="addButtonShow"
|
||||
highlight-current-row
|
||||
@emitFun="inputChange"
|
||||
@emitButtonClick="addNew"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="80"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="bottom">
|
||||
<el-col :span="24" style="text-align: right">
|
||||
<el-form-item>
|
||||
<el-button @click="closeForm">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import inputArea from '@/components/BaseTable/subcomponents/InputArea'
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import {
|
||||
getProcessDetectList,
|
||||
getProcessDetectAdd
|
||||
} from '@/api/qualityManagement'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'detectItem',
|
||||
label: '检验项目',
|
||||
subcomponent: inputArea
|
||||
},
|
||||
{
|
||||
prop: 'detectPoint',
|
||||
label: '检测点',
|
||||
subcomponent: inputArea
|
||||
},
|
||||
{
|
||||
prop: 'detectStandard',
|
||||
label: '检验标准',
|
||||
subcomponent: inputArea
|
||||
}
|
||||
]
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: '编辑'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'StandarSetting',
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
form: {
|
||||
model: '',
|
||||
detectItem: ''
|
||||
},
|
||||
testItemList: JSON.parse(localStorage.getItem('publicList'))
|
||||
.checkItemVoList,
|
||||
productModelVoList: JSON.parse(localStorage.getItem('publicList'))
|
||||
.productModelVoList,
|
||||
rules: {
|
||||
model: [{ required: true, message: '请输入选择型号', trigger: 'blur' }],
|
||||
detectItem: [
|
||||
{ required: true, message: '请选择检验项目', trigger: 'change' }
|
||||
]
|
||||
},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableBtn,
|
||||
addButtonShow: '新增',
|
||||
tableH: tableHeight(250)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.visible = true
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = tableHeight(250)
|
||||
})
|
||||
this.form.model = 'G8.5'
|
||||
},
|
||||
selectItem() {
|
||||
this.getStandard()
|
||||
},
|
||||
selectStandard() {
|
||||
if (this.form.detectItem) {
|
||||
this.getStandard()
|
||||
}
|
||||
},
|
||||
getStandard() {
|
||||
getProcessDetectList({
|
||||
productSpec: this.form.model,
|
||||
detectItem: this.form.detectItem
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data
|
||||
} else {
|
||||
this.tableData = []
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClick(val) {
|
||||
this.tableData.splice(val._pageIndex, 1)
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.tableData.length === 0) {
|
||||
this.$message({
|
||||
message: '请点击新增按钮添加标准值后再保存',
|
||||
type: 'error',
|
||||
duration: 1500
|
||||
})
|
||||
return false
|
||||
}
|
||||
for (let item of this.tableData) {
|
||||
if (!item.detectItem || !item.detectPoint || !item.detectStandard) {
|
||||
this.$message({
|
||||
message: '表格中有数据空缺，请检查',
|
||||
type: 'error',
|
||||
duration: 1500
|
||||
})
|
||||
return false
|
||||
}
|
||||
}
|
||||
for (let item of this.tableData) {
|
||||
item.productSpec = this.form.model
|
||||
}
|
||||
getProcessDetectAdd(this.tableData).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {}
|
||||
})
|
||||
this.$emit('successSubmit')
|
||||
this.formClear()
|
||||
this.visible = false
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
closeForm() {
|
||||
this.formClear()
|
||||
this.visible = false
|
||||
},
|
||||
formClear() {
|
||||
this.$refs.form.resetFields()
|
||||
this.tableData = []
|
||||
},
|
||||
inputChange(val) {
|
||||
this.tableData[val._pageIndex - 1][val.prop] = val[val.prop]
|
||||
},
|
||||
addNew() {
|
||||
if (!this.form.detectItem) {
|
||||
this.$message({
|
||||
message: '请先选择检验项目',
|
||||
type: 'error',
|
||||
duration: 1500
|
||||
})
|
||||
return false
|
||||
}
|
||||
let obj = {}
|
||||
obj.detectItem = this.form.detectItem
|
||||
obj.detectPoint = ''
|
||||
obj.detectStandard = ''
|
||||
this.tableData.push(obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.standardSetting {
|
||||
.form-box {
|
||||
height: 100%;
|
||||
padding: 0 32px;
|
||||
position: relative;
|
||||
}
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="thicknessDistributionChart">
|
||||
<div class="top-table">
|
||||
<ul>
|
||||
<li>转换速度：32654654</li>
|
||||
<li>配方类型：G8.5-0943</li>
|
||||
<li>玻璃索引：56565</li>
|
||||
<li>等级：G1</li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="red-tip">最大值：235454</li>
|
||||
<li class="blue-tip">最小值：5652356</li>
|
||||
<li class="purple-tip">平均值：6856532656</li>
|
||||
<li class="green-tip">厚度差：656413212</li>
|
||||
<li class="yellow-tip">研磨类型：4ABC</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<span class="title">玻璃ID：46745386415274874</span>
|
||||
</div>
|
||||
<div
|
||||
id="thicknessChart"
|
||||
style="width: 100%"
|
||||
:style="{ height: chartHeight + 'px' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import resize from '@/utils/chartMixins/resize'
|
||||
export default {
|
||||
name: 'thicknessDistributionChart',
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: tableHeight(320)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.chartDom = document.getElementById('thicknessChart')
|
||||
this.chart = echarts.init(this.chartDom)
|
||||
this.getChart()
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartHeight = tableHeight(320)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getChart() {
|
||||
let long = []
|
||||
for (let i = 1; i <= 21; i++) {
|
||||
long.push(i)
|
||||
}
|
||||
let wide = []
|
||||
for (let i = 1; i <= 7; i++) {
|
||||
wide.push(i)
|
||||
}
|
||||
const data = []
|
||||
for (let k = 0; k < long.length; k++) {
|
||||
for (let j = 0; j < wide.length; j++) {
|
||||
let arr = []
|
||||
arr[0] = k
|
||||
arr[1] = j
|
||||
arr[2] = parseInt(Math.random() * 80 + 470)
|
||||
data.push(arr)
|
||||
}
|
||||
}
|
||||
var option = {
|
||||
tooltip: {
|
||||
position: 'top'
|
||||
},
|
||||
grid: {
|
||||
height: '50%',
|
||||
top: '10%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: long,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: wide,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 470,
|
||||
max: 550,
|
||||
calculable: true,
|
||||
color: ['#FF8481', '#F9E35E', '#A6FF99', '#46EBE8', '#4572FF'],
|
||||
orient: 'horizontal',
|
||||
right: '9%',
|
||||
top: '3%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Punch Card',
|
||||
type: 'heatmap',
|
||||
data: data,
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
option && this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.thicknessDistributionChart {
|
||||
.top-table {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
ul {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
li {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
width: 20%;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(232, 232, 232, 1);
|
||||
}
|
||||
.red-tip {
|
||||
color: rgba(255, 78, 78, 0.85);
|
||||
}
|
||||
.blue-tip {
|
||||
color: rgba(80, 125, 215, 1);
|
||||
}
|
||||
.purple-tip {
|
||||
color: rgba(152, 83, 255, 0.85);
|
||||
}
|
||||
.green-tip {
|
||||
color: rgba(80, 187, 144, 1);
|
||||
}
|
||||
.yellow-tip {
|
||||
color: rgba(236, 180, 65, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #0b58ff;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
542
src/views/qualityManagement/finalInspectionDailyReport.vue
Normal file
542
src/views/qualityManagement/finalInspectionDailyReport.vue
Normal file
@@ -0,0 +1,542 @@
|
||||
<template>
|
||||
<div class="page-box">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-props="tableProp"
|
||||
:table-data="tableData"
|
||||
:span-method="spanMethod"
|
||||
:max-height="tableH"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import TableTags from './components/TableTags.vue'
|
||||
const tableProp = [
|
||||
{
|
||||
prop: 'process',
|
||||
label: '区域',
|
||||
fixed: true
|
||||
},
|
||||
{
|
||||
prop: 'equipmentName',
|
||||
label: '项目指标',
|
||||
minWidth: 150,
|
||||
fixed: true
|
||||
},
|
||||
{
|
||||
label: '白班(8:00-20:00)',
|
||||
align: 'center',
|
||||
children: [
|
||||
{ prop: 'b1', label: '7-8', width: 60 },
|
||||
{ prop: 'b2', label: '8-9', width: 60 },
|
||||
{ prop: 'b3', label: '9-10', width: 60 },
|
||||
{ prop: 'b4', label: '10-11', width: 60 },
|
||||
{ prop: 'b5', label: '11-12', width: 60 },
|
||||
{ prop: 'b6', label: '12-13', width: 60 },
|
||||
{ prop: 'b7', label: '13-14', width: 60 },
|
||||
{ prop: 'b8', label: '14-15', width: 60 },
|
||||
{ prop: 'b9', label: '15-16', width: 60 },
|
||||
{ prop: 'b10', label: '16-17', width: 60 },
|
||||
{ prop: 'b11', label: '17-18', width: 60 },
|
||||
{ prop: 'b12', label: '18-19', width: 60 },
|
||||
{ prop: 'ct1', label: '合计', subcomponent: TableTags }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '夜班(20:00-8:00)',
|
||||
align: 'center',
|
||||
children: [
|
||||
{ prop: 'y1', label: '19-20', width: 60 },
|
||||
{ prop: 'y2', label: '20-21', width: 60 },
|
||||
{ prop: 'y3', label: '21-22', width: 60 },
|
||||
{ prop: 'y4', label: '22-23', width: 60 },
|
||||
{ prop: 'y5', label: '23-24', width: 60 },
|
||||
{ prop: 'y6', label: '0-1', width: 60 },
|
||||
{ prop: 'y7', label: '1-2', width: 60 },
|
||||
{ prop: 'y8', label: '2-3', width: 60 },
|
||||
{ prop: 'y9', label: '3-4', width: 60 },
|
||||
{ prop: 'y10', label: '4-5', width: 60 },
|
||||
{ prop: 'y11', label: '5-6', width: 60 },
|
||||
{ prop: 'y12', label: '6-7', width: 60 },
|
||||
{ prop: 'ct2', label: '合计', subcomponent: TableTags }
|
||||
]
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'FinalInspectionDailyReport',
|
||||
data() {
|
||||
return {
|
||||
formConfig: [
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '日期选择',
|
||||
dateType: 'date',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd',
|
||||
param: 'timeVal',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'primary',
|
||||
plain: true
|
||||
}
|
||||
],
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
tableH: tableHeight(300),
|
||||
tableProp,
|
||||
tableData: [],
|
||||
span: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = tableHeight(300)
|
||||
})
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
buttonClick(val) {
|
||||
console.log(val)
|
||||
},
|
||||
getData() {
|
||||
;(this.tableData = [
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 108,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 103,
|
||||
equipmentName: '上片投入数',
|
||||
process: '综合'
|
||||
},
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 102,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 99,
|
||||
equipmentName: '机器人投入数',
|
||||
process: '综合'
|
||||
},
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 100,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 100,
|
||||
equipmentName: '良品总投入数',
|
||||
process: '综合'
|
||||
},
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 100,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 100,
|
||||
equipmentName: '工序损耗',
|
||||
process: '综合'
|
||||
},
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 100,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 100,
|
||||
equipmentName: '后清洗输出',
|
||||
process: '综合'
|
||||
},
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 100,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 100,
|
||||
equipmentName: '上片损失',
|
||||
process: '上片'
|
||||
},
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 100,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 100,
|
||||
equipmentName: '精切损失',
|
||||
process: '精切'
|
||||
},
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 100,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 100,
|
||||
equipmentName: '精切抽检',
|
||||
process: '精切'
|
||||
},
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 100,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 100,
|
||||
equipmentName: '磨边损失',
|
||||
process: '磨边'
|
||||
},
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 100,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 100,
|
||||
equipmentName: '磨边抽检',
|
||||
process: '磨边'
|
||||
},
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 100,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 100,
|
||||
equipmentName: '前清洗损失',
|
||||
process: '前清洗'
|
||||
},
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 100,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 100,
|
||||
equipmentName: '边检损失',
|
||||
process: '边检'
|
||||
},
|
||||
{
|
||||
b1: 1,
|
||||
b2: 2,
|
||||
b3: 3,
|
||||
b4: 4,
|
||||
b5: 5,
|
||||
b6: 6,
|
||||
b7: 7,
|
||||
b8: 8,
|
||||
b9: 9,
|
||||
b10: 10,
|
||||
b11: 11,
|
||||
b12: 12,
|
||||
ct1: 100,
|
||||
y1: 1,
|
||||
y2: 2,
|
||||
y3: 3,
|
||||
y4: 4,
|
||||
y5: 5,
|
||||
y6: 6,
|
||||
y7: 7,
|
||||
y8: 8,
|
||||
y9: 9,
|
||||
y10: 10,
|
||||
y11: 11,
|
||||
y12: 12,
|
||||
ct2: 100,
|
||||
equipmentName: '复投损失',
|
||||
process: '复投'
|
||||
}
|
||||
]),
|
||||
this.getSpanArr(this.tableData)
|
||||
},
|
||||
getSpanArr(data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (i === 0) {
|
||||
this.span.push(1)
|
||||
this.index = 0
|
||||
} else {
|
||||
if (data[i].process === data[i - 1].process) {
|
||||
this.span[this.index] += 1
|
||||
this.span.push(0)
|
||||
} else {
|
||||
this.span.push(1)
|
||||
this.index = i
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
spanMethod({ rowIndex, columnIndex }) {
|
||||
if (columnIndex === 1) {
|
||||
const _row = this.span[rowIndex]
|
||||
return {
|
||||
rowspan: _row,
|
||||
colspan: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
229
src/views/qualityManagement/finalInspectionData.vue
Normal file
229
src/views/qualityManagement/finalInspectionData.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="finalInspectionData">
|
||||
<el-row class="box-top">
|
||||
<el-col>
|
||||
<div class="search-box">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="8" class="box">
|
||||
<el-col :span="9">
|
||||
<div class="left-box">
|
||||
<span class="table-button">生成表格</span>
|
||||
<base-table
|
||||
:selectWidth="40"
|
||||
:table-props="tablePropsL"
|
||||
:table-data="tableDataL"
|
||||
:max-height="tableHL"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="15">
|
||||
<div class="right-box">
|
||||
<div>
|
||||
<span class="title">成品玻璃基本缺陷统计</span>
|
||||
</div>
|
||||
<ul class="tip">
|
||||
<li>单位：um</li>
|
||||
<li>玻璃ID：26522322323</li>
|
||||
<li>生产日期：2022.12.24 15:56:24</li>
|
||||
<li>等级：G1</li>
|
||||
</ul>
|
||||
<div class="table-box">
|
||||
<final-data-table />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import finalDataTable from './components/finalDataTable'
|
||||
const tablePropsL = [
|
||||
{
|
||||
prop: 'id',
|
||||
label: 'ID',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'time',
|
||||
label: '检测时间',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '研磨类型',
|
||||
minWidth: 100
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'FinalInspectionData',
|
||||
components: { finalDataTable },
|
||||
data() {
|
||||
return {
|
||||
formConfig: [
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '检验时间',
|
||||
dateType: 'datetime',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
placeholder: '检验时间',
|
||||
param: 'testTime',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '玻璃架',
|
||||
selectOptions: [
|
||||
{ id: '1', name: '521321545' },
|
||||
{ id: '2', name: '932234561' },
|
||||
{ id: '3', name: '542121212' },
|
||||
{ id: '4', name: '354855321' }
|
||||
],
|
||||
param: 'fullInspectionType',
|
||||
defaultSelect: '',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '报表类型',
|
||||
selectOptions: [
|
||||
{ id: '1', name: '单片玻璃基板缺陷统计' },
|
||||
{ id: '2', name: '932234561' },
|
||||
{ id: '3', name: '542121212' },
|
||||
{ id: '4', name: '354855321' }
|
||||
],
|
||||
param: 'fullInspectionType1',
|
||||
defaultSelect: '',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'success'
|
||||
}
|
||||
],
|
||||
tablePropsL,
|
||||
tableDataL: [],
|
||||
tableHL: tableHeight(300)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableHL = tableHeight(300)
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.getList()
|
||||
break
|
||||
default:
|
||||
alert('导出')
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
let arr = []
|
||||
for (let i = 0; i < 30; i++) {
|
||||
let obj = {}
|
||||
obj.type = i
|
||||
arr.push(obj)
|
||||
}
|
||||
this.tableDataL = arr
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.finalInspectionData {
|
||||
width: 100%;
|
||||
.box-top {
|
||||
width: 100%;
|
||||
padding: 8px 16px 0;
|
||||
.search-box {
|
||||
height: 62px;
|
||||
padding: 10px 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
padding: 8px 8px 0 16px;
|
||||
.left-box,
|
||||
.right-box {
|
||||
height: calc(100vh - 220px);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
.table-box {
|
||||
height: calc(100vh - 352px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.left-box {
|
||||
.table-button {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 4px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: #0b58ff;
|
||||
border-radius: 4px;
|
||||
border: 1px dotted #0b58ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.right-box {
|
||||
.title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #0b58ff;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tip {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
height: 40px;
|
||||
margin: 16px 0 20px;
|
||||
li {
|
||||
width: 25%;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
border-left: 1px solid #e8e8e8;
|
||||
}
|
||||
:last-child {
|
||||
border-right: 1px solid #e8e8e8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
src/views/qualityManagement/processFullInspection.vue
Normal file
60
src/views/qualityManagement/processFullInspection.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="process-full-inspection">
|
||||
<el-menu
|
||||
:default-active="activeName"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="fullInspection">过程全检</el-menu-item>
|
||||
<el-menu-item index="defectScatterPlot">缺陷散点图</el-menu-item>
|
||||
<el-menu-item index="particleLineChart">颗粒折线图</el-menu-item>
|
||||
<el-menu-item index="thicknessDistributionMap">厚度分布图</el-menu-item>
|
||||
</el-menu>
|
||||
<section>
|
||||
<router-view />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProcessFullInspection',
|
||||
data() {
|
||||
return {
|
||||
activeName: 'fullInspection'
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
handleSelect(name) {
|
||||
this.$router.push({ name: name })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.process-full-inspection {
|
||||
.el-menu {
|
||||
background-color: #f2f4f9;
|
||||
}
|
||||
.el-menu.el-menu--horizontal {
|
||||
border-bottom: none;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 8px;
|
||||
.el-menu-item {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
width: 24.5%;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
color: rgba(22, 22, 22, 0.65);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="defectScatterPlot">
|
||||
<el-row :gutter="8" class="top-box">
|
||||
<el-col :span="12">
|
||||
<div class="top-left">
|
||||
<div style="margin-bottom: 10px">
|
||||
<span class="title">检验时间</span>
|
||||
<el-date-picker
|
||||
v-model="searchTime"
|
||||
type="datetime"
|
||||
size="small"
|
||||
placeholder="检验时间"
|
||||
style="margin: 0 24px 0 8px"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-button type="primary" size="small">查询</el-button>
|
||||
</div>
|
||||
<base-table
|
||||
:selectWidth="50"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
/>
|
||||
<pagination :limit="listQuery.size" :total="total" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="top-right">
|
||||
<div class="line1">
|
||||
<span style="margin-right: 8px">颗粒缺陷选择</span>
|
||||
<el-radio-group
|
||||
v-model="type"
|
||||
size="small"
|
||||
style="margin-right: 24px"
|
||||
>
|
||||
<el-radio-button label="1">颗粒全选</el-radio-button>
|
||||
<el-radio-button label="2">面检全选</el-radio-button>
|
||||
</el-radio-group>
|
||||
<span>检验项目 </span>
|
||||
<el-select
|
||||
v-model="checkItem"
|
||||
placeholder="检验项目"
|
||||
size="small"
|
||||
style="width: 160px; margin-right: 24px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" size="small" style="margin-right: 14px"
|
||||
>绘图</el-button
|
||||
>
|
||||
<el-button type="success" size="small">导出</el-button>
|
||||
</div>
|
||||
<div class="line2">
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:label="item.value"
|
||||
>{{ item.label }}</el-checkbox
|
||||
>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div>
|
||||
<span class="title">缺陷散点图(1245241242)</span>
|
||||
</div>
|
||||
<defect-scatter-plot-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<div class="bottom">
|
||||
<div style="margin-bottom: 10px">
|
||||
<span class="title">合计</span>
|
||||
<defect-scatter-plot-total />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import defectScatterPlotTotal from './../components/defectScatterPlotTotal.vue'
|
||||
import defectScatterPlotChart from './../components/defectScatterPlotChart.vue'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'id',
|
||||
label: 'D',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'fullInspectionType',
|
||||
label: '检验时间',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '研磨类型'
|
||||
},
|
||||
{
|
||||
prop: 'width',
|
||||
label: '总电流'
|
||||
},
|
||||
{
|
||||
prop: 'thick',
|
||||
label: '颗粒总数'
|
||||
},
|
||||
{
|
||||
prop: 'productQuality',
|
||||
label: '面检总数'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'defectScatterPlot',
|
||||
components: { defectScatterPlotTotal, defectScatterPlotChart },
|
||||
data() {
|
||||
return {
|
||||
searchTime: '',
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableH: tableHeight(450),
|
||||
total: 0,
|
||||
type: '1',
|
||||
selectList: [
|
||||
{ label: '1', value: '1' },
|
||||
{ label: '2', value: '2' },
|
||||
{ label: '3', value: '3' },
|
||||
{ label: '4', value: '4' }
|
||||
],
|
||||
checkItem: '',
|
||||
checkList: [],
|
||||
list: [
|
||||
{ label: 'S', value: 'S' },
|
||||
{ label: 'M', value: 'm' },
|
||||
{ label: 'L', value: 'l' },
|
||||
{ label: 'XL', value: 'xl' },
|
||||
{ label: '气泡', value: 'qp' },
|
||||
{ label: '变形', value: 'bx' },
|
||||
{ label: '纤维', value: 'xw' },
|
||||
{ label: '划伤', value: 'hs' },
|
||||
{ label: '结节', value: 'jj' },
|
||||
{ label: '结石', value: 'js' },
|
||||
{ label: '铂金', value: 'bj' },
|
||||
{ label: '拖尾', value: 'tw' },
|
||||
{ label: 'ADG', value: 'adg' },
|
||||
{ label: '点状缺陷', value: '' },
|
||||
{ label: '锡缺陷(顶部)', value: 'xqxt' },
|
||||
{ label: '锡缺陷(底部)', value: 'xqxb' },
|
||||
{ label: '无法识别', value: 'wfsb' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = tableHeight(450)
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
let arr = []
|
||||
for (let i = 0; i < 30; i++) {
|
||||
let obj = {}
|
||||
obj.id = i + 10
|
||||
arr.push(obj)
|
||||
}
|
||||
this.tableData = arr
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.defectScatterPlot {
|
||||
.top-box {
|
||||
width: 100%;
|
||||
padding: 0 9px 0 16px;
|
||||
}
|
||||
.top-left,
|
||||
.top-right,
|
||||
.bottom {
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.top-left {
|
||||
height: calc(100vh - 343px);
|
||||
}
|
||||
.top-right {
|
||||
height: calc(100vh - 343px);
|
||||
font-size: 14px;
|
||||
.line1 {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.line2 {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
margin: 8px 16px 0;
|
||||
height: 130px;
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #0b58ff;
|
||||
border-radius: 1px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="fullInspection">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="80"
|
||||
label="操作"
|
||||
fixed="right"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination :limit="listQuery.size" :total="total" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { tableHeight } from '@/utils/index'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'glassId',
|
||||
label: '玻璃ID'
|
||||
},
|
||||
{
|
||||
prop: 'fullInspectionType',
|
||||
label: '全检类型'
|
||||
},
|
||||
{
|
||||
prop: 'long',
|
||||
label: '长/mm'
|
||||
},
|
||||
{
|
||||
prop: 'width',
|
||||
label: '宽/mm'
|
||||
},
|
||||
{
|
||||
prop: 'thick',
|
||||
label: '厚/mm'
|
||||
},
|
||||
{
|
||||
prop: 'productQuality',
|
||||
label: '产品质量'
|
||||
},
|
||||
{
|
||||
prop: 'productionLine',
|
||||
label: '产线'
|
||||
},
|
||||
{
|
||||
prop: 'testOfTime',
|
||||
label: '检验时间'
|
||||
}
|
||||
]
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'detail',
|
||||
btnName: '详情'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'fullInspection',
|
||||
data() {
|
||||
return {
|
||||
formConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '玻璃ID',
|
||||
placeholder: '玻璃ID',
|
||||
param: 'glassId'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '全检类型',
|
||||
selectOptions: [
|
||||
{ id: '1', name: '精切后边检' },
|
||||
{ id: '2', name: '终检边检' },
|
||||
{ id: '3', name: '面检' },
|
||||
{ id: '4', name: '复检' }
|
||||
],
|
||||
param: 'fullInspectionType',
|
||||
defaultSelect: '',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '检验时间',
|
||||
dateType: 'datetime',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
placeholder: '抽检时间',
|
||||
param: 'testTime',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'primary',
|
||||
plain: true
|
||||
}
|
||||
],
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableH: tableHeight(330),
|
||||
tableBtn,
|
||||
total: 0,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = tableHeight(330)
|
||||
})
|
||||
for (let i = 0; i < 30; i++) {
|
||||
let obj = {}
|
||||
obj.glassId = i
|
||||
obj.fullInspectionType = '全检类型' + i
|
||||
obj.long = i
|
||||
obj.width = i
|
||||
obj.thick = i
|
||||
obj.productQuality = '产品质量' + i
|
||||
obj.productionLine = '产线' + i
|
||||
obj.testOfTime = '2022-08-08 13:59:13'
|
||||
this.tableData.push(obj)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
console.log('getList')
|
||||
},
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.getList()
|
||||
break
|
||||
default:
|
||||
alert('导出')
|
||||
}
|
||||
},
|
||||
handleClick(val) {
|
||||
console.log(val)
|
||||
if (val.type === 'detail') {
|
||||
alert('详情')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.fullInspection {
|
||||
margin: 0 16px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
height: calc(100vh - 205px);
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div class="particleLine-chart">
|
||||
<div style="margin-bottom: 30px">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
id="particleLineChart"
|
||||
style="width: 100%"
|
||||
:style="{ height: chartHeight + 'px' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import resize from '@/utils/chartMixins/resize'
|
||||
import { getProcessFull } from '@/api/qualityManagement'
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
name: 'particleLineChart',
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
formConfig: [
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '检验时间',
|
||||
dateType: 'datetime',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
placeholder: '抽检时间',
|
||||
param: 'checkOutTime',
|
||||
defaultSelect: '',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '合格上线',
|
||||
placeholder: '合格上线',
|
||||
param: 'maxLine'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '确认',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: tableHeight(320),
|
||||
listQuery: {
|
||||
size: 1000,
|
||||
current: 1,
|
||||
checkOutTime: '',
|
||||
maxLine: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.chartDom = document.getElementById('particleLineChart')
|
||||
this.chart = echarts.init(this.chartDom)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartHeight = tableHeight(320)
|
||||
})
|
||||
this.formConfig[0].defaultSelect = moment().format('YYYY-MM-DDTHH:mm:ss')
|
||||
this.getMsg()
|
||||
},
|
||||
methods: {
|
||||
buttonClick(val) {
|
||||
console.log(val)
|
||||
if (val.btnName === 'search') {
|
||||
this.listQuery.checkOutTime = val.checkOutTime
|
||||
this.listQuery.maxLine = val.maxLine
|
||||
this.getMsg()
|
||||
}
|
||||
},
|
||||
getMsg() {
|
||||
let time = []
|
||||
let sList = []
|
||||
let mList = []
|
||||
let lList = []
|
||||
let xlList = []
|
||||
let sumList = []
|
||||
let msg = {}
|
||||
getProcessFull({ ...this.listQuery }).then((res) => {
|
||||
console.log(res)
|
||||
if (res.code === 0 && res.data.length > 0) {
|
||||
res.data.map((item) => {
|
||||
console.log(item)
|
||||
time.push(moment(item.hour).format('MM-DD HH:mm:ss'))
|
||||
sList.push(item.s)
|
||||
mList.push(item.m)
|
||||
lList.push(item.l)
|
||||
xlList.push(item.xl)
|
||||
sumList.push(item.sum)
|
||||
})
|
||||
msg.time = time
|
||||
msg.sList = sList
|
||||
msg.mList = mList
|
||||
msg.lList = lList
|
||||
msg.xlList = xlList
|
||||
msg.sumList = sumList
|
||||
this.getChart(msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
getChart(msg) {
|
||||
var option = {
|
||||
color: ['#5AD8A6', '#5B8FF9', '#5D7092', '#F6BD16', '#E8684A'],
|
||||
title: {
|
||||
text: '时间段玻璃颗粒数'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Total', 'M', 'L', 'S', 'XL'],
|
||||
right: '4%'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: msg.time
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Total',
|
||||
type: 'line',
|
||||
data: msg.sumList,
|
||||
markLine: {
|
||||
show: false,
|
||||
Symbol: 'none',
|
||||
label: {
|
||||
position: 'end',
|
||||
formatter: '合格线\n' + this.listQuery.maxLine
|
||||
},
|
||||
data: [
|
||||
{
|
||||
silent: false,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#0B58FF'
|
||||
},
|
||||
yAxis: this.listQuery.maxLine
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'M',
|
||||
type: 'line',
|
||||
data: msg.mList
|
||||
},
|
||||
{
|
||||
name: 'L',
|
||||
type: 'line',
|
||||
data: msg.lList
|
||||
},
|
||||
{
|
||||
name: 'S',
|
||||
type: 'line',
|
||||
data: msg.sList
|
||||
},
|
||||
{
|
||||
name: 'XL',
|
||||
type: 'line',
|
||||
data: msg.xlList
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.particleLine-chart {
|
||||
height: calc(100vh - 205px);
|
||||
margin: 0 16px;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<el-row :gutter="8" class="thicknessDistributionMap">
|
||||
<el-col :span="10">
|
||||
<div class="left-box">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:selectWidth="50"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="right-box">
|
||||
<thickness-distribution-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import thicknessDistributionChart from './../components/thicknessDistributionChart.vue'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'glassID',
|
||||
label: 'ID'
|
||||
},
|
||||
{
|
||||
prop: 'time',
|
||||
label: '检测时间'
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '研磨类型'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'thicknessDistributionMap',
|
||||
components: { thicknessDistributionChart },
|
||||
data() {
|
||||
return {
|
||||
formConfig: [
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '检验时间',
|
||||
dateType: 'datetime',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
placeholder: '检验时间',
|
||||
param: 'testTime',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '玻璃ID',
|
||||
selectOptions: [
|
||||
{ id: '1', name: '521321545' },
|
||||
{ id: '2', name: '932234561' },
|
||||
{ id: '3', name: '542121212' },
|
||||
{ id: '4', name: '354855321' }
|
||||
],
|
||||
param: 'fullInspectionType',
|
||||
defaultSelect: '',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '绘图',
|
||||
name: 'draw',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableH: tableHeight(300)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = tableHeight(300)
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
let arr = []
|
||||
for (let i = 0; i < 30; i++) {
|
||||
let obj = {}
|
||||
obj.glassID = i
|
||||
arr.push(obj)
|
||||
}
|
||||
this.tableData = arr
|
||||
},
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.getList()
|
||||
break
|
||||
default:
|
||||
alert('导出')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.thicknessDistributionMap {
|
||||
width: 100%;
|
||||
padding: 0 8px 0 16px;
|
||||
.left-box,
|
||||
.right-box {
|
||||
height: calc(100vh - 205px);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
302
src/views/qualityManagement/processSampling.vue
Normal file
302
src/views/qualityManagement/processSampling.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<div class="page-box">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick"
|
||||
@select-changed="selectType"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
/>
|
||||
<pagination :limit="listQuery.size" :total="total" />
|
||||
<!-- 录入 -->
|
||||
<sampling-add
|
||||
ref="samplingList"
|
||||
v-if="centervisible"
|
||||
@successSubmit="getList"
|
||||
/>
|
||||
<!-- 标准设置 -->
|
||||
<standar-setting
|
||||
ref="standardList"
|
||||
v-if="centervisible2"
|
||||
@successSubmit="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { tableHeight, timeFormatter } from '@/utils/index'
|
||||
import SamplingAdd from './components/samplingAdd'
|
||||
import StandarSetting from './components/standardSetting'
|
||||
import {
|
||||
getProcessDetectPage,
|
||||
processDetectExport
|
||||
} from '@/api/qualityManagement'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'glassId',
|
||||
label: '玻璃ID',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'detectItem',
|
||||
label: '检验项目',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'detectPoint',
|
||||
label: '检测点',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'detectStandard',
|
||||
label: '检验标准',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'value',
|
||||
label: '实测值',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'result',
|
||||
label: '抽检结果',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'detector',
|
||||
label: '抽检人',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'detectTime',
|
||||
label: '抽检时间',
|
||||
filter: timeFormatter,
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '备注',
|
||||
minWidth: 150
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'ProcessSampling',
|
||||
components: { SamplingAdd, StandarSetting },
|
||||
data() {
|
||||
return {
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '查询方式',
|
||||
selectOptions: [
|
||||
{ id: 1, name: '玻璃ID' },
|
||||
{ id: 2, name: '抽检人' },
|
||||
{ id: 3, name: '检验项目' }
|
||||
],
|
||||
param: 'type',
|
||||
defaultSelect: '',
|
||||
onchange: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
label: '',
|
||||
placeholder: '玻璃ID',
|
||||
param: 'glassId'
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
label: '',
|
||||
placeholder: '抽检人',
|
||||
param: 'detector',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
label: '',
|
||||
selectOptions: JSON.parse(localStorage.getItem('publicList'))
|
||||
.checkItemVoList,
|
||||
param: 'detectItem',
|
||||
labelField: 'dataName',
|
||||
valueField: 'dataName',
|
||||
defaultSelect: '',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '抽检时间',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'timeVal',
|
||||
width: 350
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '重置',
|
||||
name: 'reset'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '录入',
|
||||
name: 'add',
|
||||
color: 'primary',
|
||||
plain: true
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'primary',
|
||||
plain: true
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '标准设置',
|
||||
name: 'settings',
|
||||
color: 'primary',
|
||||
plain: true
|
||||
}
|
||||
],
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableH: tableHeight(270),
|
||||
total: 0,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20,
|
||||
glassId: '',
|
||||
detector: '',
|
||||
detectItem: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
},
|
||||
centervisible: false,
|
||||
addOrEditTitle: '', //新增编辑弹出框的title
|
||||
standardSetting: '标准设置',
|
||||
centervisible2: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = tableHeight(270)
|
||||
})
|
||||
this.formConfig[0].defaultSelect = 1
|
||||
this.formConfig[1].type = 'input'
|
||||
this.formConfig[1].label = '玻璃ID'
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
getProcessDetectPage({ ...this.listQuery }).then((res) => {
|
||||
console.log(res)
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.glassId = val.type === 1 ? val.glassId : ''
|
||||
this.listQuery.detector = val.type === 2 ? val.detector : ''
|
||||
this.listQuery.detectItem = val.type === 3 ? val.detectItem : ''
|
||||
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
|
||||
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
|
||||
this.getList()
|
||||
break
|
||||
case 'reset':
|
||||
this.$refs.searchBarForm.resetForm()
|
||||
this.listQuery.glassId = ''
|
||||
this.listQuery.detector = ''
|
||||
this.listQuery.detectItem = ''
|
||||
this.listQuery.startTime = ''
|
||||
this.listQuery.endTime = ''
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
break
|
||||
case 'add':
|
||||
this.addOrEditTitle = '抽检录入'
|
||||
this.centervisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.samplingList.init()
|
||||
})
|
||||
break
|
||||
case 'export':
|
||||
processDetectExport({ ...this.listQuery }).then((response) => {
|
||||
console.log(response)
|
||||
let fileName = ''
|
||||
const contentDisposition = response.headers['content-disposition']
|
||||
if (contentDisposition) {
|
||||
fileName = decodeURIComponent(
|
||||
contentDisposition.slice(
|
||||
contentDisposition.indexOf('filename=') + 9
|
||||
)
|
||||
)
|
||||
}
|
||||
const blob = new Blob([response.data])
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(blob)
|
||||
reader.onload = (e) => {
|
||||
const a = document.createElement('a')
|
||||
a.download = fileName
|
||||
a.href = e.target.result
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
})
|
||||
break
|
||||
default:
|
||||
this.centervisible2 = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.standardList.init()
|
||||
})
|
||||
}
|
||||
},
|
||||
selectType(val) {
|
||||
if (val.value === 1) {
|
||||
this.formConfig[0].defaultSelect = 1
|
||||
this.formConfig[1].type = 'input'
|
||||
this.formConfig[1].label = '玻璃ID'
|
||||
this.formConfig[2].type = ''
|
||||
this.formConfig[2].label = ''
|
||||
this.formConfig[3].type = ''
|
||||
this.formConfig[3].label = ''
|
||||
} else if (val.value === 2) {
|
||||
this.formConfig[0].defaultSelect = 2
|
||||
this.formConfig[1].type = ''
|
||||
this.formConfig[1].label = ''
|
||||
this.formConfig[2].type = 'input'
|
||||
this.formConfig[2].label = '抽检人'
|
||||
this.formConfig[3].type = ''
|
||||
this.formConfig[3].label = ''
|
||||
} else if (val.value === 3) {
|
||||
this.formConfig[0].defaultSelect = 3
|
||||
this.formConfig[1].type = ''
|
||||
this.formConfig[1].label = ''
|
||||
this.formConfig[2].type = ''
|
||||
this.formConfig[2].label = ''
|
||||
this.formConfig[3].type = 'select'
|
||||
this.formConfig[3].label = '检验项目'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
211
src/views/qualityManagement/productTraceability.vue
Normal file
211
src/views/qualityManagement/productTraceability.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="page-box">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="100"
|
||||
label="工艺流程"
|
||||
:method-list="tableBtn"
|
||||
fixed="right"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination :limit="listQuery.size" :total="total" />
|
||||
<!-- 抽屉 -->
|
||||
<process-flow-detail v-if="processFlowVisible" ref="processFlowDetail" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ProcessFlowDetail from './components/processFlowDetail'
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import defaultSettings from '@/settings'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'productionLine',
|
||||
label: '产线',
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
prop: 'orderCode',
|
||||
label: '工单编号',
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
prop: 'glassId',
|
||||
label: '玻璃ID',
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'finishedRackId',
|
||||
label: '成品架ID',
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'productLaunchTime',
|
||||
label: '产品上片时间',
|
||||
minWidth: 160
|
||||
},
|
||||
{
|
||||
prop: 'productUnloadingTime',
|
||||
label: '产品下片时间',
|
||||
minWidth: 160
|
||||
},
|
||||
{
|
||||
prop: 'glassGrade',
|
||||
label: '玻璃等级',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'grindingTrayId',
|
||||
label: '面磨托盘ID',
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'supplier',
|
||||
label: '玻璃长度',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'glassWidth',
|
||||
label: '玻璃宽度',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'glassThickness',
|
||||
label: '玻璃厚度',
|
||||
minWidth: 100
|
||||
}
|
||||
]
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: '点击查看'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'ProductTraceability',
|
||||
components: { ProcessFlowDetail },
|
||||
data() {
|
||||
return {
|
||||
formConfig: [
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '产品上片时间',
|
||||
dateType: 'datetime',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
placeholder: '产品上片时间',
|
||||
param: 'testTime',
|
||||
defaultSelect: '2022-08-17 08:20:10',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '产线',
|
||||
selectOptions: defaultSettings.productionLineList,
|
||||
param: 'productionLine',
|
||||
defaultSelect: '',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '查询方式',
|
||||
selectOptions: [
|
||||
{ id: 1, name: '成品架ID' },
|
||||
{ id: 2, name: '时间查询' },
|
||||
{ id: 3, name: '玻璃ID' },
|
||||
{ id: 4, name: '托盘ID' }
|
||||
],
|
||||
param: 'inquiryMode',
|
||||
defaultSelect: '',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '查询内容',
|
||||
placeholder: '查询内容',
|
||||
param: 'queryContent'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '重置',
|
||||
name: 'reset'
|
||||
}
|
||||
],
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableBtn,
|
||||
tableH: tableHeight(270),
|
||||
total: 0,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
processFlowVisible: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = tableHeight(270)
|
||||
})
|
||||
for (let i = 0; i < 30; i++) {
|
||||
let obj = {}
|
||||
obj.productionLine = '产线1'
|
||||
obj.orderCode = '工单编号' + i
|
||||
obj.glassId = '玻璃ID' + i
|
||||
obj.finishedRackId = '成品架ID' + i
|
||||
obj.productLaunchTime = '2022-08-22 08:12:15'
|
||||
obj.productUnloadingTime = '2022-08-22 08:12:15'
|
||||
obj.glassGrade = i
|
||||
obj.grindingTrayId = '面磨托盘ID' + i
|
||||
obj.supplier = 2600
|
||||
obj.glassWidth = 2250
|
||||
obj.glassThickness = 5
|
||||
obj.remark = '备注' + i
|
||||
this.tableData.push(obj)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {},
|
||||
buttonClick(val) {
|
||||
console.log(val)
|
||||
if (val.btnName === 'search') {
|
||||
this.getList()
|
||||
} else if (val.btnName === 'reset') {
|
||||
this.$refs.searchBarForm.resetForm()
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
},
|
||||
handleClick() {
|
||||
this.processFlowVisible = true
|
||||
let id = 1
|
||||
this.$nextTick(() => {
|
||||
this.$refs.processFlowDetail.init(id)
|
||||
})
|
||||
},
|
||||
handleClose() {
|
||||
console.log('========')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
10
src/views/qualityManagement/statisticalAnalysis.vue
Normal file
10
src/views/qualityManagement/statisticalAnalysis.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<span>统计分析</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'StatisticalAnalysis'
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user