update switcher

src/views/databoard/components/SelectorBtnGroup.vue

@@ -6,16 +6,27 @@
 -->
 
 <template>
-	<div class="selectorBtnGroup"></div>
+	<div class="selector-btn-group">
+		<button
+			class="btn"
+			v-for="opt in options"
+			:key="opt"
+			@click="active = opt"
+			:class="active == opt ? 'btn-active' : ''">
+			{{ opt }}
+		</button>
+	</div>
 </template>
 
 <script>
 export default {
 	name: 'SelectorBtnGroup',
 	components: {},
-	props: {},
+	props: ['options'],
 	data() {
-		return {};
+		return {
+			active: this.options[0] || 'default'
+		};
 	},
 	computed: {},
 	methods: {},
@@ -23,6 +34,36 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.selectorBtnGroup {
+button {
+	border: none;
+	appearance: none;
+	outline: none;
+	color: red;
+	font-size: 14px;
+	padding: 8px 12px;
+}
+
+button:first-child {
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
+}
+
+button:last-child {
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+}
+.selector-btn-group {
+}
+
+.btn {
+	background: #03233c;
+	color: #fff;
+	cursor: pointer;
+	transition: all 0.3s ease-out;
+
+	&.btn-active, 
+	&:hover {
+		background: #0f3d5c;
+	}
 }
 </style>

src/views/databoard/components/Switcher.vue

@@ -6,24 +6,52 @@
 -->
 
 <template>
-    <div class="switcher">
+	<div class="switcher" style="display: flex; align-items: center; gap: 12px">
-        1/2
+		<el-switch v-model="value"></el-switch>
+		<span style="color: #fff; font-size: 16px">{{ mode }}</span>
+		;
 	</div>
 </template>
 
 <script>
 export default {
-    name: "Switcher",
+	name: 'Switcher',
 	components: {},
 	props: {},
 	data() {
-        return {}
+		return {
+			value: true,
+		};
+	},
+	computed: {
+		mode() {
+			return this.value ? '历史详情' : '实时数据';
+		},
 	},
-    computed: {},
 	methods: {},
-}
+};
 </script>
 
 <style scoped lang="scss">
-.switcher {}
+.switcher {
+	:deep(.el-switch__core) {
+        border: none;
+        background-color: #213d566b;
+        
+		&::after {
+            background-color: #02457e;
+		}
+	}
+    
+	:deep(.is-checked) {
+        .el-switch__core {
+            border: none;
+            background-color: #b4fffc;
+
+			&::after {
+				background-color: #08d8cd;
+			}
+		}
+	}
+}
 </style>

src/views/databoard/kiln/index.vue

@@ -101,12 +101,57 @@
 						align-items: center;
 						justify-content: center;
 					">
-					<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">234</span>
+					<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">
-					<span style="color: #fff; font-size: 14px; letter-spacing: 1px;">- 原料1/吨 -</span>
+						234
+					</span>
+					<span style="color: #fff; font-size: 14px; letter-spacing: 1px">
+						- 原料1/吨 -
+					</span>
 				</div>
 			</ShadowRect>
 		</div>
 
+		<!-- btn group  -->
+		<div
+			class="absolute"
+			style="
+				position: absolute;
+				top: 10px;
+				left: 60px;
+				padding: 12px;
+				background: #0003;
+				border: 1px solid #ccc;
+			">
+			<SelectorBtnGroup :options="['日', '周', '月', '年']" />
+		</div>
+		<div
+			class="absolute"
+			style="
+				position: absolute;
+				top: 90px;
+				left: 60px;
+				padding: 12px;
+				background: #0003;
+				border: 1px solid #ccc;
+			">
+			<SelectorBtnGroup
+				:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
+		</div>
+
+		<!-- switcher  -->
+		<div
+			class="absolute"
+			style="
+				position: absolute;
+				top: 10px;
+				right: 10px;
+				padding: 12px;
+				background: #0003;
+				border: 1px solid #ccc;
+			">
+			<Switcher />
+		</div>
+
 		<!-- null  -->
 		<section class="header" style="height: 80px">窑炉生产运行驾驶舱</section>
 		<section
@@ -127,9 +172,11 @@
 <script>
 import DateBtnGroup from '../components/DateBtnGroup.vue';
 import ShadowRect from '../components/ShadowRect.vue';
+import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
+import Switcher from '../components/Switcher.vue';
 export default {
 	name: 'KilnDataBoard',
-	components: { DateBtnGroup, ShadowRect },
+	components: { DateBtnGroup, ShadowRect, SelectorBtnGroup, Switcher },
 	props: {},
 	data() {
 		return {};