src/views/databoard/components/Container.vue

@@ -0,0 +1,29 @@
+<!-- 
+    filename: Container.vue
+    author: liubin
+    date: 2023-12-05 14:29:53
+    description: 窑炉容器
+-->
+
+<template>
+    <div class="kiln-container">
+        box
+    </div>
+</template>
+
+<script>
+export default {
+    name: "KilnContainer",
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.kiln-container {}
+</style>

src/views/databoard/components/DateBtnGroup.vue

@@ -0,0 +1,84 @@
+<!-- 
+    filename: DateBtnGroup.vue
+    author: liubin
+    date: 2023-12-05 14:35:14
+    description: 日期按钮组
+-->
+
+<template>
+	<div class="date-btn-group">
+		<button
+			class="btn"
+			:class="{ 'btn-active': active == '日' }"
+			@click="handleClick('日')">
+			日
+		</button>
+		<button
+			class="btn"
+			:class="{ 'btn-active': active == '周' }"
+			@click="handleClick('周')">
+			周
+		</button>
+		<button
+			class="btn"
+			:class="{ 'btn-active': active == '月' }"
+			@click="handleClick('月')">
+			月
+		</button>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'DateBtnGroup',
+	data() {
+		return {
+			active: '日',
+		};
+	},
+	methods: {
+		handleClick(v) {
+			this.active = v;
+			this.$emit('change', v);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+button {
+	appearance: none;
+	border: none;
+	outline: none;
+	background: none;
+	padding: 6px 8px;
+}
+.date-btn-group {
+	position: absolute;
+	top: 40px;
+	right: 100px;
+	border: 1px solid #ccc;
+	padding: 12px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.btn {
+	cursor: pointer;
+	border: 1px solid #11e8e4;
+	border-radius: 4px;
+	color: #11e8e4;
+	transition: all 0.3s ease-in-out;
+
+	&:hover {
+		background: #11e8e4;
+		color: #013433;
+	}
+}
+
+.btn-active {
+	background: #11e8e4;
+	color: #013433;
+}
+</style>

src/views/databoard/components/Header.vue

@@ -0,0 +1,25 @@
+<!-- 
+    filename: Header.vue
+    author: liubin
+    date: 2023-12-05 14:30:46
+    description: 顶部标题
+-->
+
+<template></template>
+
+<script>
+export default {
+    name: "KilnHeader",
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/databoard/components/SelectorBtnGroup.vue

@@ -0,0 +1,28 @@
+<!-- 
+    filename: SelectorBtnGroup.vue
+    author: liubin
+    date: 2023-12-05 14:28:24
+    description: 选项按钮组
+-->
+
+<template>
+	<div class="selectorBtnGroup"></div>
+</template>
+
+<script>
+export default {
+	name: 'SelectorBtnGroup',
+	components: {},
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.selectorBtnGroup {
+}
+</style>

src/views/databoard/components/ShadowRect.vue

@@ -0,0 +1,62 @@
+<!-- 
+    filename: ShadowRect.vue
+    author: liubin
+    date: 2023-12-05 14:28:57
+    description: 阴影矩形   
+-->
+
+<template>
+	<div class="shadow-rect">
+		<slot>
+			<div class="test-data" style="flex: 1; display: flex; align-items: center">
+				<span
+					style="
+						flex: 7;
+						color: #fff;
+						text-align: right;
+						font-size: 18px;
+						line-height: 1.12;
+						letter-spacing: 1px;
+						padding-right: 12px;
+					">
+					窑炉压力碹顶加权
+				</span>
+				<span
+					style="
+						flex: 3;
+						color: #fff;
+						text-align: left;
+						font-size: 18px;
+						line-height: 1.12;
+						padding-right: 8px;
+					">
+					92Kpa
+				</span>
+			</div>
+		</slot>
+	</div>
+</template>
+
+<script>
+export default {
+	name: '',
+	components: {},
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.shadow-rect {
+	padding: 8px;
+	border-radius: 2px;
+	box-shadow: inset 0 0 10px 2px #ccc9;
+	color: white;
+    display: flex;
+    align-items: center;
+}
+</style>

src/views/databoard/components/Switcher.vue

@@ -0,0 +1,29 @@
+<!-- 
+    filename: Switcher.vue
+    author: liubin
+    date: 2023-12-05 14:29:29
+    description: 开关
+-->
+
+<template>
+    <div class="switcher">
+        1/2
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Switcher",
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.switcher {}
+</style>

src/views/databoard/kiln/index.vue

@@ -14,31 +14,53 @@
 			left: -16px;
 			width: calc(100% + 28px);
 			height: calc(100% + 38px);
-			background: #ccc;
+			background: #073f4a;
 			display: flex;
 			flex-direction: column;
 			gap: 16px;
 		">
-		<section class="header" style="height: 80px;">窑炉生产运行驾驶舱</section>
+		<!-- test area  -->
+		<DateBtnGroup />
+		<div
+			class="absolute"
+			style="
+				position: absolute;
+				top: 120px;
+				right: 100px;
+				padding: 12px;
+				background: #0003;
+				border: 1px solid #ccc;
+				display: grid;
+				grid-template-columns: repeat(2, 320px);
+				grid-auto-rows: 60px;
+				gap: 8px;
+			">
+			<ShadowRect v-for="n in 8" :key="n"></ShadowRect>
+		</div>
+
+		<!-- null  -->
+		<section class="header" style="height: 80px">窑炉生产运行驾驶舱</section>
 		<section
 			class="main-body"
 			style="
 				display: grid;
 				gap: 16px;
-                flex: 1;
+				flex: 1;
 				grid-template-columns: repeat(3, minmax(100px, 1fr));
 			">
-            <div class="main-left" style="background: #f001"></div> 
+			<div class="main-left" style="background: #f001"></div>
-            <div class="main-middle" style="background: #0f01;"></div>   
+			<div class="main-middle" style="background: #0f01"></div>
-            <div class="main-right" style="background: #00f1;"></div>
+			<div class="main-right" style="background: #00f1"></div>
-        </section>
+		</section>
 	</div>
 </template>
 
 <script>
+import DateBtnGroup from '../components/DateBtnGroup.vue';
+import ShadowRect from '../components/ShadowRect.vue';
 export default {
 	name: 'KilnDataBoard',
-	components: {},
+	components: { DateBtnGroup, ShadowRect },
 	props: {},
 	data() {
 		return {};
@@ -50,6 +72,5 @@ export default {
 
 <style scoped lang="scss">
 .KilnDataBoard {
-	color: red;
 }
 </style>