add switch component

2025-03-16 21:49:01 +08:00
parent 8f18560a38
commit d7ca474e39
6 changed files with 114 additions and 7 deletions
--- a/src/components/equipments/Switch.vue
+++ b/src/components/equipments/Switch.vue
@@ -0,0 +1,81 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="props.width" :height="props.height" viewBox="0 0 16 16">
+    <def>
+      <filter id="glow">
+        <feFlood result="flood" flood-color="#f08a5d" flood-opacity="1"></feFlood>
+        <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
+        <feMorphology in="mask" result="dilated" operator="dilate" radius="0.02"></feMorphology>
+        <feGaussianBlur in="dilated" stdDeviation="0.05" result="blur1" />
+        <feGaussianBlur in="dilated" stdDeviation="0.1" result="blur2" />
+        <feGaussianBlur in="dilated" stdDeviation="0.2" result="blur3" />
+        <feMerge>
+          <feMergeNode in="blur3" />
+          <feMergeNode in="blur2" />
+          <feMergeNode in="blur1" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+    </def>
+    <g>
+      <rect width="8" height="4" x="4" y="6" fill="#c01401" rx="0.1" />
+      <text fill="white" font-size="0.7" x="4.25" y="6.75">ON</text>
+      <g>
+        <rect @click="toggleBtnStatus(0)" width="0.7" height="2" fill="#68716f" x="5.15" y="7" rx="0.1" />
+        <rect @click="toggleBtnStatus(1)" width="0.7" height="2" fill="#68716f" x="6.15" y="7" rx="0.1" />
+        <rect @click="toggleBtnStatus(2)" width="0.7" height="2" fill="#68716f" x="7.15" y="7" rx="0.1" />
+        <rect @click="toggleBtnStatus(3)" width="0.7" height="2" fill="#68716f" x="8.15" y="7" rx="0.1" />
+        <rect @click="toggleBtnStatus(4)" width="0.7" height="2" fill="#68716f" x="9.15" y="7" rx="0.1" />
+        <rect @click="toggleBtnStatus(5)" width="0.7" height="2" fill="#68716f" x="10.15" y="7" rx="0.1" />
+      </g>
+      <g>
+        <rect @click="toggleBtnStatus(0)" width="0.65" height="0.65" fill="white" x="5.175" :y="btnLocation[0]" rx="0.1"
+          opacity="1" />
+        <rect @click="toggleBtnStatus(1)" width="0.65" height="0.65" fill="white" x="6.175" :y="btnLocation[1]" rx="0.1"
+          opacity="1" />
+        <rect @click="toggleBtnStatus(2)" width="0.65" height="0.65" fill="white" x="7.175" :y="btnLocation[2]" rx="0.1"
+          opacity="1" />
+        <rect @click="toggleBtnStatus(3)" width="0.65" height="0.65" fill="white" x="8.175" :y="btnLocation[3]" rx="0.1"
+          opacity="1" />
+        <rect @click="toggleBtnStatus(4)" width="0.65" height="0.65" fill="white" x="9.175" :y="btnLocation[4]" rx="0.1"
+          opacity="1" />
+        <rect @click="toggleBtnStatus(5)" width="0.65" height="0.65" fill="white" x="10.175" :y="btnLocation[5]"
+          rx="0.1" opacity="1" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+interface Props {
+  width?: string | number
+  height?: string | number
+}
+const props = withDefaults(defineProps<Props>(), {
+  width: 160,
+  height: 160,
+})
+
+const btnStatus = ref([false, false, false, false, false, false])
+const btnLocation = computed(() => {
+  return btnStatus.value.map((status) => { return status ? 7.025 : 8.325 })
+})
+
+function setBtnStatus(btnNum: number, isOn: boolean): void {
+  btnStatus.value[btnNum] = isOn
+}
+
+function toggleBtnStatus(btnNum: number): void {
+  btnStatus.value[btnNum] = !btnStatus.value[btnNum]
+}
+
+</script>
+
+<style scoped lang="postcss">
+@import "@/assets/main.css";
+
+rect {
+  transition: all 100ms ease-in-out;
+}
+</style>