feat: 实现拨动开关的数字孪生

src/components/equipments/Switch.vue

@@ -3,7 +3,7 @@
     xmlns="http://www.w3.org/2000/svg"
     :width="width"
     :height="height"
-    :viewBox="`4 6 ${props.switchCount + 2} 4`"
+    :viewBox="`4 6 ${switchCount + 2} 4`"
     class="dip-switch"
   >
     <defs>
@@ -38,7 +38,7 @@
     </defs>
     <g>
       <rect
-        :width="props.switchCount + 2"
+        :width="switchCount + 2"
         height="4"
         x="4"
         y="6"
@@ -55,7 +55,7 @@
         ON
       </text>
       <g>
-        <template v-for="(_, index) in Array(props.switchCount)" :key="index">
+        <template v-for="(_, index) in Array(switchCount)" :key="index">
           <rect
             class="glow interactive"
             @click="toggleBtnStatus(index)"
@@ -101,27 +101,36 @@
 </template>
 
 <script lang="ts" setup>
+import { SwitchClient } from "@/APIClient";
+import { AuthManager } from "@/utils/AuthManager";
+import { isUndefined } from "lodash";
 import { ref, computed, watch, onMounted } from "vue";
 
 interface Props {
   size?: number;
+  enableDigitalTwin?: boolean;
   switchCount?: number;
-  initialValues?: boolean[] | string;
+  initialValues?: string;
   showLabels?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: 1,
+  enableDigitalTwin: false,
   switchCount: 6,
-  initialValues: () => [],
+  initialValues: "",
   showLabels: true,
 });
-const emit = defineEmits(["change"]);
+
+const switchCount = computed(() => {
+  if (props.enableDigitalTwin) return 5;
+  else return props.switchCount;
+});
 
 // 解析初始值
 function parseInitialValues(): boolean[] {
   if (Array.isArray(props.initialValues)) {
-    return [...props.initialValues].slice(0, props.switchCount);
+    return [...props.initialValues].slice(0, switchCount.value);
   }
   if (
     typeof props.initialValues === "string" &&
@@ -133,14 +142,14 @@ function parseInitialValues(): boolean[] {
     while (arr.length < props.switchCount) arr.push(false);
     return arr.slice(0, props.switchCount);
   }
-  return Array(props.switchCount).fill(false);
+  return Array(switchCount.value).fill(false);
 }
 
 // 状态唯一真相
 const btnStatus = ref<boolean[]>(parseInitialValues());
 
 // 计算宽高
-const width = computed(() => (props.switchCount * 25 + 20) * props.size);
+const width = computed(() => (switchCount.value * 25 + 20) * props.size);
 const height = computed(() => 85 * props.size);
 
 // 按钮位置
@@ -150,13 +159,14 @@ const btnLocation = computed(() =>
 
 // 状态变更统一处理
 function updateStatus(newStates: boolean[], index?: number) {
-  btnStatus.value = newStates.slice(0, props.switchCount);
-  SwitchClient.setStates(btnStatus.value); // 同步后端
-  emit("change", {
-    index,
-    value: index !== undefined ? btnStatus.value[index] : undefined,
-    states: [...btnStatus.value],
-  });
+  btnStatus.value = newStates.slice(0, switchCount.value);
+  if (props.enableDigitalTwin) {
+    try {
+      const client = AuthManager.createClient(SwitchClient);
+      if (!isUndefined(index)) client.setSwitchOnOff(index, newStates[index]);
+      else client.setMultiSwitchsOnOff(btnStatus.value);
+    } catch (error: any) {}
+  }
 }
 
 // 切换单个
@@ -167,11 +177,6 @@ function toggleBtnStatus(idx: number) {
   updateStatus(newStates, idx);
 }
 
-// 一次性设置全部
-function setAllStates(states: boolean[]) {
-  updateStatus(states);
-}
-
 // 单个设置
 function setBtnStatus(idx: number, isOn: boolean) {
   if (idx < 0 || idx >= btnStatus.value.length) return;
@@ -182,19 +187,12 @@ function setBtnStatus(idx: number, isOn: boolean) {
 
 // 监听 props 变化只同步一次
 watch(
-  () => [props.switchCount, props.initialValues],
+  () => [switchCount.value, props.initialValues],
   () => {
     btnStatus.value = parseInitialValues();
-    SwitchClient.setStates(btnStatus.value);
+    updateStatus(btnStatus.value);
   },
 );
-
-// 监听后端推送
-onMounted(() => {
-  SwitchClient.onStateChange((states: boolean[]) => {
-    btnStatus.value = states.slice(0, props.switchCount);
-  });
-});
 </script>
 
 <style scoped lang="postcss">
@@ -214,3 +212,15 @@ rect {
   cursor: pointer;
 }
 </style>
+
+<script lang="ts">
+export function getDefaultProps() {
+  return {
+    size: 1,
+    enableDigitalTwin: false,
+    switchCount: 6,
+    initialValues: "",
+    showLabels: true,
+  };
+}
+</script>