From e7263302a704068d695ee3e442415aecb073ceb6 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Tue, 5 Dec 2023 17:00:55 +0800
Subject: [PATCH] update line

---
 src/views/databoard/components/Container.vue | 46 ++++++++++++++------
 src/views/databoard/components/line.js       | 16 +++++++
 src/views/databoard/kiln/index.vue           | 25 ++++++++++-
 3 files changed, 73 insertions(+), 14 deletions(-)
 create mode 100644 src/views/databoard/components/line.js

diff --git a/src/views/databoard/components/Container.vue b/src/views/databoard/components/Container.vue
index 88745714..1eeadf7c 100644
--- a/src/views/databoard/components/Container.vue
+++ b/src/views/databoard/components/Container.vue
@@ -6,24 +6,44 @@
 -->
 
 <template>
-    <div class="kiln-container">
-        box
-    </div>
+	<div
+		class="kiln-container"
+		:style="{ width: width ? width + 'px' : 'initial' }">
+		<div class="container-hd">
+			<i class="">
+				<img src="" alt="" />
+			</i>
+			<span>{{ name }}</span>
+		</div>
+		<div class="container-body">
+			<slot>
+				<div class="test-body">something test....</div>
+			</slot>
+		</div>
+	</div>
 </template>
 
 <script>
 export default {
-    name: "KilnContainer",
-    components: {},
-    props: {},
-    data() {
-        return {}
-    },
-    computed: {},
-    methods: {},
-}
+	name: 'KilnContainer',
+	components: {},
+	props: ['name', 'width'],
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
 </script>
 
 <style scoped lang="scss">
-.kiln-container {}
+.kiln-container {
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+	background: #ccc3;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
 </style>
diff --git a/src/views/databoard/components/line.js b/src/views/databoard/components/line.js
new file mode 100644
index 00000000..eea6b33f
--- /dev/null
+++ b/src/views/databoard/components/line.js
@@ -0,0 +1,16 @@
+export default {
+	name: 'KilnLine',
+	props: ['horizontal'],
+	render: function (h) {
+		return (
+			<div
+				class="line"
+				style={{
+					width: this.horizontal ? '100%' : '2px',
+					height: this.horizontal ? '2px' : '100%',
+					background:
+						'radial-gradient(ellipse at center, #3CE7FF 100%, #3CE7FF 50%, #3CE7FF 0%)',
+				}}></div>
+		);
+	},
+};
diff --git a/src/views/databoard/kiln/index.vue b/src/views/databoard/kiln/index.vue
index 6cf1d447..ee9d88ad 100644
--- a/src/views/databoard/kiln/index.vue
+++ b/src/views/databoard/kiln/index.vue
@@ -152,6 +152,17 @@
 			<Switcher />
 		</div>
 
+		<!-- container  -->
+		<Container name="能耗" :width="300">
+			<div
+				class="v"
+				style="height: 100px; background: #ccc; width: 300px"></div>
+			<KilnLine :horizontal="true" />
+			<div
+				class="v"
+				style="height: 100px; background: #caf; width: 300px"></div>
+		</Container>
+
 		<!-- null  -->
 		<section class="header" style="height: 80px">窑炉生产运行驾驶舱</section>
 		<section
@@ -174,9 +185,21 @@ import DateBtnGroup from '../components/DateBtnGroup.vue';
 import ShadowRect from '../components/ShadowRect.vue';
 import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
 import Switcher from '../components/Switcher.vue';
+import KilnLine from '../components/line';
+import Container from '../components/Container.vue';
+
+console.log('Line', KilnLine)
+
 export default {
 	name: 'KilnDataBoard',
-	components: { DateBtnGroup, ShadowRect, SelectorBtnGroup, Switcher },
+	components: {
+		DateBtnGroup,
+		KilnLine,
+		Container,
+		ShadowRect,
+		SelectorBtnGroup,
+		Switcher,
+	},
 	props: {},
 	data() {
 		return {};