diff --git a/public/index.html b/public/index.html
index be59532f..589910ee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,216 +1,215 @@
 <!DOCTYPE html>
 <html>
+	<head>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+		<meta name="renderer" content="webkit" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+		<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+		<title><%= webpackConfig.name %></title>
+		<!--[if lt IE 11]>
+			<script>
+				window.location.href = 'html/ie.html';
+			</script>
+		<![endif]-->
+		<style>
+			html,
+			body,
+			#app {
+				height: 100%;
+				margin: 0px;
+				padding: 0px;
+			}
 
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="renderer" content="webkit">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <title>
-    <%= webpackConfig.name %>
-  </title>
-  <!--[if lt IE 11]><script>window.location.href='html/ie.html';</script><![endif]-->
-  <style>
-    html,
-    body,
-    #app {
-      height: 100%;
-      margin: 0px;
-      padding: 0px;
-    }
+			.chromeframe {
+				margin: 0.2em 0;
+				background: #ccc;
+				color: #000;
+				padding: 0.2em 0;
+			}
 
-    .chromeframe {
-      margin: 0.2em 0;
-      background: #ccc;
-      color: #000;
-      padding: 0.2em 0;
-    }
+			#loader-wrapper {
+				position: fixed;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				z-index: 999999;
+			}
 
-    #loader-wrapper {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 999999;
-    }
+			#loader {
+				display: block;
+				position: relative;
+				left: 50%;
+				top: 50%;
+				width: 150px;
+				height: 150px;
+				margin: -75px 0 0 -75px;
+				border-radius: 50%;
+				border: 3px solid transparent;
+				border-top-color: #fff;
+				-webkit-animation: spin 2s linear infinite;
+				-ms-animation: spin 2s linear infinite;
+				-moz-animation: spin 2s linear infinite;
+				-o-animation: spin 2s linear infinite;
+				animation: spin 2s linear infinite;
+				z-index: 1001;
+			}
 
-    #loader {
-      display: block;
-      position: relative;
-      left: 50%;
-      top: 50%;
-      width: 150px;
-      height: 150px;
-      margin: -75px 0 0 -75px;
-      border-radius: 50%;
-      border: 3px solid transparent;
-      border-top-color: #FFF;
-      -webkit-animation: spin 2s linear infinite;
-      -ms-animation: spin 2s linear infinite;
-      -moz-animation: spin 2s linear infinite;
-      -o-animation: spin 2s linear infinite;
-      animation: spin 2s linear infinite;
-      z-index: 1001;
-    }
+			#loader:before {
+				content: '';
+				position: absolute;
+				top: 5px;
+				left: 5px;
+				right: 5px;
+				bottom: 5px;
+				border-radius: 50%;
+				border: 3px solid transparent;
+				border-top-color: #fff;
+				-webkit-animation: spin 3s linear infinite;
+				-moz-animation: spin 3s linear infinite;
+				-o-animation: spin 3s linear infinite;
+				-ms-animation: spin 3s linear infinite;
+				animation: spin 3s linear infinite;
+			}
 
-    #loader:before {
-      content: "";
-      position: absolute;
-      top: 5px;
-      left: 5px;
-      right: 5px;
-      bottom: 5px;
-      border-radius: 50%;
-      border: 3px solid transparent;
-      border-top-color: #FFF;
-      -webkit-animation: spin 3s linear infinite;
-      -moz-animation: spin 3s linear infinite;
-      -o-animation: spin 3s linear infinite;
-      -ms-animation: spin 3s linear infinite;
-      animation: spin 3s linear infinite;
-    }
+			#loader:after {
+				content: '';
+				position: absolute;
+				top: 15px;
+				left: 15px;
+				right: 15px;
+				bottom: 15px;
+				border-radius: 50%;
+				border: 3px solid transparent;
+				border-top-color: #fff;
+				-moz-animation: spin 1.5s linear infinite;
+				-o-animation: spin 1.5s linear infinite;
+				-ms-animation: spin 1.5s linear infinite;
+				-webkit-animation: spin 1.5s linear infinite;
+				animation: spin 1.5s linear infinite;
+			}
 
