forked from mt-fe-group/mt-yd-ui
add spanMethod to base-table
This commit is contained in:
parent
4297798d44
commit
8f124e06b1
@ -1,6 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="base-table">
|
<div class="base-table">
|
||||||
<el-table :data="data" style="width: 100%" fit border :header-cell-style="{ background: '#FAFAFA', color: '#606266', height: '40px' }" :max-height="maxHeight">
|
<el-table
|
||||||
|
:data="data"
|
||||||
|
style="width: 100%"
|
||||||
|
fit
|
||||||
|
border
|
||||||
|
:header-cell-style="{ background: '#FAFAFA', color: '#606266', height: '40px' }"
|
||||||
|
:max-height="maxHeight"
|
||||||
|
:span-method="spanMethod || null"
|
||||||
|
>
|
||||||
<!-- 表格头定义 -->
|
<!-- 表格头定义 -->
|
||||||
<template v-for="(head, idx) in tableHeadConfigs">
|
<template v-for="(head, idx) in tableHeadConfigs">
|
||||||
<!-- 带type的表头 -->
|
<!-- 带type的表头 -->
|
||||||
@ -61,6 +69,13 @@ export default {
|
|||||||
maxHeight: {
|
maxHeight: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 500
|
default: 500
|
||||||
|
},
|
||||||
|
spanMethod: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {
|
||||||
|
() => [0, 0]
|
||||||
|
},
|
||||||
|
required: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
filters: {
|
filters: {
|
||||||
|
|||||||
@ -6,18 +6,29 @@
|
|||||||
* @Description: 设备生产实时数据
|
* @Description: 设备生产实时数据
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<!-- <small-title :size="'md'">{{ $t('module.factory.realtime.equipment.name') }}</small-title> -->
|
<!-- <small-title :size="'md'">{{ $t('module.factory.realtime.equipment.name') }}</small-title> -->
|
||||||
<small-title :size="'md'">设备生产实时数据</small-title>
|
<small-title :size="'md'">设备生产实时数据</small-title>
|
||||||
<base-table
|
<!-- <base-table v-if="loadTable" :table-head-configs="tableProps" :data="tableData.length ? tableData : []" :span-method="spanMethod" /> -->
|
||||||
v-if="loadTable"
|
<base-table
|
||||||
:table-head-configs="tableProps"
|
v-if="loadTable"
|
||||||
:data="tableData.length ? tableData : []"
|
:table-head-configs="[
|
||||||
:span-method="spanMethod"
|
{ type: 'index', label: '序号' },
|
||||||
/>
|
{ prop: 'name', label: '名称' },
|
||||||
</div>
|
{ prop: 'code', label: '编码' },
|
||||||
</div>
|
{ prop: 'brand', label: '品牌' }
|
||||||
|
]"
|
||||||
|
:data="[
|
||||||
|
{ name: '汽车', code: 'Car', brand: 'Benz' },
|
||||||
|
{ name: '汽车', code: 'Car2', brand: 'Audi' },
|
||||||
|
{ name: '汽车', code: 'Car3', brand: 'Maclaren' },
|
||||||
|
{ name: '火车', code: 'Train', brand: 'Harmony' }
|
||||||
|
]"
|
||||||
|
:span-method="testSpan"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -28,206 +39,199 @@ import moment from 'moment'
|
|||||||
|
|
||||||
const fetchList = () => {}
|
const fetchList = () => {}
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RealtimeDataOfEquipment',
|
name: 'RealtimeDataOfEquipment',
|
||||||
components: { BaseTable, SmallTitle },
|
components: { BaseTable, SmallTitle },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loadTable: false,
|
loadTable: false,
|
||||||
tableProps: [{ label: 'default', prop: 'default' }],
|
tableProps: [{ label: 'default', prop: 'default' }],
|
||||||
stepOneArray: [],
|
stepOneArray: [],
|
||||||
tableData: [],
|
tableData: [],
|
||||||
testData: null,
|
testData: null,
|
||||||
equipmentCount: {}, // 每个产线的设备数量记录
|
equipmentCount: {}, // 每个产线的设备数量记录
|
||||||
dynamicPropSet: false, // 是否设置过动态prop
|
dynamicPropSet: false, // 是否设置过动态prop
|
||||||
listLoading: false,
|
listLoading: false,
|
||||||
rowNum: 0,
|
rowNum: 0,
|
||||||
intervalId: null
|
intervalId: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.clearData()
|
this.clearData()
|
||||||
fetchList('equipment').then(res => {
|
// fetchList('equipment').then(res => {
|
||||||
this.testData = res
|
// this.testData = res
|
||||||
this.handleData()
|
// this.handleData()
|
||||||
})
|
// })
|
||||||
|
this.loadTable = true
|
||||||
|
// this.intervalId = setInterval(() => {
|
||||||
|
// this.$message({
|
||||||
|
// // message: this.$t('module.factory.realtime.equipment.refresh'),
|
||||||
|
// type: 'warning',
|
||||||
|
// duration: 1500,
|
||||||
|
// onClose: () => {
|
||||||
|
// this.clearData()
|
||||||
|
// fetchList('equipment').then(res => {
|
||||||
|
// this.testData = res
|
||||||
|
// this.handleData()
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }, 1000 * 60 * 5)
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this.intervalId) clearInterval(this.intervalId)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clearData() {
|
||||||
|
this.tableData.splice(0)
|
||||||
|
this.tableProps.splice(0)
|
||||||
|
this.stepOneArray.splice(0)
|
||||||
|
this.dynamicPropSet = false
|
||||||
|
this.rowNum = 0
|
||||||
|
this.testData = null
|
||||||
|
this.loadTable = false
|
||||||
|
this.equipmentCount = {}
|
||||||
|
this.setStaticTableProps()
|
||||||
|
},
|
||||||
|
|
||||||
this.intervalId = setInterval(() => {
|
handleData() {
|
||||||
this.$message({
|
this.expandDataStepOne()
|
||||||
// message: this.$t('module.factory.realtime.equipment.refresh'),
|
this.expandDataStepTwo()
|
||||||
type: 'warning',
|
// console.log('span data: ', this.equipmentCount)
|
||||||
duration: 1500,
|
this.loadTable = true
|
||||||
onClose: () => {
|
},
|
||||||
this.clearData()
|
|
||||||
fetchList('equipment').then(res => {
|
|
||||||
this.testData = res
|
|
||||||
this.handleData()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}, 1000 * 60 * 5)
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (this.intervalId) clearInterval(this.intervalId)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
clearData() {
|
|
||||||
this.tableData.splice(0)
|
|
||||||
this.tableProps.splice(0)
|
|
||||||
this.stepOneArray.splice(0)
|
|
||||||
this.dynamicPropSet = false
|
|
||||||
this.rowNum = 0
|
|
||||||
this.testData = null
|
|
||||||
this.loadTable = false
|
|
||||||
this.equipmentCount = {}
|
|
||||||
this.setStaticTableProps()
|
|
||||||
},
|
|
||||||
|
|
||||||
handleData() {
|
fetchList() {
|
||||||
this.expandDataStepOne()
|
// 获取设备实时数据
|
||||||
this.expandDataStepTwo()
|
},
|
||||||
// console.log('span data: ', this.equipmentCount)
|
|
||||||
this.loadTable = true
|
|
||||||
},
|
|
||||||
|
|
||||||
fetchList() {
|
testSpan({ row, column, rowIndex, columnIndex }) {
|
||||||
|
console.log('rowIndex', rowIndex)
|
||||||
|
if (columnIndex === 1 && rowIndex % 2 === 0) {
|
||||||
|
return [2, 1]
|
||||||
|
}
|
||||||
|
if (columnIndex === 1 && rowIndex % 2 !== 0) {
|
||||||
|
return [0, 0]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
},
|
expandDataStepOne() {
|
||||||
|
this.stepOneArray = this.testData.data.map(item => {
|
||||||
|
if (item.equDet) {
|
||||||
|
item.equDet.forEach((equipment, index) => {
|
||||||
|
equipment.lineName = item.lineName
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return item.equDet
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
expandDataStepOne() {
|
expandDataStepTwo() {
|
||||||
// this.rowNum = 0
|
// 扩展服务器返回的数据第二阶段
|
||||||
// 扩展服务器返回的数据第一阶段
|
console.log('before step two: ', this.stepOneArray)
|
||||||
this.stepOneArray = this.testData.data.map(item => {
|
this.rowNum = 0
|
||||||
// console.log('handle row: ', this.rowNum)
|
|
||||||
if (item.equDet) {
|
|
||||||
// let count = 0
|
|
||||||
let newItem
|
|
||||||
const newItemArray = []
|
|
||||||
item.equDet.forEach((equipment, index) => {
|
|
||||||
// count += 1
|
|
||||||
newItem = {
|
|
||||||
...equipment,
|
|
||||||
lineName: item.lineName,
|
|
||||||
orderName: item.orderName,
|
|
||||||
productSize: item.productSize
|
|
||||||
}
|
|
||||||
newItemArray.push(newItem)
|
|
||||||
})
|
|
||||||
// this.equipmentCountArray.push({ rowNum: this.rowNum, eqCount: count })
|
|
||||||
// this.$set(this.equipmentCount, [this.rowNum], count)
|
|
||||||
// this.rowNum += count
|
|
||||||
return newItemArray
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
expandDataStepTwo() {
|
this.stepOneArray.forEach(arrayItem => {
|
||||||
// 扩展服务器返回的数据第二阶段
|
let count = 0
|
||||||
// console.log('before step two: ', this.stepOneArray)
|
|
||||||
this.rowNum = 0
|
|
||||||
|
|
||||||
this.stepOneArray.forEach(arrayItem => {
|
arrayItem.forEach(item => {
|
||||||
let count = 0
|
// console.log('========= ', item.equName, ' ==========')
|
||||||
|
const newItem = {
|
||||||
|
equId: item.equId,
|
||||||
|
lineName: item.lineName,
|
||||||
|
equName: item.equName,
|
||||||
|
productSize: item.productSize,
|
||||||
|
orderName: item.orderName,
|
||||||
|
externalCode: item.externalCode,
|
||||||
|
totalProduction: item.totalProduction ?? '-'
|
||||||
|
}
|
||||||
|
if (item.det) {
|
||||||
|
count += 1
|
||||||
|
item.det.forEach(obj => {
|
||||||
|
// Step2: 设置动态props
|
||||||
|
if (!this.dynamicPropSet) {
|
||||||
|
this.tableProps.push({
|
||||||
|
label: moment(obj.recordTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
children: [
|
||||||
|
// { prop: obj.recordTime + '-inputNum', label: i18n.t('module.factory.realtime.equipment.input') },
|
||||||
|
// { prop: obj.recordTime + '-outputNum', label: i18n.t('module.factory.realtime.equipment.output') },
|
||||||
|
// { prop: obj.recordTime + '-scrapNum', label: i18n.t('module.factory.realtime.equipment.scrapNum') },
|
||||||
|
// {
|
||||||
|
// prop: obj.recordTime + '-scrapRate',
|
||||||
|
// label: i18n.t('module.factory.realtime.equipment.scrapRate')
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
arrayItem.forEach(item => {
|
// console.log('==> ',obj.recordTime, obj.inputNum, obj.outputNum, obj.scrapNum, obj.scrapRate)
|
||||||
// console.log('========= ', item.equName, ' ==========')
|
Object.defineProperty(newItem, obj.recordTime + '-inputNum', {
|
||||||
const newItem = {
|
value: obj.inputNum ?? '-',
|
||||||
equId: item.equId,
|
enumerable: true,
|
||||||
lineName: item.lineName,
|
writable: true
|
||||||
equName: item.equName,
|
})
|
||||||
productSize: item.productSize,
|
Object.defineProperty(newItem, obj.recordTime + '-outputNum', {
|
||||||
orderName: item.orderName,
|
value: obj.outputNum ?? '-',
|
||||||
externalCode: item.externalCode,
|
enumerable: true,
|
||||||
totalProduction: item.totalProduction ?? '-'
|
writable: true
|
||||||
}
|
})
|
||||||
if (item.det) {
|
Object.defineProperty(newItem, obj.recordTime + '-scrapNum', {
|
||||||
count += 1
|
value: obj.scrapNum ?? '-',
|
||||||
item.det.forEach(obj => {
|
enumerable: true,
|
||||||
// Step2: 设置动态props
|
writable: true
|
||||||
if (!this.dynamicPropSet) {
|
})
|
||||||
this.tableProps.push({
|
Object.defineProperty(newItem, obj.recordTime + '-scrapRate', {
|
||||||
label: moment(obj.recordTime).format('YYYY-MM-DD HH:mm:ss'),
|
value: obj.scrapRate ?? '-',
|
||||||
children: [
|
enumerable: true,
|
||||||
// { prop: obj.recordTime + '-inputNum', label: i18n.t('module.factory.realtime.equipment.input') },
|
writable: true
|
||||||
// { prop: obj.recordTime + '-outputNum', label: i18n.t('module.factory.realtime.equipment.output') },
|
})
|
||||||
// { prop: obj.recordTime + '-scrapNum', label: i18n.t('module.factory.realtime.equipment.scrapNum') },
|
Object.defineProperty(newItem, 'recordTime', {
|
||||||
// {
|
value: obj.recordTime,
|
||||||
// prop: obj.recordTime + '-scrapRate',
|
enumerable: true,
|
||||||
// label: i18n.t('module.factory.realtime.equipment.scrapRate')
|
writable: true
|
||||||
// }
|
})
|
||||||
]
|
})
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// console.log('==> ',obj.recordTime, obj.inputNum, obj.outputNum, obj.scrapNum, obj.scrapRate)
|
if (!this.dynamicPropSet) this.dynamicPropSet = true
|
||||||
Object.defineProperty(newItem, obj.recordTime + '-inputNum', {
|
this.tableData.push(newItem)
|
||||||
value: obj.inputNum ?? '-',
|
}
|
||||||
enumerable: true,
|
})
|
||||||
writable: true
|
|
||||||
})
|
|
||||||
Object.defineProperty(newItem, obj.recordTime + '-outputNum', {
|
|
||||||
value: obj.outputNum ?? '-',
|
|
||||||
enumerable: true,
|
|
||||||
writable: true
|
|
||||||
})
|
|
||||||
Object.defineProperty(newItem, obj.recordTime + '-scrapNum', {
|
|
||||||
value: obj.scrapNum ?? '-',
|
|
||||||
enumerable: true,
|
|
||||||
writable: true
|
|
||||||
})
|
|
||||||
Object.defineProperty(newItem, obj.recordTime + '-scrapRate', {
|
|
||||||
value: obj.scrapRate ?? '-',
|
|
||||||
enumerable: true,
|
|
||||||
writable: true
|
|
||||||
})
|
|
||||||
Object.defineProperty(newItem, 'recordTime', {
|
|
||||||
value: obj.recordTime,
|
|
||||||
enumerable: true,
|
|
||||||
writable: true
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!this.dynamicPropSet) this.dynamicPropSet = true
|
this.$set(this.equipmentCount, [this.rowNum], count)
|
||||||
this.tableData.push(newItem)
|
this.rowNum += count
|
||||||
}
|
})
|
||||||
})
|
},
|
||||||
|
setStaticTableProps() {
|
||||||
|
// Step1: 设置静态的 table props
|
||||||
|
const staticTableProps = [
|
||||||
|
// { prop: 'lineName', label: i18n.t('module.factory.realtime.equipment.pl'), fixed: true },
|
||||||
|
// { prop: 'orderName', label: i18n.t('module.factory.realtime.equipment.currOrder'), fixed: true },
|
||||||
|
// { prop: 'productSize', label: i18n.t('module.factory.realtime.equipment.pSpecs'), fixed: true },
|
||||||
|
// { prop: 'equName', label: i18n.t('module.factory.realtime.equipment.eqName'), fixed: true },
|
||||||
|
// { prop: 'totalProduction', label: i18n.t('module.factory.realtime.equipment.produceTotal'), fixed: true }
|
||||||
|
]
|
||||||
|
this.tableProps = staticTableProps
|
||||||
|
},
|
||||||
|
|
||||||
this.$set(this.equipmentCount, [this.rowNum], count)
|
spanMethod({ row, column, rowIndex, columnIndex }) {
|
||||||
this.rowNum += count
|
// 设置合并行列的方式
|
||||||
})
|
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
|
||||||
},
|
// 前3列需要合并多行
|
||||||
setStaticTableProps() {
|
|
||||||
// Step1: 设置静态的 table props
|
|
||||||
const staticTableProps = [
|
|
||||||
// { prop: 'lineName', label: i18n.t('module.factory.realtime.equipment.pl'), fixed: true },
|
|
||||||
// { prop: 'orderName', label: i18n.t('module.factory.realtime.equipment.currOrder'), fixed: true },
|
|
||||||
// { prop: 'productSize', label: i18n.t('module.factory.realtime.equipment.pSpecs'), fixed: true },
|
|
||||||
// { prop: 'equName', label: i18n.t('module.factory.realtime.equipment.eqName'), fixed: true },
|
|
||||||
// { prop: 'totalProduction', label: i18n.t('module.factory.realtime.equipment.produceTotal'), fixed: true }
|
|
||||||
]
|
|
||||||
this.tableProps = staticTableProps
|
|
||||||
},
|
|
||||||
|
|
||||||
spanMethod({ row, column, rowIndex, columnIndex }) {
|
if (this.equipmentCount[rowIndex]) {
|
||||||
// 设置合并行列的方式
|
// 如果找到需要合并的行号
|
||||||
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
|
return {
|
||||||
// 前3列需要合并多行
|
rowspan: this.equipmentCount[rowIndex],
|
||||||
|
colspan: 1
|
||||||
if (this.equipmentCount[rowIndex]) {
|
}
|
||||||
// 如果找到需要合并的行号
|
} else {
|
||||||
return {
|
return {
|
||||||
rowspan: this.equipmentCount[rowIndex],
|
rowspan: 0,
|
||||||
colspan: 1
|
colspan: 0
|
||||||
}
|
}
|
||||||
} else {
|
}
|
||||||
return {
|
}
|
||||||
rowspan: 0,
|
}
|
||||||
colspan: 0
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user