继电器状态面板调整

src/components/line-app/states/RelayState.vue

@@ -26,11 +26,14 @@
 </template>
 <script setup lang="ts">
 import { useLineStore } from 'src/stores/line-store';
-import { ref, watchEffect, watch } from 'vue';
+import { ref, watch, onMounted, onUnmounted } from 'vue';
 import { setRelayState } from 'src/api/Simulation';
 import { useQuasar } from 'quasar';
 import { ApiError } from 'src/boot/axios';
-import { IRelayState, Relay } from 'src/graphics/relay/Relay';
+import { Relay } from 'src/graphics/relay/Relay';
+import { JlGraphic } from 'src/jl-graphic';
+import { RelayState } from 'src/drawApp/relayCabinetGraphics/RelayInteraction';
+const graphic = ref();
 
 const $q = useQuasar();
 const lineStore = useLineStore();
@@ -44,31 +47,60 @@ let operateOptions: {
   value: boolean;
 }[] = [];
 
-watchEffect(() => {
-  if (lineStore.selectedGraphics) {
-    const relay = lineStore.selectedGraphics[0];
-    if (relay && relay instanceof Relay) {
-      relayState.value = {
-        id: relay.datas.id,
-        code: relay.datas.code,
-        xh: relay.states.xh || false,
-      };
-      operateOptions = relay.states.xh
-        ? [{ label: '驱动落下', value: false }]
-        : [{ label: '驱动吸起', value: true }];
-    }
-  }
-});
-
 watch(
-  () => lineStore.socketStates,
-  (val) => {
-    if (val && relayState.value.id) {
-      relayState.value = val[0].clone() as IRelayState;
+  () => lineStore.selectedGraphics,
+  (val, oldVal) => {
+    if (oldVal?.length == 1 && oldVal[0].type == Relay.Type) {
+      unSubscribeState(oldVal[0] as JlGraphic);
+    }
+    if (val?.length == 1 && val[0].type == Relay.Type) {
+      graphic.value = val[0];
+      setNewRelayState(val[0] as Relay);
+    } else {
+      graphic.value = null;
     }
   }
 );
 
+function setNewRelayState(relay: Relay) {
+  if (relay && relay instanceof Relay) {
+    relayState.value = {
+      id: relay.datas.id,
+      code: relay.datas.code,
+      xh: relay.states.xh || false,
+    };
+    operateOptions = relay.states.xh
+      ? [{ label: '驱动落下', value: false }]
+      : [{ label: '驱动吸起', value: true }];
+  }
+  subscribeState(relay as JlGraphic);
+}
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    setNewRelayState(lineStore.selectedGraphics[0] as Relay);
+  }
+});
+
+function subscribeState(g: JlGraphic) {
+  if (g) {
+    g.on('stateupdate', updateState);
+  }
+}
+
+function unSubscribeState(g: JlGraphic) {
+  if (g) {
+    g.off('stateupdate', updateState);
+  }
+}
+
+function updateState(newVal: RelayState) {
+  (relayState.value.xh = newVal.states.xh || false),
+    (operateOptions = newVal.states.xh
+      ? [{ label: '驱动落下', value: false }]
+      : [{ label: '驱动吸起', value: true }]);
+}
+
 function changePosition(td: boolean) {
   if (lineStore.simulationId) {
     setRelayState({
@@ -89,4 +121,10 @@ function changePosition(td: boolean) {
       });
   }
 }
+
+onUnmounted(() => {
+  if (graphic.value) {
+    unSubscribeState(graphic.value as JlGraphic);
+  }
+});
 </script>

src/drawApp/relayScene.ts

@@ -87,19 +87,6 @@ function handleSubscribe(relayScene: IGraphicScene) {
           }
         });
       }
-      if (states && states.length && app.selectedGraphics.length) {
-        const selectedGraphic = app.selectedGraphics[0];
-        const find = states.find((item) => {
-          return (
-            item.graphicType == Relay.Type &&
-            (item as RelayState).id == selectedGraphic.id &&
-            selectedGraphic.updateStates(item)
-          );
-        });
-        if (find) {
-          lineStore.setSocketStates([find]);
-        }
-      }
       return states;
     },
     graphicQueryer: (state: GraphicState, store: GraphicQueryStore) => {