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

@@ -6,25 +6,49 @@
 -->
 
 <template>
-	<div class="app-container">
-		<h1>设备产量时序图</h1>
-		<!-- 搜索工作栏 -->
-		<SearchBar
-			:formConfigs="searchBarFormConfig"
-			ref="search-bar"
-			@headBtnClick="handleSearchBarBtnClick" />
+	<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>
 
-		<div class="main-area">
-			<div class="graphs" v-if="graphList.length">
-				<div class="graph" v-for="(eq, index) in graphList" :key="eq.key">
-					<h2 class="graph-title">{{ eq.key }}</h2>
-					<LineChart
-						:key="eq.key + '__linechart'"
-						:config="getRealConfig(index)" />
+		<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">
+					<div class="graph" v-for="(eq, index) in graphList" :key="eq.key">
+						<h2 class="graph-title">{{ eq.key }}</h2>
+						<LineChart
+							:key="eq.key + '__linechart'"
+							:config="getRealConfig(index)" />
+					</div>
 				</div>
+				<h2 v-else>请添加设备</h2>
 			</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>