add spanMethod to base-table

src/components/base-table/index.vue

@@ -1,6 +1,14 @@
 <template>
 	<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">
 				<!-- 带type的表头 -->
@@ -61,6 +69,13 @@ export default {
 		maxHeight: {
 			type: Number,
 			default: 500
+		},
+		spanMethod: {
+			type: Function,
+			default: () => {
+				() => [0, 0]
+			},
+			required: false
 		}
 	},
 	filters: {

src/views/modules/monitoring/realtimeEquipment.vue

@@ -6,18 +6,29 @@
  * @Description: 设备生产实时数据
 -->
 <template>
-  <div>
-    <div class="app-container">
-      <!-- <small-title :size="'md'">{{ $t('module.factory.realtime.equipment.name') }}</small-title> -->
-      <small-title :size="'md'">设备生产实时数据</small-title>
-      <base-table
-        v-if="loadTable"
-        :table-head-configs="tableProps"
-        :data="tableData.length ? tableData : []"
-        :span-method="spanMethod"
-      />
-    </div>
-  </div>
+	<div>
+		<div class="app-container">
+			<!-- <small-title :size="'md'">{{ $t('module.factory.realtime.equipment.name') }}</small-title> -->
+			<small-title :size="'md'">设备生产实时数据</small-title>
+			<!-- <base-table v-if="loadTable" :table-head-configs="tableProps" :data="tableData.length ? tableData : []" :span-method="spanMethod" /> -->
+			<base-table
+				v-if="loadTable"
+				:table-head-configs="[
+					{ type: 'index', label: '序号' },
+					{ prop: 'name', label: '名称' },
+					{ prop: 'code', label: '编码' },
+					{ 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>
 
 <script>
@@ -28,206 +39,199 @@ import moment from 'moment'
 
 const fetchList = () => {}
 
-
 export default {
-  name: 'RealtimeDataOfEquipment',
-  components: { BaseTable, SmallTitle },
-  data() {
-    return {
-      loadTable: false,
-      tableProps: [{ label: 'default', prop: 'default' }],
-      stepOneArray: [],
-      tableData: [],
-      testData: null,
-      equipmentCount: {}, // 每个产线的设备数量记录
-      dynamicPropSet: false, // 是否设置过动态prop
-      listLoading: false,
-      rowNum: 0,
-      intervalId: null
-    }
-  },
-  created() {
-    this.clearData()
-    fetchList('equipment').then(res => {
-      this.testData = res
-      this.handleData()
-    })
-
-    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()
-    },
-
-    handleData() {
-      this.expandDataStepOne()
-      this.expandDataStepTwo()
-      // console.log('span data: ', this.equipmentCount)
-      this.loadTable = true
-    },
-
-    fetchList() {
-      
-    },
-
-    expandDataStepOne() {
-      // this.rowNum = 0
-      // 扩展服务器返回的数据第一阶段
-      this.stepOneArray = this.testData.data.map(item => {
-        // 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() {
-      // 扩展服务器返回的数据第二阶段
-      // console.log('before step two: ', this.stepOneArray)
-      this.rowNum = 0
-
-      this.stepOneArray.forEach(arrayItem => {
-        let count = 0
-
-        arrayItem.forEach(item => {
-          // 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')
-                    // }
-                  ]
-                })
-              }
-
-              // console.log('==> ',obj.recordTime, obj.inputNum, obj.outputNum, obj.scrapNum, obj.scrapRate)
-              Object.defineProperty(newItem, obj.recordTime + '-inputNum', {
-                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.tableData.push(newItem)
-          }
-        })
-
-        this.$set(this.equipmentCount, [this.rowNum], count)
-        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
-    },
-
-    spanMethod({ row, column, rowIndex, columnIndex }) {
-      // 设置合并行列的方式
-      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
-        // 前3列需要合并多行
-
-        if (this.equipmentCount[rowIndex]) {
-          // 如果找到需要合并的行号
-          return {
-            rowspan: this.equipmentCount[rowIndex],
-            colspan: 1
-          }
-        } else {
-          return {
-            rowspan: 0,
-            colspan: 0
-          }
-        }
-      }
-    }
-  }
+	name: 'RealtimeDataOfEquipment',
+	components: { BaseTable, SmallTitle },
+	data() {
+		return {
+			loadTable: false,
+			tableProps: [{ label: 'default', prop: 'default' }],
+			stepOneArray: [],
+			tableData: [],
+			testData: null,
+			equipmentCount: {}, // 每个产线的设备数量记录
+			dynamicPropSet: false, // 是否设置过动态prop
+			listLoading: false,
+			rowNum: 0,
+			intervalId: null
+		}
+	},
+	created() {
+		this.clearData()
+		// fetchList('equipment').then(res => {
+		// 	this.testData = res
+		// 	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()
+		},
+
+		handleData() {
+			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
+			})
+		},
+
+		expandDataStepTwo() {
+			// 扩展服务器返回的数据第二阶段
+			console.log('before step two: ', this.stepOneArray)
+			this.rowNum = 0
+
+			this.stepOneArray.forEach(arrayItem => {
+				let count = 0
+
+				arrayItem.forEach(item => {
+					// 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')
+										// }
+									]
+								})
+							}
+
+							// console.log('==> ',obj.recordTime, obj.inputNum, obj.outputNum, obj.scrapNum, obj.scrapRate)
+							Object.defineProperty(newItem, obj.recordTime + '-inputNum', {
+								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.tableData.push(newItem)
+					}
+				})
+
+				this.$set(this.equipmentCount, [this.rowNum], count)
+				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
+		},
+
+		spanMethod({ row, column, rowIndex, columnIndex }) {
+			// 设置合并行列的方式
+			if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
+				// 前3列需要合并多行
+
+				if (this.equipmentCount[rowIndex]) {
+					// 如果找到需要合并的行号
+					return {
+						rowspan: this.equipmentCount[rowIndex],
+						colspan: 1
+					}
+				} else {
+					return {
+						rowspan: 0,
+						colspan: 0
+					}
+				}
+			}
+		}
+	}
 }
 </script>