666 lines
12 KiB
Vue
666 lines
12 KiB
Vue
<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>
|