-    #loader:after {
-      content: "";
-      position: absolute;
-      top: 15px;
-      left: 15px;
-      right: 15px;
-      bottom: 15px;
-      border-radius: 50%;
-      border: 3px solid transparent;
-      border-top-color: #FFF;
-      -moz-animation: spin 1.5s linear infinite;
-      -o-animation: spin 1.5s linear infinite;
-      -ms-animation: spin 1.5s linear infinite;
-      -webkit-animation: spin 1.5s linear infinite;
-      animation: spin 1.5s linear infinite;
-    }
+			@-webkit-keyframes spin {
+				0% {
+					-webkit-transform: rotate(0deg);
+					-ms-transform: rotate(0deg);
+					transform: rotate(0deg);
+				}
 
+				100% {
+					-webkit-transform: rotate(360deg);
+					-ms-transform: rotate(360deg);
+					transform: rotate(360deg);
+				}
+			}
 
-    @-webkit-keyframes spin {
-      0% {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-      }
+			@keyframes spin {
+				0% {
+					-webkit-transform: rotate(0deg);
+					-ms-transform: rotate(0deg);
+					transform: rotate(0deg);
+				}
 
-      100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
-      }
-    }
+				100% {
+					-webkit-transform: rotate(360deg);
+					-ms-transform: rotate(360deg);
+					transform: rotate(360deg);
+				}
+			}
 
-    @keyframes spin {
-      0% {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-      }
+			#loader-wrapper .loader-section {
+				position: fixed;
+				top: 0;
+				width: 51%;
+				height: 100%;
+				background: #7171c6;
+				z-index: 1000;
+				-webkit-transform: translateX(0);
+				-ms-transform: translateX(0);
+				transform: translateX(0);
+			}
 
-      100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
-      }
-    }
+			#loader-wrapper .loader-section.section-left {
+				left: 0;
+			}
 
+			#loader-wrapper .loader-section.section-right {
+				right: 0;
+			}
 
-    #loader-wrapper .loader-section {
-      position: fixed;
-      top: 0;
-      width: 51%;
-      height: 100%;
-      background: #7171C6;
-      z-index: 1000;
-      -webkit-transform: translateX(0);
-      -ms-transform: translateX(0);
-      transform: translateX(0);
-    }
+			.loaded #loader-wrapper .loader-section.section-left {
+				-webkit-transform: translateX(-100%);
+				-ms-transform: translateX(-100%);
+				transform: translateX(-100%);
+				-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+				transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+			}
 
-    #loader-wrapper .loader-section.section-left {
-      left: 0;
-    }
+			.loaded #loader-wrapper .loader-section.section-right {
+				-webkit-transform: translateX(100%);
+				-ms-transform: translateX(100%);
+				transform: translateX(100%);
+				-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+				transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+			}
 
-    #loader-wrapper .loader-section.section-right {
-      right: 0;
-    }
+			.loaded #loader {
+				opacity: 0;
+				-webkit-transition: all 0.3s ease-out;
+				transition: all 0.3s ease-out;
+			}
 
+			.loaded #loader-wrapper {
+				visibility: hidden;
+				-webkit-transform: translateY(-100%);
+				-ms-transform: translateY(-100%);
+				transform: translateY(-100%);
+				-webkit-transition: all 0.3s 1s ease-out;
+				transition: all 0.3s 1s ease-out;
+			}
 
-    .loaded #loader-wrapper .loader-section.section-left {
-      -webkit-transform: translateX(-100%);
-      -ms-transform: translateX(-100%);
-      transform: translateX(-100%);
-      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-    }
+			.no-js #loader-wrapper {
+				display: none;
+			}
 
-    .loaded #loader-wrapper .loader-section.section-right {
-      -webkit-transform: translateX(100%);
-      -ms-transform: translateX(100%);
-      transform: translateX(100%);
-      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-    }
+			.no-js h1 {
+				color: #222222;
+			}
 
-    .loaded #loader {
-      opacity: 0;
-      -webkit-transition: all 0.3s ease-out;
-      transition: all 0.3s ease-out;
-    }
+			#loader-wrapper .load_title {
+				font-family: 'Open Sans';
+				color: #fff;
+				font-size: 19px;
+				width: 100%;
+				text-align: center;
+				z-index: 9999999999999;
+				position: absolute;
+				top: 60%;
+				opacity: 1;
+				line-height: 30px;
+			}
 
