update no-data-background

src/assets/styles/index.scss

@@ -10,7 +10,8 @@ body {
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 	text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+		Microsoft YaHei, Arial, sans-serif;
 }
 
 label {
@@ -90,7 +91,7 @@ div:focus {
 		visibility: hidden;
 		display: block;
 		font-size: 0;
-    content: " ";
+		content: ' ';
 		clear: both;
 		height: 0;
 	}
@@ -104,7 +105,8 @@ aside {
 	display: block;
 	line-height: 32px;
 	font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+		Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 	color: #2c3e50;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
@@ -130,7 +132,7 @@ aside {
 }
 
 .text-center {
-  text-align: center
+	text-align: center;
 }
 
 .sub-navbar {
@@ -141,7 +143,13 @@ aside {
 	text-align: right;
 	padding-right: 20px;
 	transition: 600ms ease position;
-  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+	background: linear-gradient(
+		90deg,
+		rgba(32, 182, 249, 1) 0%,
+		rgba(32, 182, 249, 1) 0%,
+		rgba(33, 120, 241, 1) 100%,
+		rgba(33, 120, 241, 1) 100%
+	);
 
 	.subtitle {
 		font-size: 20px;
@@ -185,3 +193,21 @@ aside {
 .multiselect--active {
 	z-index: 1000 !important;
 }
+
+.no-data-bg {
+	height: 240px;
+	background: url(../images/no-data-bg.png) 50% 100% / contain
+		no-repeat;
+	position: relative;
+
+	&::after {
+		content: '暂无数据';
+		position: absolute;
+		bottom: 12px;
+		left: 50%;
+		transform: translateX(-50%);
+		color: #ccc;
+		font-size: 18px;
+		letter-spacing: 1px;
+	}
+}

src/views/monitoring/equipmentRecentHours/index.vue

@@ -11,10 +11,9 @@
 			:formConfigs="[{ label: '设备近24小时生产记录', type: 'title' }]"
 			ref="search-bar" />
 		<el-skeleton v-if="initing" :rows="6" animated />
-		<div v-else>
-			<div v-if="noData" class="no-data">没有数据</div>
+		<div v-else :class="{ 'no-data-bg': !list || list.length == 0 }">
 			<base-table
-				v-else
+				v-if="list && list.length > 0"
 				:span-method="mergeColumnHandler"
 				:table-props="tableProps"
 				:table-data="list"
@@ -187,16 +186,4 @@ pre {
 code {
 	font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace;
 }
-
-.no-data {
-	display: grid;
-	place-content: center;
-	padding-top: 180px;
-	color: #ccc;
-	font-size: 14px;
-	letter-spacing: 2px;
-	height: 30vh;
-	background: url(../../../assets/images/no-data-bg.png) 50% 50% / contain
-		no-repeat;
-}
 </style>

src/views/quality/monitoring/qualityRecentHours/index.vue

@@ -13,18 +13,20 @@
 		<!-- <pre><code v-html="jsondemo"></code></pre> -->
 
 		<el-skeleton v-if="initing" :rows="6" animated />
+		<div v-else :class="{ 'no-data-bg': !list || list.length == 0 }">
 			<base-table
-			v-else
+				v-if="list && list.length > 0"
 				:table-props="tableProps"
 				:page="queryParams.pageNo"
 				:limit="queryParams.pageSize"
 				:table-data="list"
 				@emitFun="handleEmitFun"></base-table>
 		</div>
+	</div>
 </template>
 
 <script>
-import response from './response.json';
+// 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';
@@ -66,11 +68,11 @@ export default {
 	},
 	methods: {
 		async getList() {
-			// const response = await this.$axios({
-			// 	url: '/monitoring/record-in-one-day/get',
-			// 	method: 'get',
-			// });
-			console.log(response);
+			const response = await this.$axios({
+				url: '/monitoring/record-in-one-day/get',
+				method: 'get',
+			});
+			// console.log(response);
 			// const {
 			// 	// data: { nameData },
 			// 	code,