From 405672842a67f7ea69f6536b91f51ccbb60f426e Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@qq.com>
Date: Wed, 10 May 2023 11:12:13 +0800
Subject: [PATCH] update oil

---
 src/assets/oil.png                     | Bin 0 -> 1122 bytes
 src/components/boxes/OilFlow.vue       |  31 +++++-
 src/components/charts/LineChart.vue    | 128 +++++++++++++++++++++++++
 src/components/common/LineChart.vue    |  19 ----
 src/components/layout/SubContainer.vue |   8 +-
 5 files changed, 162 insertions(+), 24 deletions(-)
 create mode 100644 src/assets/oil.png
 create mode 100644 src/components/charts/LineChart.vue
 delete mode 100644 src/components/common/LineChart.vue

diff --git a/src/assets/oil.png b/src/assets/oil.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ef7eb978db1b71395505c37e7bf0927149f8690
GIT binary patch
literal 1122
zcmV-o1fBbdP)<h;3K|Lk000e1NJLTq001Tc001Tk1^@s6s6FYf00001b5ch_0Itp)
z=>Px(97#k$R9Hvtm~DtuWfaGM=g#=DGxzQqrDD2LP#BfHSdp2rp+!Q0QJ*RTKZNw=
zrt_i^QA;7Q&FpBTee2~zLWDx)hYF0sib@1a6SN?~$^_SBox7`R&i%)|&e-nGx;wk;
zPJZzDbm6(@oZs_*o^zgauW^A6yFj_P2sYB48C0<krPu*TjMN#Ou;wy+%rs)#0R~lI
z?cKUO7O)GLHX7$<>?tOh*JgHlH1-vnDzMjmEpf!BV{z)ln3YP{pJVY+1y=C2Bq)QK
z@m^43v&9L93gSRK5YHhNhwqI$7-DLs(K>5cd9J9t4Zf@k*hH76R<q-^fOYg}fl7Sa
z4@|O-9+m^wNt`tJJnh;SwfGxyE5`~}D5@oZulj+A9R_RD9$SaX-th(N(p7=O$H28!
zDjB;GD>9yKA56h<1*-(icj-19-T>|ZdNH~X(=c{qT)X{$0}BH$mnO{d*@!Viunn;u
z*mp`Se4){f4uq?VVrPR&miO5JJlzN6C~+RlG}t$N;f4d7)@pX7mMqE@wa6gKxZ&zp
z&euIA9u_P!m@GI_a=H3>v#xVi{=Nkk*euxMz>s&Jj5y+%@)-h$rwHhbIsCRN!LD;<
zU!hyK1_9p#F*6=dyY_yqV6})f+&lXPPi8&qUpC5Cd0z(+&4L%Ro~^AX7#O`O(UNVl
z9|o=>S5&9Lr9f-Ovp2^T%wo)LZs5=#-7F5^9mGsvd&aYtzF_T=7xRg37IRpdPTD8q
z4wg>X?_rRFuSWy12_tYyOieY}-<9BnUd;_ou{%l_<A#)Ld+G-E+A&=*A<ls?pkmC=
zCjQ&b{0S}OG+&2vlN@HQNZO&gfxRVN(&H1UWUwghS=51qqr=yY5<f<Y!SyN6_SOw-
zt*_~m#NjAloV)rK(%fMs&E*K90b^yxweZ@C#*hVexH@pI`S9>p&R9o}npNW9U|Sif
zR@6s=rNGY_&*s(*tZ=5o__dsQ^U_HRzbDR)e2*TY#Fl8@xGC-0Pjyjj{YlL^{SW)X
zV1aS-YS*GORT*u2HPM^RQGtt*%DA?!E@11rHKP;|Wt)t9v#xC$cm(oAeFx0PVPhs~
z&(;NuGaW^kl~W8}O?&oI6_~G`h+E8ILpo_I>H`MkiwZC2$AC@~ccvTdmkM0@TOsUX
zV~)cUsieK#53Eg!d)>5PEKtBJqs_>2t}io({po~-odfyfx(0_(l_bUq#3qBC7*|SB
zZ{`7il}<8e%~UJ)1IrcFX7KWufCd-~9?5$4K?LXPK1BFDWsn%h6yyGE!osswUR(L0
z!`HhK%g!g5W2{cOmaF(&?`wJqR!KYn%mTue`m=bP_LU75)w(LMHfeGLOgNulC!n{@
o?9^y{Ui?2cQq?XhHd4j@1$RRtMZV)Bvj6}907*qoM6N<$f(uw5761SM

literal 0
HcmV?d00001

diff --git a/src/components/boxes/OilFlow.vue b/src/components/boxes/OilFlow.vue
index 11fee3b..cfa0dbc 100644
--- a/src/components/boxes/OilFlow.vue
+++ b/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>
diff --git a/src/components/charts/LineChart.vue b/src/components/charts/LineChart.vue
new file mode 100644
index 0000000..227bb0b
--- /dev/null
+++ b/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>
diff --git a/src/components/common/LineChart.vue b/src/components/common/LineChart.vue
deleted file mode 100644
index a5f7351..0000000
--- a/src/components/common/LineChart.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/layout/SubContainer.vue b/src/components/layout/SubContainer.vue
index 1af1927..d946e98 100644
--- a/src/components/layout/SubContainer.vue
+++ b/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;