src/views/databoard/components/Container.vue

@@ -6,24 +6,44 @@
 -->
 
 <template>
-    <div class="kiln-container">
-        box
+	<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",
+	name: 'KilnContainer',
 	components: {},
-    props: {},
+	props: ['name', 'width'],
 	data() {
-        return {}
+		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>

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>
+		);
+	},
+};

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 {};