src/views/equipment/timing-diagram/output/index.vue

@@ -6,13 +6,36 @@
 -->
 
 <template>
-	<div class="app-container">
-		<h1>设备产量时序图</h1>
+	<div
+		class="production-timegraph-container"
+		style="background: #f2f4f9; flex: 1">
+		<el-row
+			class=""
+			style="
+				margin-bottom: 12px;
+				background: #fff;
+				padding: 16px 16px 0;
+				border-radius: 8px;
+			">
+			<div class="blue-title">生产节拍时序图</div>
+			<!-- <h1>设备状态时序图</h1> -->
 			<!-- 搜索工作栏 -->
 			<SearchBar
 				:formConfigs="searchBarFormConfig"
 				ref="search-bar"
+				:remove-blue="true"
 				@headBtnClick="handleSearchBarBtnClick" />
+		</el-row>
+
+		<el-row
+			class=""
+			style="
+				margin-bottom: 12px;
+				background: #fff;
+				padding: 16px 16px 32px;
+				border-radius: 8px;
+			">
+			<div class="blue-title">设备产量时序图</div>
 
 			<div class="main-area">
 				<div class="graphs" v-if="graphList.length">
@@ -25,6 +48,7 @@
 				</div>
 				<h2 v-else>请添加设备</h2>
 			</div>
+		</el-row>
 
 		<!-- 对话框(添加 / 修改) -->
 		<base-dialog
@@ -99,9 +123,9 @@ export default {
 				},
 				{
 					type: 'button',
-					btnName: '设备对比',
+					btnName: '添加对比',
 					name: 'compare',
-					color: 'warning',
+					color: 'primary',
 					plain: true,
 				},
 			],
@@ -322,9 +346,30 @@ export default {
 				this.graphList.push(newEqlist[0]);
 			}
 			this.open = false;
-		}
+		},
 	},
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.blue-title {
+	position: relative;
+	padding: 4px 0;
+	padding-left: 12px;
+	font-size: 14px;
+	color: #606266;
+	font-weight: 700;
+	margin-bottom: 12px;
+
+	&::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 6px;
+		height: 16px;
+		width: 4px;
+		border-radius: 1px;
+		background: #0b58ff;
+	}
+}
+</style>