-    .loaded #loader-wrapper {
-      visibility: hidden;
-      -webkit-transform: translateY(-100%);
-      -ms-transform: translateY(-100%);
-      transform: translateY(-100%);
-      -webkit-transition: all 0.3s 1s ease-out;
-      transition: all 0.3s 1s ease-out;
-    }
+			#loader-wrapper .load_title span {
+				font-weight: normal;
+				font-style: italic;
+				font-size: 13px;
+				color: #fff;
+				opacity: 0.5;
+			}
+		</style>
+	</head>
 
-    .no-js #loader-wrapper {
-      display: none;
-    }
-
-    .no-js h1 {
-      color: #222222;
-    }
-
-    #loader-wrapper .load_title {
-      font-family: 'Open Sans';
-      color: #FFF;
-      font-size: 19px;
-      width: 100%;
-      text-align: center;
-      z-index: 9999999999999;
-      position: absolute;
-      top: 60%;
-      opacity: 1;
-      line-height: 30px;
-    }
-
-    #loader-wrapper .load_title span {
-      font-weight: normal;
-      font-style: italic;
-      font-size: 13px;
-      color: #FFF;
-      opacity: 0.5;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="app">
-    <div id="loader-wrapper">
-      <div id="loader"></div>
-      <div class="loader-section section-left"></div>
-      <div class="loader-section section-right"></div>
-      <div class="load_title">正在加载系统资源，请耐心等待</div>
-    </div>
-  </div>
-</body>
-
-</html>
\ No newline at end of file
+	<body>
+		<div id="app">
+			<div id="loader-wrapper">
+				<div id="loader"></div>
+				<div class="loader-section section-left"></div>
+				<div class="loader-section section-right"></div>
+				<div class="load_title">正在加载系统资源，请耐心等待</div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/src/views/quality/monitoring/qualityRecentHours/index.vue b/src/views/quality/monitoring/qualityRecentHours/index.vue
index b5780016..7f96163a 100644
--- a/src/views/quality/monitoring/qualityRecentHours/index.vue
+++ b/src/views/quality/monitoring/qualityRecentHours/index.vue
@@ -7,8 +7,10 @@
 
 <template>
 	<div class="app-container">
-		<h1>Recent 24 hours</h1>
-		<p>{{ jsondemo }}</p>
+		<SearchBar
+			:formConfigs="[{ label: '近24小时检测记录', type: 'title' }]"
+			ref="search-bar" />
+		<pre><code v-html="jsondemo"></code></pre>
 		<base-table
 			:table-props="tableProps"
 			:page="queryParams.pageNo"
@@ -19,6 +21,12 @@
 </template>
 
 <script>
+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: {},
@@ -131,7 +139,15 @@ export default {
 				method: 'get',
 			});
 			console.log(response);
-			this.jsondemo = JSON.stringify(response, null, 2);
+			const {
+				// data: { nameData },
+				code,
+			} = response;
+			this.jsondemo = hljs.highlight(
+				'json',
+				JSON.stringify(response, null, 2),
+				true
+			).value;
 		},
 		filterNameData(nameData) {
 			const ndSet = new Set();
@@ -159,8 +175,35 @@ export default {
 				};
 			});
 		},
+		handleEmitFun(payload) {
+			console.log('payload', payload);
+		},
 	},
 };
 </script>
 
-<style scoped lang="scss"></style>
+<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/quality/monitoring/qualityRecentHours/response.json b/src/views/quality/monitoring/qualityRecentHours/response.json
new file mode 100644
index 00000000..9524dfb4
--- /dev/null
+++ b/src/views/quality/monitoring/qualityRecentHours/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": ""
+}
diff --git a/yarn.lock b/yarn.lock
index 000b5599..17999661 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5293,7 +5293,7 @@ hex-color-regex@^1.1.0:
 
 highlight.js@9.18.5:
   version "9.18.5"
-  resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-9.18.5.tgz"
+  resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
   integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
 
 highlight.js@^10.7.1:
