diff --git a/src/views/monitoring/equipmentRecentHours/index.vue b/src/views/monitoring/equipmentRecentHours/index.vue
new file mode 100644
index 00000000..d6df828b
--- /dev/null
+++ b/src/views/monitoring/equipmentRecentHours/index.vue
@@ -0,0 +1,455 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-08-04 14:44:58
+    description: 设备生产24小时记录
+-->
+
+<template>
+	<div class="app-container">
+		<SearchBar
+			:formConfigs="[{ label: '近24小时检测记录', type: 'title' }]"
+			ref="search-bar" />
+		<!-- <pre><code v-html="jsondemo"></code></pre> -->
+
+		<el-skeleton v-if="initing" :rows="6" animated />
+		<base-table
+			v-else
+			:span-method="mergeColumnHandler"
+			:table-props="tableProps"
+			:table-data="list"
+			@emitFun="handleEmitFun"></base-table>
+		<!-- :page="queryParams.pageNo"
+			:limit="queryParams.pageSize" -->
+	</div>
+</template>
+
+<script>
+import response from './response.json';
+import { handleNameData, handleDynamicData } from '@/utils/dynamicProps';
+// import hljs from 'highlight.js/lib/highlight';
+// import json from 'highlight.js/lib/languages/json';
+// import 'highlight.js/styles/github-gist.css';
+
+// hljs.registerLanguage('json', json);
+
+export default {
+	name: 'QualityRecentHours',
+	components: {},
+	props: {},
+	data() {
+		return {
+			initing: false,
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+			},
+			// jsondemo: '',
+			list: [
+				// {
+				// 	inspectionContent: '检测内容1',
+				// 	'2023-03-18T00:00:00-产线1': '产线1-asdf',
+				// 	'2023-03-18T01:00:00-产线2': '产线2-kldf',
+				// 	'2023-03-18T02:00:00-产线1': '产线1-vasdkj',
+				// },
+				{
+					productLine: '产线1',
+					specification: ['80*11', '100*10'].join(','),
+					equipmentName: '上片机',
+					totalQuantity: 1000,
+					'l-1__in': 100,
+					'l-1__out': 99,
+					'l-1__nok': 1,
+					'l-1__ratio': 1,
+					'l-2__in': 100,
+					'l-2__out': 99,
+					'l-2__nok': 1,
+					'l-2__ratio': 1,
+					'l-3__in': 100,
+					'l-3__out': 99,
+					'l-3__nok': 1,
+					'l-3__ratio': 1,
+					'l-4__in': 100,
+					'l-4__out': 99,
+					'l-4__nok': 1,
+					'l-4__ratio': 1,
+				},
+				{
+					productLine: '产线1',
+					specification: ['80*11', '100*10'].join(','),
+					equipmentName: '磨边机',
+					totalQuantity: 1000,
+					'l-1__in': 100,
+					'l-1__out': 99,
+					'l-1__nok': 1,
+					'l-1__ratio': 1,
+					'l-2__in': 100,
+					'l-2__out': 99,
+					'l-2__nok': 1,
+					'l-2__ratio': 1,
+					'l-3__in': 100,
+					'l-3__out': 99,
+					'l-3__nok': 1,
+					'l-3__ratio': 1,
+					'l-4__in': 100,
+					'l-4__out': 99,
+					'l-4__nok': 1,
+					'l-4__ratio': 1,
+				},
+				{
+					productLine: '产线1',
+					specification: ['80*11', '100*10'].join(','),
+					equipmentName: '清洗机',
+					totalQuantity: 1000,
+					'l-1__in': 100,
+					'l-1__out': 99,
+					'l-1__nok': 1,
+					'l-1__ratio': 1,
+					'l-2__in': 100,
+					'l-2__out': 99,
+					'l-2__nok': 1,
+					'l-2__ratio': 1,
+					'l-3__in': 100,
+					'l-3__out': 99,
+					'l-3__nok': 1,
+					'l-3__ratio': 1,
+					'l-4__in': 100,
+					'l-4__out': 99,
+					'l-4__nok': 1,
+					'l-4__ratio': 1,
+				},
+				// 产线2
+				{
+					productLine: '产线2',
+					specification: ['80*11', '100*10'].join(','),
+					equipmentName: '上片机',
+					totalQuantity: 1000,
+					'l-1__in': 100,
+					'l-1__out': 99,
+					'l-1__nok': 1,
+					'l-1__ratio': 1,
+					'l-2__in': 100,
+					'l-2__out': 99,
+					'l-2__nok': 1,
+					'l-2__ratio': 1,
+					'l-3__in': 100,
+					'l-3__out': 99,
+					'l-3__nok': 1,
+					'l-3__ratio': 1,
+					'l-4__in': 100,
+					'l-4__out': 99,
+					'l-4__nok': 1,
+					'l-4__ratio': 1,
+				},
+				{
+					productLine: '产线2',
+					specification: ['80*11', '100*10'].join(','),
+					equipmentName: '磨边机',
+					totalQuantity: 1000,
+					'l-1__in': 100,
+					'l-1__out': 99,
+					'l-1__nok': 1,
+					'l-1__ratio': 1,
+					'l-2__in': 100,
+					'l-2__out': 99,
+					'l-2__nok': 1,
+					'l-2__ratio': 1,
+					'l-3__in': 100,
+					'l-3__out': 99,
+					'l-3__nok': 1,
+					'l-3__ratio': 1,
+					'l-4__in': 100,
+					'l-4__out': 99,
+					'l-4__nok': 1,
+					'l-4__ratio': 1,
+				},
+				{
+					productLine: '产线2',
+					specification: ['80*11', '100*10'].join(','),
+					equipmentName: '清洗机',
+					totalQuantity: 1000,
+					'l-1__in': 100,
+					'l-1__out': 99,
+					'l-1__nok': 1,
+					'l-1__ratio': 1,
+					'l-2__in': 100,
+					'l-2__out': 99,
+					'l-2__nok': 1,
+					'l-2__ratio': 1,
+					'l-3__in': 100,
+					'l-3__out': 99,
+					'l-3__nok': 1,
+					'l-3__ratio': 1,
+					'l-4__in': 100,
+					'l-4__out': 99,
+					'l-4__nok': 1,
+					'l-4__ratio': 1,
+				},
+			],
+			tableProps: [
+				{ prop: 'productLine', label: '产线', align: 'center' },
+				{ prop: 'specification', label: '规格', align: 'center' },
+				{ prop: 'equipmentName', label: '设备', align: 'center' },
+				{ prop: 'totalQuantity', label: '生产总数', align: 'center' },
+				{
+					prop: 'l-1',
+					label: 'l-1',
+					align: 'center',
+					children: [
+						{ prop: 'l-1__in', label: '进数据', align: 'center' },
+						{ prop: 'l-1__out', label: '出数据', align: 'center' },
+						{ prop: 'l-1__nok', label: '报废数据', align: 'center' },
+						{ prop: 'l-1__ratio', label: '报废率', align: 'center' },
+					],
+				},
+				{
+					prop: 'l-2',
+					label: 'l-2',
+					align: 'center',
+					children: [
+						{ prop: 'l-2__in', label: '进数据', align: 'center' },
+						{ prop: 'l-2__out', label: '出数据', align: 'center' },
+						{ prop: 'l-2__nok', label: '报废数据', align: 'center' },
+						{ prop: 'l-2__ratio', label: '报废率', align: 'center' },
+					],
+				},
+				{
+					prop: 'l-3',
+					label: 'l-3',
+					align: 'center',
+					children: [
+						{ prop: 'l-3__in', label: '进数据', align: 'center' },
+						{ prop: 'l-3__out', label: '出数据', align: 'center' },
+						{ prop: 'l-3__nok', label: '报废数据', align: 'center' },
+						{ prop: 'l-3__ratio', label: '报废率', align: 'center' },
+					],
+				},
+			],
+
+			equipments: [
+				{ id: 1, name: '上片机' },
+				{ id: 2, name: '打磨机' },
+				{ id: 3, name: '清洗机' },
+				{ id: 4, name: '打孔机' },
+			],
+
+			products: [
+				{ id: 'p1', name: '产品1', spec: '100*80' },
+				{ id: 'p2', name: '产品2', spec: '99*99' },
+				{ id: 'p3', name: '产品3', spec: '1*100' },
+			],
+
+			res: {
+				code: 0,
+				msg: '',
+				data: [
+					{
+						equipmentId: 1,
+						equipmentName: '上片机',
+						lineId: 'mock-line-id-1',
+						lineName: '产线1',
+						sectionId: 'mock-section-id-1',
+						sectionName: '工段1',
+						inQuantity: 100,
+						outQuantity: 99,
+						okQuantity: 99,
+						nokQuantity: 1,
+						scrapRation: 0.01,
+						passRate: 99,
+						recordTime: 1675180800000,
+						productIds: ['p1', 'p2'],
+					},
+					{
+						equipmentId: 2,
+						equipmentName: '打磨机',
+						lineId: 'mock-line-id-1',
+						lineName: '产线1',
+						sectionId: 'mock-section-id-1',
+						sectionName: '工段1',
+						inQuantity: 100,
+						outQuantity: 99,
+						okQuantity: 99,
+						nokQuantity: 1,
+						scrapRation: 0.01,
+						passRate: 99,
+						recordTime: 1675180800000,
+						productIds: ['p3', 'p2'],
+					},
+					{
+						equipmentId: 3,
+						equipmentName: '清洗机',
+						lineId: 'mock-line-id-1',
+						lineName: '产线1',
+						sectionId: 'mock-section-id-1',
+						sectionName: '工段1',
+						inQuantity: 100,
+						outQuantity: 99,
+						okQuantity: 99,
+						nokQuantity: 1,
+						scrapRation: 0.01,
+						passRate: 99,
+						recordTime: 1675180800000,
+						productIds: ['p1', 'p3'],
+					},
+				],
+			},
+
+			HTTPResponse: {
+				code: 0,
+				msg: 'success',
+				data: [
+					// 这是一行数据
+					{
+						productLine: '产线001',
+						spectification: '规格1、规格2、规格3',
+						data: [
+							{
+								equipmentName: '上片机',
+								totalQuantity: 24444,
+								1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
+								1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
+								// more 时间戳数据
+							},
+							{
+								equipmentName: '磨边机',
+								totalQuantity: 222222,
+								1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
+								1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
+								// more 时间戳数据
+							},
+							{
+								equipmentName: '清洗机',
+								totalQuantity: 222,
+								1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
+								1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
+								// more 时间戳数据
+							},
+							// more 设备数据
+						],
+					},
+					// 这是一行数据
+					{
+						productLine: '产线002',
+						spectification: '规格1、规格2、规格3',
+						data: [
+							{
+								equipmentName: '上片机',
+								totalQuantity: 24444,
+								1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
+								1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
+								// more 时间戳数据
+							},
+							{
+								equipmentName: '磨边机',
+								totalQuantity: 222222,
+								1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
+								1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
+								// more 时间戳数据
+							},
+							{
+								equipmentName: '清洗机',
+								totalQuantity: 222,
+								1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
+								1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
+								// more 时间戳数据
+							},
+							// more 设备数据
+						],
+					},
+				],
+			},
+			spanInfo: {},
+		};
+	},
+	computed: {},
+	mounted() {
+		this.getList();
+	},
+	methods: {
+		/** 构建tableProps - 依据第一个元素所提供的信息 */
+		buildProps(item) {
+			const { data, productLine, specification } = item;
+			const props = [{ prop: 'productLine', label: '产线', align: 'center' }];
+
+			this.tableProps = props;
+		},
+
+		/** 把 list 里的数据转换成 tableProps 对应的格式 */
+		convertList() {
+			const row = 0; // 记录处理到的行号，并在恰当的时候加入到 this.spanInfo 中
+		},
+
+		/** 合并table列的规则 */
+		mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
+			console.log('handle merge column', row, column, rowIndex, columnIndex);
+			if (columnIndex == 0 || columnIndex == 1 || columnIndex == 3) {
+				return [
+					this.spanInfo[rowIndex], // row span
+					1, // col span
+				];
+			}
+			return { rowspan: 3, colspan: 1 };
+		},
+
+		async getList() {
+			const { data } = await this.$axios({
+				url: '/monitoring/equipment-monitor/recent-24-hours',
+				method: 'get',
+			});
+			console.log('recent-24', data);
+			// const {
+			// 	// data: { nameData },
+			// 	code,
+			// } = response;
+			// this.jsondemo = hljs.highlight(
+			// 	'json',
+			// 	JSON.stringify(response, null, 2),
+			// 	true
+			// ).value;
+
+			// this.buildProps(data[0]);
+
+			// this.initing = true;
+			// const dynamicProps = handleNameData(nameData);
+			// this.tableProps.push(...dynamicProps);
+			// const dataList = handleDynamicData(dyanmicData);
+			// this.list = dataList;
+			// this.queryParams.pageSize = dataList.length;
+
+			// setTimeout(() => {
+			// 	this.initing = false;
+			// }, 1000);
+		},
+
+		handleEmitFun(payload) {
+			console.log('payload', payload);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+::-webkit-scrollbar {
+	display: none;
+}
+
+pre {
+	margin: 10px;
+	background: #f6f8faf6;
+	border: 1px solid #e1e4e8;
+	padding: 12px;
+	border-radius: 12px;
+	position: fixed;
+	// top: 15vh;
+	top: 10vh;
+	left: 0;
+	max-height: 80vh;
+	overflow-y: auto;
+	z-index: 100000;
+	box-shadow: 0 0 32px 12px #0001;
+}
+
+code {
+	font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace;
+}
+</style>
diff --git a/src/views/monitoring/equipmentRecentHours/props.json b/src/views/monitoring/equipmentRecentHours/props.json
new file mode 100644
index 00000000..a8976b08
--- /dev/null
+++ b/src/views/monitoring/equipmentRecentHours/props.json
@@ -0,0 +1,80 @@
+{
+	"tableProps": [
+		{
+			"prop": "inspectionContent",
+			"label": "检测内容",
+			"align": "center"
+		},
+		{
+			"prop": "2023-03-18T00:00:00",
+			"label": "2023-03-18T00:00:00",
+			"align": "center",
+			"children": [
+				{
+					"prop": "2023-03-18T00:00:00-产线1",
+					"label": "产线1",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T00:00:00-产线2",
+					"label": "产线2",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T00:00:00-产线3",
+					"label": "产线3",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T00:00:00-产线4",
+					"label": "产线4",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T00:00:00-产线5",
+					"label": "产线5",
+					"align": "center"
+				}
+			]
+		},
+		{
+			"prop": "2023-03-18T01:00:00",
+			"label": "2023-03-18T01:00:00",
+			"align": "center",
+			"children": [
+				{
+					"prop": "2023-03-18T01:00:00-产线1",
+					"label": "产线1",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T01:00:00-产线2",
+					"label": "产线2",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T01:00:00-产线3",
+					"label": "产线3",
+					"align": "center"
+				}
+			]
+		},
+		{
+			"prop": "2023-03-18T02:00:00",
+			"label": "2023-03-18T02:00:00",
+			"align": "center",
+			"children": [
+				{
+					"prop": "2023-03-18T02:00:00-产线1",
+					"label": "产线1",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T02:00:00-产线2",
+					"label": "产线2",
+					"align": "center"
+				}
+			]
+		}
+	]
+}
diff --git a/src/views/monitoring/equipmentRecentHours/response.json b/src/views/monitoring/equipmentRecentHours/response.json
new file mode 100644
index 00000000..9524dfb4
--- /dev/null
+++ b/src/views/monitoring/equipmentRecentHours/response.json
@@ -0,0 +1,176 @@
+{
+	"code": 0,
+	"data": {
+		"data": [
+			{
+				"data": [
+					{
+						"id": "测试222023-08-09T02:00",
+						"parentId": "测试22",
+						"dynamicName": "2023-08-09T02:00",
+						"dynamicValue": 1691517600000,
+						"children": [
+							{
+								"id": "1672847052717821953",
+								"parentId": "测试222023-08-09T02:00",
+								"dynamicName": "产线1",
+								"dynamicValue": 1
+							}
+						]
+					},
+					{
+						"id": "测试222023-08-09T08:00",
+						"parentId": "测试22",
+						"dynamicName": "2023-08-09T08:00",
+						"dynamicValue": 1691539200000,
+						"children": [
+							{
+								"id": "1672847052717821953",
+								"parentId": "测试222023-08-09T08:00",
+								"dynamicName": "产线1",
+								"dynamicValue": 1
+							}
+						]
+					},
+					{
+						"id": "测试222023-08-09T11:00",
+						"parentId": "测试22",
+						"dynamicName": "2023-08-09T11:00",
+						"dynamicValue": 1691550000000,
+						"children": [
+							{
+								"id": "1672847052717821953",
+								"parentId": "测试222023-08-09T11:00",
+								"dynamicName": "产线1",
+								"dynamicValue": 1
+							}
+						]
+					}
+				],
+				"inspectionDetContent": "测试22"
+			},
+			{
+				"data": [
+					{
+						"id": "测试112023-08-09T02:00",
+						"parentId": "测试11",
+						"dynamicName": "2023-08-09T02:00",
+						"dynamicValue": 1691517600000,
+						"children": [
+							{
+								"id": "1672847052717821954",
+								"parentId": "测试112023-08-09T02:00",
+								"dynamicName": "产线22",
+								"dynamicValue": 1
+							}
+						]
+					},
+					{
+						"id": "测试112023-08-09T08:00",
+						"parentId": "测试11",
+						"dynamicName": "2023-08-09T08:00",
+						"dynamicValue": 1691539200000,
+						"children": [
+							{
+								"id": "1672847052717821953",
+								"parentId": "测试112023-08-09T08:00",
+								"dynamicName": "产线1",
+								"dynamicValue": 1
+							}
+						]
+					},
+					{
+						"id": "测试112023-08-09T09:00",
+						"parentId": "测试11",
+						"dynamicName": "2023-08-09T09:00",
+						"dynamicValue": 1691542800000,
+						"children": [
+							{
+								"id": "1672847052717821954",
+								"parentId": "测试112023-08-09T09:00",
+								"dynamicName": "产线22",
+								"dynamicValue": 2
+							}
+						]
+					}
+				],
+				"inspectionDetContent": "测试11"
+			}
+		],
+		"nameData": [
+			{
+				"name": "2023-08-09T02:00",
+				"tree": 1,
+				"id": "测试222023-08-09T02:00",
+				"parentId": "测试22"
+			},
+			{
+				"name": "产线1",
+				"tree": 2,
+				"id": "1672847052717821953",
+				"parentId": "测试222023-08-09T02:00"
+			},
+			{
+				"name": "2023-08-09T08:00",
+				"tree": 1,
+				"id": "测试222023-08-09T08:00",
+				"parentId": "测试22"
+			},
+			{
+				"name": "产线1",
+				"tree": 2,
+				"id": "1672847052717821953",
+				"parentId": "测试222023-08-09T08:00"
+			},
+			{
+				"name": "2023-08-09T11:00",
+				"tree": 1,
+				"id": "测试222023-08-09T11:00",
+				"parentId": "测试22"
+			},
+			{
+				"name": "产线1",
+				"tree": 2,
+				"id": "1672847052717821953",
+				"parentId": "测试222023-08-09T11:00"
+			},
+			{
+				"name": "2023-08-09T02:00",
+				"tree": 1,
+				"id": "测试112023-08-09T02:00",
+				"parentId": "测试11"
+			},
+			{
+				"name": "产线22",
+				"tree": 2,
+				"id": "1672847052717821954",
+				"parentId": "测试112023-08-09T02:00"
+			},
+			{
+				"name": "2023-08-09T08:00",
+				"tree": 1,
+				"id": "测试112023-08-09T08:00",
+				"parentId": "测试11"
+			},
+			{
+				"name": "产线1",
+				"tree": 2,
+				"id": "1672847052717821953",
+				"parentId": "测试112023-08-09T08:00"
+			},
+			{
+				"name": "2023-08-09T09:00",
+				"tree": 1,
+				"id": "测试112023-08-09T09:00",
+				"parentId": "测试11"
+			},
+			{
+				"name": "产线22",
+				"tree": 2,
+				"id": "1672847052717821954",
+				"parentId": "测试112023-08-09T09:00"
+			}
+		]
+	},
+	"msg": ""
+}