update kiln databoard

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>