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

@@ -10,11 +10,22 @@
 		<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="tableProps"
-        :data="tableData.length ? tableData : []"
-        :span-method="spanMethod"
+				: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>
@@ -28,7 +39,6 @@ import moment from 'moment'
 
 const fetchList = () => {}
 
-
 export default {
 	name: 'RealtimeDataOfEquipment',
 	components: { BaseTable, SmallTitle },
@@ -48,25 +58,25 @@ export default {
 	},
 	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)
+		// 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)
@@ -92,39 +102,33 @@ export default {
 		},
 
 		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.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)
+						equipment.lineName = item.lineName
 					})
-          // this.equipmentCountArray.push({ rowNum: this.rowNum, eqCount: count })
-          // this.$set(this.equipmentCount, [this.rowNum], count)
-          // this.rowNum += count
-          return newItemArray
 				}
+				return item.equDet
 			})
 		},
 
 		expandDataStepTwo() {
 			// 扩展服务器返回的数据第二阶段
-      // console.log('before step two: ', this.stepOneArray)
+			console.log('before step two: ', this.stepOneArray)
 			this.rowNum = 0
 
 			this.stepOneArray.forEach(arrayItem => {