mt-fe-group/mt-yd-ui
12
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

add spanMethod to base-table

Browse Source
This commit is contained in:
g7hoo 2022-08-23 11:11:51 +08:00
parent 4297798d44
commit 8f124e06b1
2 changed files with 220 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/base-table/index.vue
View File

@ -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: {

404
src/views/modules/monitoring/realtimeEquipment.vue
View File

@ -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() { expandDataStepOne() {
// this.rowNum = 0 this.stepOneArray = this.testData.data.map(item => {
// 扩展服务器返回的数据第一阶段 if (item.equDet) {
this.stepOneArray = this.testData.data.map(item => { item.equDet.forEach((equipment, index) => {
// console.log('handle row: ', this.rowNum) equipment.lineName = item.lineName
if (item.equDet) { })
// let count = 0 }
let newItem return item.equDet
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() { expandDataStepTwo() {
// 扩展服务器返回的数据第二阶段 // 扩展服务器返回的数据第二阶段
// console.log('before step two: ', this.stepOneArray) console.log('before step two: ', this.stepOneArray)
this.rowNum = 0 this.rowNum = 0
this.stepOneArray.forEach(arrayItem => { this.stepOneArray.forEach(arrayItem => {
let count = 0 let count = 0
arrayItem.forEach(item => { arrayItem.forEach(item => {
// console.log('========= ', item.equName, ' ==========') // console.log('========= ', item.equName, ' ==========')
const newItem = { const newItem = {
equId: item.equId, equId: item.equId,
lineName: item.lineName, lineName: item.lineName,
equName: item.equName, equName: item.equName,
productSize: item.productSize, productSize: item.productSize,
orderName: item.orderName, orderName: item.orderName,
externalCode: item.externalCode, externalCode: item.externalCode,
totalProduction: item.totalProduction ?? '-' totalProduction: item.totalProduction ?? '-'
} }
if (item.det) { if (item.det) {
count += 1 count += 1
item.det.forEach(obj => { item.det.forEach(obj => {
// Step2: 设置动态props // Step2: 设置动态props
if (!this.dynamicPropSet) { if (!this.dynamicPropSet) {
this.tableProps.push({ this.tableProps.push({
label: moment(obj.recordTime).format('YYYY-MM-DD HH:mm:ss'), label: moment(obj.recordTime).format('YYYY-MM-DD HH:mm:ss'),
children: [ children: [
// { prop: obj.recordTime + '-inputNum', label: i18n.t('module.factory.realtime.equipment.input') }, // { 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 + '-outputNum', label: i18n.t('module.factory.realtime.equipment.output') },
// { prop: obj.recordTime + '-scrapNum', label: i18n.t('module.factory.realtime.equipment.scrapNum') }, // { prop: obj.recordTime + '-scrapNum', label: i18n.t('module.factory.realtime.equipment.scrapNum') },
// { // {
// prop: obj.recordTime + '-scrapRate', // prop: obj.recordTime + '-scrapRate',
// label: i18n.t('module.factory.realtime.equipment.scrapRate') // label: i18n.t('module.factory.realtime.equipment.scrapRate')
// } // }
] ]
}) })
} }
// console.log('==> ',obj.recordTime, obj.inputNum, obj.outputNum, obj.scrapNum, obj.scrapRate) // console.log('==> ',obj.recordTime, obj.inputNum, obj.outputNum, obj.scrapNum, obj.scrapRate)
Object.defineProperty(newItem, obj.recordTime + '-inputNum', { Object.defineProperty(newItem, obj.recordTime + '-inputNum', {
value: obj.inputNum ?? '-', value: obj.inputNum ?? '-',
enumerable: true, enumerable: true,
writable: true writable: true
}) })
Object.defineProperty(newItem, obj.recordTime + '-outputNum', { Object.defineProperty(newItem, obj.recordTime + '-outputNum', {
value: obj.outputNum ?? '-', value: obj.outputNum ?? '-',
enumerable: true, enumerable: true,
writable: true writable: true
}) })
Object.defineProperty(newItem, obj.recordTime + '-scrapNum', { Object.defineProperty(newItem, obj.recordTime + '-scrapNum', {
value: obj.scrapNum ?? '-', value: obj.scrapNum ?? '-',
enumerable: true, enumerable: true,
writable: true writable: true
}) })
Object.defineProperty(newItem, obj.recordTime + '-scrapRate', { Object.defineProperty(newItem, obj.recordTime + '-scrapRate', {
value: obj.scrapRate ?? '-', value: obj.scrapRate ?? '-',
enumerable: true, enumerable: true,
writable: true writable: true
}) })
Object.defineProperty(newItem, 'recordTime', { Object.defineProperty(newItem, 'recordTime', {
value: obj.recordTime, value: obj.recordTime,
enumerable: true, enumerable: true,
writable: true writable: true
}) })
}) })
if (!this.dynamicPropSet) this.dynamicPropSet = true if (!this.dynamicPropSet) this.dynamicPropSet = true
this.tableData.push(newItem) this.tableData.push(newItem)
} }
}) })
this.$set(this.equipmentCount, [this.rowNum], count) this.$set(this.equipmentCount, [this.rowNum], count)
this.rowNum += count this.rowNum += count
}) })
}, },
setStaticTableProps() { setStaticTableProps() {
// Step1: 设置静态的 table props // Step1: 设置静态的 table props
const staticTableProps = [ const staticTableProps = [
// { prop: 'lineName', label: i18n.t('module.factory.realtime.equipment.pl'), fixed: true }, // { 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: 'orderName', label: i18n.t('module.factory.realtime.equipment.currOrder'), fixed: true },
// { prop: 'productSize', label: i18n.t('module.factory.realtime.equipment.pSpecs'), 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: 'equName', label: i18n.t('module.factory.realtime.equipment.eqName'), fixed: true },
// { prop: 'totalProduction', label: i18n.t('module.factory.realtime.equipment.produceTotal'), fixed: true } // { prop: 'totalProduction', label: i18n.t('module.factory.realtime.equipment.produceTotal'), fixed: true }
] ]
this.tableProps = staticTableProps this.tableProps = staticTableProps
}, },
spanMethod({ row, column, rowIndex, columnIndex }) { spanMethod({ row, column, rowIndex, columnIndex }) {
// 设置合并行列的方式 // 设置合并行列的方式
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) { if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
// 前3列需要合并多行 // 前3列需要合并多行
if (this.equipmentCount[rowIndex]) { if (this.equipmentCount[rowIndex]) {
// 如果找到需要合并的行号 // 如果找到需要合并的行号
return { return {
rowspan: this.equipmentCount[rowIndex], rowspan: this.equipmentCount[rowIndex],
colspan: 1 colspan: 1
} }
} else { } else {
return { return {
rowspan: 0, rowspan: 0,
colspan: 0 colspan: 0
} }
} }
} }
} }
} }
} }
</script> </script>