From d93852affc4356e9a41933e88e89b8ebaa091b2e Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Tue, 14 Nov 2023 10:37:36 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=A7=E7=94=B5=E5=99=A8=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/line-app/states/RelayState.vue | 82 ++++++++++++++-----
 src/drawApp/relayScene.ts                     | 13 ---
 2 files changed, 60 insertions(+), 35 deletions(-)

diff --git a/src/components/line-app/states/RelayState.vue b/src/components/line-app/states/RelayState.vue
index aa560ab..2857dec 100644
--- a/src/components/line-app/states/RelayState.vue
+++ b/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>
diff --git a/src/drawApp/relayScene.ts b/src/drawApp/relayScene.ts
index 7f3334c..724e5a5 100644
--- a/src/drawApp/relayScene.ts
+++ b/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) => {