update oil

src/components/boxes/OilFlow.vue

@@ -1,22 +1,29 @@
 <template>
 	<!-- 油流量 -->
 	<Container usage="Charts">
-		<SubContainer title="油流量" icon="docs" padding="17px">
-			kk
+		<SubContainer title="油流量" icon="oil" padding="17px">
+			<div class="tables flex" style="height: 100%">
+				<LineChart class="flex-1" :config="chartConfig" />
+				<div class="vertical-line"></div>
+				<LineChart class="flex-1" :config="chartConfig" />
+			</div>
 		</SubContainer>
 	</Container>
 </template>
 
 <script>
+import LineChart from "../charts/LineChart.vue";
 import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
 
 export default {
 	name: "OilFlow",
 	props: {},
-	components: { Container, SubContainer },
+	components: { Container, SubContainer, LineChart },
 	data() {
-		return {};
+		return {
+			chartConfig: {},
+		};
 	},
 };
 </script>
@@ -24,4 +31,20 @@ export default {
 <style scoped lang="scss">
 @import "../../assets/styles/functions";
 
+.flex-1 {
+	flex: 1;
+	// background: #eee;
+}
+
+.vertical-line {
+	margin: 0 3px;
+	width: 3px;
+	background: radial-gradient(
+		ellipse at center,
+		#6fe2ff,
+		#52cbef80,
+		transparent,
+		transparent
+	);
+}
 </style>

src/components/charts/LineChart.vue

@@ -0,0 +1,128 @@
+<template>
+	<!-- line chart  -->
+	<div class="line-chart__wrapper">
+		<div class="line-chart__custom-legend flex">
+			<span>产线1 - 产线5</span>
+			<ul style="margin-left: 8px; padding-left: 8px;" class="flex">
+				<li>产线1</li>
+				<li>产线2</li>
+				<li>产线3</li>
+				<li>产线4</li>
+				<li>产线5</li>
+			</ul>
+		</div>
+		<div id="line-chart"></div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "LineChart",
+	props: {
+		config: {
+			type: Object,
+			default: () => ({
+				title: { text: "default chart" },
+			}),
+		},
+	},
+	data() {
+		return {
+			colors: [
+				"#18c7f3",
+				"#FFD160",
+				"#F31868",
+				"#30E89A",
+				"#2760FF",
+				"#2f0fff",
+				"#ee3fff",
+				"#800f77",
+				"#f77",
+				"#19f",
+				"#98f",
+			],
+		};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+
+::-webkit-scrollbar {
+	// display: none;
+	height: 2px;
+}
+
+::-webkit-scrollbar-thumb {
+	height: 2px;
+	border-radius: 2px;
+	background: #ccc3;
+}
+
+// ::-webkit-scrollbar-track {
+// height: 1px;
+// background: blue;
+// }
+
+ul,
+li {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	min-width: 20px;
+}
+
+li {
+	position: relative;
+}
+
+li::before {
+	content: '';
+	position: absolute;
+	top: 1px;
+	left: -7px;
+	width: 6px;
+	height: 6px;
+	border-radius: 1px;
+	background: #eee6;
+}
+
+ul {
+	flex: 1;
+	width: 144px;
+	display: flex;
+	overflow-x: auto;
+	padding-bottom: 2px;
+}
+
+li:not(:last-child) {
+	margin-right: 8px;
+}
+
+.line-chart__wrapper {
+	position: relative;
+	background: #7771;
+	border-radius: 3px;
+	backdrop-filter: blur(2px);
+	box-shadow: inset 0 0 10px 2px rgba($color: #fff, $alpha: 0.1);
+	height: 100%;
+	width: 1px;
+}
+
+.line-chart__custom-legend {
+	position: absolute;
+	top: -13px;
+	right: 0;
+	font-size: 7px;
+	font-family: Ubuntu, sans-serif;
+	// background: #fff2;
+	padding: 0;
+	max-width: 100%;
+	align-items: flex-start;
+	justify-content: flex-end;
+}
+</style>

src/components/common/LineChart.vue

@@ -1,19 +0,0 @@
-<template>
-  <!-- line chart  -->
-	<div></div>
-</template>
-
-<script>
-export default {
-	name: "LineChart",
-	props: {},
-	data() {
-		return {};
-	},
-	created() {},
-	mounted() {},
-	methods: {},
-};
-</script>
-
-<style scoped></style>

src/components/layout/SubContainer.vue

@@ -32,7 +32,8 @@ export default {
 		return {
 			iconClass: {
 				clock: 'icon-clock',
-				docs: 'icon-docs'
+				docs: 'icon-docs',
+				oil: 'icon-oil'
 			}
 		};
 	}
@@ -62,6 +63,11 @@ export default {
 	background-size: 100% 100%;
 }
 
+.icon-oil {
+	background: url(../../assets/oil.png);
+	background-size: 100% 100%;
+}
+
 .title {
   /* margin: 12px 0; */
 	margin-bottom: 12px;