From c64045452e51b0f27a8e8be278c7d419c6a3cb17 Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Wed, 24 Jan 2024 13:53:06 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../line-app/states/ScreenDoorState.vue       | 77 ++++++++++---------
 1 file changed, 39 insertions(+), 38 deletions(-)

diff --git a/src/components/line-app/states/ScreenDoorState.vue b/src/components/line-app/states/ScreenDoorState.vue
index 6f51b15..1b62e8c 100644
--- a/src/components/line-app/states/ScreenDoorState.vue
+++ b/src/components/line-app/states/ScreenDoorState.vue
@@ -44,46 +44,38 @@
         label="屏蔽门有障碍物"
         :disable="true"
       />
-      <div style="margin-top: 15px">
-        <div
-          style="margin-top: 15px; border: 1px solid #ccc; border-radius: 3px"
-        >
-          <div>屏蔽门强制：</div>
-          <q-radio
+      <div class="q-gutter-sm border-box">
+        <div>屏蔽门强制：</div>
+        <q-radio
+          disable
+          v-for="option in screenDoorForceOption"
+          :key="option.value"
+          v-model="screenDoorForce"
+          :val="option.value"
+          :label="option.label"
+        />
+      </div>
+      <div class="q-gutter-sm border-box">
+        <div>设置故障：</div>
+        <q-radio
+          disable
+          v-for="option in screenDoorFaultOption"
+          :key="option.value"
+          v-model="screenDoorFault"
+          :val="option.value"
+          :label="option.label"
+        />
+      </div>
+      <div class="q-gutter-sm border-box">
+        <div>选择子门：</div>
+        <template :key="item" v-for="item in asdOptions">
+          <q-checkbox
             disable
-            v-for="option in screenDoorForceOption"
-            :key="option.value"
-            v-model="screenDoorForce"
-            :val="option.value"
-            :label="option.label"
+            v-model="asdCodes"
+            :val="item"
+            :label="item < 10 ? '0' + item : item + ''"
           />
-        </div>
-        <div
-          style="margin-top: 15px; border: 1px solid #ccc; border-radius: 3px"
-        >
-          <div>设置故障：</div>
-          <q-radio
-            disable
-            v-for="option in screenDoorFaultOption"
-            :key="option.value"
-            v-model="screenDoorFault"
-            :val="option.value"
-            :label="option.label"
-          />
-        </div>
-        <div
-          style="margin-top: 15px; border: 1px solid #ccc; border-radius: 3px"
-        >
-          <div>选择子门：</div>
-          <template :key="item" v-for="item in asdOptions">
-            <q-checkbox
-              disable
-              v-model="asdCodes"
-              :val="item"
-              :label="item < 10 ? '0' + item : item + ''"
-            />
-          </template>
-        </div>
+        </template>
       </div>
 
       <div style="margin-top: 15px; border: 1px solid #ccc; border-radius: 3px">
@@ -265,3 +257,12 @@ watch(
   }
 );
 </script>
+
+<style scoped>
+.border-box {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin-left: 0;
+  margin-top: 10px;
+}
+</style>

From fc8ddeecb7b42b2b6ace46a715b0436463ffa813 Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Wed, 24 Jan 2024 14:17:17 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=B1=8F=E8=94=BD=E9=97=A8=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../line-app/states/ScreenDoorState.vue       | 24 +--------------
 .../line-app/states/TurnoutState.vue          | 29 +++++++++++++------
 2 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/src/components/line-app/states/ScreenDoorState.vue b/src/components/line-app/states/ScreenDoorState.vue
index 1b62e8c..831be0d 100644
--- a/src/components/line-app/states/ScreenDoorState.vue
+++ b/src/components/line-app/states/ScreenDoorState.vue
@@ -93,35 +93,13 @@
                   />
                 </q-item-section>
               </q-item>
-              <q-item>
-                <q-item-section>
-                  <q-checkbox
-                    dense
-                    v-model="item.kmdw"
-                    outlined
-                    label="开门到位（实际）"
-                    :disable="true"
-                  />
-                </q-item-section>
-              </q-item>
-              <q-item>
-                <q-item-section>
-                  <q-checkbox
-                    dense
-                    v-model="item.gmdw"
-                    outlined
-                    label="关门到位（实际）"
-                    :disable="true"
-                  />
-                </q-item-section>
-              </q-item>
               <q-item>
                 <q-item-section>
                   <q-checkbox
                     dense
                     v-model="item.mgj"
                     outlined
-                    label="关闭（表示）"
+                    label="关闭"
                     :disable="true"
                   />
                 </q-item-section>
diff --git a/src/components/line-app/states/TurnoutState.vue b/src/components/line-app/states/TurnoutState.vue
index ee82196..86d2bd9 100644
--- a/src/components/line-app/states/TurnoutState.vue
+++ b/src/components/line-app/states/TurnoutState.vue
@@ -143,15 +143,17 @@
           </q-item-section>
         </q-item>
       </q-list>
-      <q-select
-        outlined
-        v-model="forcePosition"
-        :options="turnoutForceOption"
-        :map-options="true"
-        :emit-value="true"
-        label="道岔强制"
-        :disable="true"
-      />
+      <div class="q-gutter-sm border-box">
+        <div>道岔强制：</div>
+        <q-radio
+          v-for="option in turnoutForceOption"
+          :key="option.value"
+          disable
+          v-model="forcePosition"
+          :val="option.value"
+          :label="option.label"
+        />
+      </div>
     </q-card-section>
   </q-card>
 </template>
@@ -263,3 +265,12 @@ onUnmounted(() => {
   }
 });
 </script>
+
+<style scoped>
+.border-box {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin-left: 0;
+  margin-top: 10px;
+}
+</style>

From cde11aa2bbefd7a77e14cb8ac676e019d3f4fd1d Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Wed, 24 Jan 2024 15:36:46 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E7=BB=A7=E7=94=B5=E5=99=A8=E3=80=81?=
 =?UTF-8?q?=E9=81=93=E5=B2=94=E3=80=81=E5=8C=BA=E6=AE=B5=E3=80=81=E5=B1=8F?=
 =?UTF-8?q?=E8=94=BD=E9=97=A8=E7=8A=B6=E6=80=81=E7=BB=84=E4=BB=B6=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E5=8C=96=E7=BB=9F=E4=B8=80=E5=8F=8A=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/line-app/states/RelayState.vue | 23 +++---
 .../line-app/states/ScreenDoorState.vue       | 63 ++++++++-------
 .../line-app/states/SectionState.vue          | 79 +++++++++++--------
 .../line-app/states/TurnoutState.vue          | 44 ++++++-----
 4 files changed, 115 insertions(+), 94 deletions(-)

diff --git a/src/components/line-app/states/RelayState.vue b/src/components/line-app/states/RelayState.vue
index f8c4036..935e7e8 100644
--- a/src/components/line-app/states/RelayState.vue
+++ b/src/components/line-app/states/RelayState.vue
@@ -61,7 +61,7 @@ watch(
     }
     if (val?.length == 1 && val[0] instanceof Relay) {
       copySelectGraphic = toRaw(val[0]);
-      setNewRelayState(val[0]);
+      initRelayState(val[0]);
     } else {
       copySelectGraphic = null;
     }
@@ -70,11 +70,12 @@ watch(
 
 onMounted(() => {
   if (lineStore.selectedGraphics) {
-    setNewRelayState(lineStore.selectedGraphics[0] as Relay);
+    initRelayState(lineStore.selectedGraphics[0] as Relay);
   }
 });
 
-function setNewRelayState(relay: Relay) {
+function initRelayState(relay: Relay) {
+  copySelectGraphic = toRaw(relay);
   relayState.value = {
     id: relay.datas.id,
     code: relay.datas.code,
@@ -84,14 +85,6 @@ function setNewRelayState(relay: Relay) {
   subscribeState(relay);
 }
 
-function subscribeState(g: Relay) {
-  g.on('stateupdate', updateState);
-}
-
-function unSubscribeState(g: Relay) {
-  g.off('stateupdate', updateState);
-}
-
 function updateState(newVal: RelayState) {
   relayState.value.xh = newVal.states.xh || false;
 }
@@ -117,6 +110,14 @@ function changePosition(operation: request.Relay.Operation) {
   }
 }
 
+function subscribeState(g: Relay) {
+  g.on('stateupdate', updateState);
+}
+
+function unSubscribeState(g: Relay) {
+  g.off('stateupdate', updateState);
+}
+
 onUnmounted(() => {
   if (copySelectGraphic) {
     unSubscribeState(copySelectGraphic);
diff --git a/src/components/line-app/states/ScreenDoorState.vue b/src/components/line-app/states/ScreenDoorState.vue
index 831be0d..7dd64b9 100644
--- a/src/components/line-app/states/ScreenDoorState.vue
+++ b/src/components/line-app/states/ScreenDoorState.vue
@@ -41,7 +41,7 @@
         style="margin-top: 10px; margin-left: 10px"
         v-model="screenDoorState.obstacle"
         outlined
-        label="屏蔽门有障碍物"
+        label="间隙探测障碍物"
         :disable="true"
       />
       <div class="q-gutter-sm border-box">
@@ -113,7 +113,7 @@
 </template>
 <script setup lang="ts">
 import { useLineStore } from 'src/stores/line-store';
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, onUnmounted, toRaw } from 'vue';
 import { ScreenDoor } from 'src/graphics/screenDoor/ScreenDoor';
 import { request } from 'src/protos/request';
 import { ScreenDoorState } from 'src/drawApp/graphics/ScreenDoorInteraction';
@@ -158,18 +158,32 @@ const screenDoorFaultOption = [
 ];
 const asdCodes = ref<number[]>([]);
 const asdOptions = ref<number[]>([]);
+let copySelectGraphic: ScreenDoor | null = null;
 
 watch(
   () => lineStore.selectedGraphics,
-  (val) => {
-    if (val?.length == 1 && val[0].type == ScreenDoor.Type) {
-      initScreenDoorState(val[0] as ScreenDoor);
+  (val, oldVal) => {
+    if (oldVal?.length == 1 && oldVal[0] instanceof ScreenDoor) {
+      unSubscribeState(oldVal[0]);
+    }
+    if (val?.length == 1 && val[0] instanceof ScreenDoor) {
+      copySelectGraphic = toRaw(val[0]);
+      initScreenDoorState(val[0]);
     } else {
+      copySelectGraphic = null;
       screenDoorState.value = new ScreenDoorState();
     }
   }
 );
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    initScreenDoorState(lineStore.selectedGraphics[0] as ScreenDoor);
+  }
+});
+
 function initScreenDoorState(screenDoor: ScreenDoor) {
+  copySelectGraphic = toRaw(screenDoor);
   code.value = screenDoor.datas.code;
   asdOptions.value = [];
   sonDoorAmount.value = screenDoor.datas.sonDoorAmount;
@@ -178,6 +192,11 @@ function initScreenDoorState(screenDoor: ScreenDoor) {
       asdOptions.value.push(i);
     }
   }
+  updateState(screenDoor);
+  subscribeState(screenDoor);
+}
+
+function updateState(screenDoor: ScreenDoor) {
   screenDoorState.value = screenDoor.states.clone() as ScreenDoorState;
   asdCodes.value = screenDoorState.value.param.asdCodes;
   screenDoorForce.value = screenDoorState.value.param.force;
@@ -209,31 +228,19 @@ function doScreenDoorOperation(item: {
   }
 }
 
-onMounted(() => {
-  if (lineStore.selectedGraphics) {
-    initScreenDoorState(lineStore.selectedGraphics[0] as ScreenDoor);
+function subscribeState(g: ScreenDoor) {
+  g.on('stateupdate', updateState);
+}
+
+function unSubscribeState(g: ScreenDoor) {
+  g.off('stateupdate', updateState);
+}
+
+onUnmounted(() => {
+  if (copySelectGraphic) {
+    unSubscribeState(copySelectGraphic);
   }
 });
-
-watch(
-  () => lineStore.socketStates,
-  (val) => {
-    if (val && screenDoorState.value.code) {
-      const find = val.find((item) => {
-        return (
-          item.graphicType == ScreenDoor.Type &&
-          (item as ScreenDoorState).code == screenDoorState.value.code
-        );
-      });
-      if (find) {
-        screenDoorState.value = find.clone() as ScreenDoorState;
-        asdCodes.value = screenDoorState.value.param.asdCodes;
-        screenDoorForce.value = screenDoorState.value.param.force;
-        screenDoorFault.value = screenDoorState.value.param.fault;
-      }
-    }
-  }
-);
 </script>
 
 <style scoped>
diff --git a/src/components/line-app/states/SectionState.vue b/src/components/line-app/states/SectionState.vue
index 2665b50..5314eb4 100644
--- a/src/components/line-app/states/SectionState.vue
+++ b/src/components/line-app/states/SectionState.vue
@@ -81,11 +81,10 @@
 </template>
 <script setup lang="ts">
 import { useLineStore } from 'src/stores/line-store';
-import { ref, watch, onMounted } from 'vue';
-import { Section, type ISectionState } from 'src/graphics/section/Section';
+import { ref, watch, onMounted, onUnmounted, toRaw } from 'vue';
+import { Section } from 'src/graphics/section/Section';
 import { request } from 'src/protos/request';
 import { Dialog } from 'quasar';
-import { SectionStates } from 'src/drawApp/graphics/SectionInteraction';
 import SectionOperation from 'src/components/draw-app/dialogs/SectionOperation.vue';
 import { setAxleSectionState } from 'src/api/Simulation';
 import { errorNotify } from 'src/utils/CommonNotify';
@@ -99,13 +98,19 @@ const sectionState = ref({
   axleDrst: false,
   axlePdrst: false,
 });
+let copySelectGraphic: Section | null = null;
 
 watch(
   () => lineStore.selectedGraphics,
-  (val) => {
-    if (val?.length == 1 && val[0].type == Section.Type) {
-      setSectionState(val[0] as Section);
+  (val, oldVal) => {
+    if (oldVal?.length == 1 && oldVal[0] instanceof Section) {
+      unSubscribeState(oldVal[0]);
+    }
+    if (val?.length == 1 && val[0] instanceof Section) {
+      copySelectGraphic = toRaw(val[0]);
+      initSectionState(val[0] as Section);
     } else {
+      copySelectGraphic = null;
       sectionState.value = {
         id: 0,
         code: '',
@@ -117,7 +122,15 @@ watch(
     }
   }
 );
-function setSectionState(section: Section) {
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    initSectionState(lineStore.selectedGraphics[0] as Section);
+  }
+});
+
+function initSectionState(section: Section) {
+  copySelectGraphic = toRaw(section);
   sectionState.value = {
     id: section.datas.id,
     code: section.datas.code,
@@ -126,13 +139,19 @@ function setSectionState(section: Section) {
     axleDrst: section.states.axleDrst ?? false,
     axlePdrst: section.states.axlePdrst ?? false,
   };
+  subscribeState(section);
 }
 
-onMounted(() => {
-  if (lineStore.selectedGraphics) {
-    setSectionState(lineStore.selectedGraphics[0] as Section);
-  }
-});
+function updateState(newVal: Section) {
+  sectionState.value = {
+    id: newVal.id,
+    code: sectionState.value.code,
+    axleFault: newVal.states.axleFault ?? false,
+    occupied: newVal.states.occupied ?? false,
+    axleDrst: newVal.states.axleDrst ?? false,
+    axlePdrst: newVal.states.axlePdrst ?? false,
+  };
+}
 
 const options = [
   {
@@ -144,6 +163,7 @@ const options = [
     value: request.Section.Operation.SetFaultOcc,
   },
 ];
+
 function doSectionOperation(item: { label: string; value: number }) {
   if (!lineStore.simulationId) return;
   if (item.label == '设置参数') {
@@ -173,27 +193,18 @@ function doSectionOperation(item: { label: string; value: number }) {
     );
   }
 }
-watch(
-  () => lineStore.socketStates,
-  (val) => {
-    if (val && sectionState.value.id) {
-      const find = val.find((item): item is SectionStates => {
-        return (
-          item.graphicType == Section.Type &&
-          (item as ISectionState).id == sectionState.value.id
-        );
-      });
-      if (find) {
-        sectionState.value = {
-          id: find.id,
-          code: sectionState.value.code,
-          axleFault: find.axleFault,
-          occupied: find.occupied,
-          axleDrst: find.axleDrst,
-          axlePdrst: find.axlePdrst,
-        };
-      }
-    }
+
+function subscribeState(g: Section) {
+  g.on('stateupdate', updateState);
+}
+
+function unSubscribeState(g: Section) {
+  g.off('stateupdate', updateState);
+}
+
+onUnmounted(() => {
+  if (copySelectGraphic) {
+    unSubscribeState(copySelectGraphic);
   }
-);
+});
 </script>
diff --git a/src/components/line-app/states/TurnoutState.vue b/src/components/line-app/states/TurnoutState.vue
index 86d2bd9..7326c10 100644
--- a/src/components/line-app/states/TurnoutState.vue
+++ b/src/components/line-app/states/TurnoutState.vue
@@ -160,7 +160,7 @@
 <script setup lang="ts">
 import { Turnout } from 'src/graphics/turnout/Turnout';
 import { useLineStore } from 'src/stores/line-store';
-import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { ref, watch, onMounted, onUnmounted, toRaw } from 'vue';
 import { Dialog } from 'quasar';
 import { TurnoutStates } from 'src/drawApp/graphics/TurnoutInteraction';
 import TurnoutOperation from 'src/components/draw-app/dialogs/TurnoutOperation.vue';
@@ -171,7 +171,6 @@ const lineStore = useLineStore();
 const turnoutState = ref<TurnoutStates>(new TurnoutStates());
 const name = ref('');
 const forcePosition = ref<request.Points.Force>(0);
-const graphic = ref();
 const turnoutForceOption = [
   {
     label: '无强制',
@@ -190,6 +189,8 @@ const turnoutForceOption = [
     value: request.Points.Force.FP_SB,
   },
 ];
+const options = [{ label: '设置参数' }];
+let copySelectGraphic: Turnout | null = null;
 
 watch(
   () => lineStore.selectedGraphics,
@@ -197,31 +198,35 @@ watch(
     if (oldVal?.length == 1 && oldVal[0].type == Turnout.Type) {
       unSubscribeState(oldVal[0] as JlGraphic);
     }
-    if (val?.length == 1 && val[0].type == Turnout.Type) {
-      graphic.value = val[0];
-      setTurnoutState(val[0] as Turnout);
+    if (val?.length == 1 && val[0] instanceof Turnout) {
+      copySelectGraphic = toRaw(val[0]);
+      initTurnoutState(val[0] as Turnout);
     } else {
       turnoutState.value = new TurnoutStates();
       name.value = '';
-      graphic.value = null;
+      copySelectGraphic = null;
     }
   }
 );
-function setTurnoutState(turnout: Turnout) {
-  graphic.value = turnout;
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    initTurnoutState(lineStore.selectedGraphics[0] as Turnout);
+  }
+});
+
+function initTurnoutState(turnout: Turnout) {
+  copySelectGraphic = toRaw(turnout);
   turnoutState.value = turnout.states.clone() as TurnoutStates;
   forcePosition.value = turnoutState.value.param?.forcePosition;
   name.value = turnout.datas.code;
   subscribeState(turnout as JlGraphic);
 }
 
-onMounted(() => {
-  if (lineStore.selectedGraphics) {
-    setTurnoutState(lineStore.selectedGraphics[0] as Turnout);
-  }
-});
-
-const options = [{ label: '设置参数' }];
+function updateState(newVal: TurnoutStates) {
+  turnoutState.value = newVal.clone() as TurnoutStates;
+  forcePosition.value = turnoutState.value.param?.forcePosition;
+}
 
 function doTurnoutOperation(item: { label: string }) {
   if (!lineStore.simulationId) return;
@@ -249,19 +254,16 @@ function subscribeState(g: JlGraphic) {
     g.on('stateupdate', updateState);
   }
 }
+
 function unSubscribeState(g: JlGraphic) {
   if (g) {
     g.off('stateupdate', updateState);
   }
 }
-function updateState(newVal: TurnoutStates) {
-  turnoutState.value = newVal.clone() as TurnoutStates;
-  forcePosition.value = turnoutState.value.param?.forcePosition;
-}
 
 onUnmounted(() => {
-  if (graphic.value) {
-    unSubscribeState(graphic.value as JlGraphic);
+  if (copySelectGraphic) {
+    unSubscribeState(copySelectGraphic);
   }
 });
 </script>

From ed834b114a15b48d6fdb40c81b04ca7290da2e63 Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Wed, 24 Jan 2024 16:02:13 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=A1=E5=8F=B7=E6=9C=BA=E5=92=8C?=
 =?UTF-8?q?=E5=BA=94=E7=AD=94=E5=99=A8=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../line-app/states/SignalState.vue           | 50 +++++++++++-------
 .../line-app/states/TransponderState.vue      | 52 ++++++++++++-------
 .../line-app/states/TurnoutState.vue          | 10 ++--
 3 files changed, 70 insertions(+), 42 deletions(-)

diff --git a/src/components/line-app/states/SignalState.vue b/src/components/line-app/states/SignalState.vue
index 09f0e83..4ddfe38 100644
--- a/src/components/line-app/states/SignalState.vue
+++ b/src/components/line-app/states/SignalState.vue
@@ -66,7 +66,7 @@
 </template>
 <script setup lang="ts">
 import { useLineStore } from 'src/stores/line-store';
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, onUnmounted, toRaw } from 'vue';
 import { Signal } from 'src/graphics/signal/Signal';
 import { SignalState } from 'src/drawApp/graphics/SignalInteraction';
 import { Dialog } from 'quasar';
@@ -153,23 +153,36 @@ const aspectOptions = [
   { label: '蓝灯亮', value: state.Signal.Aspect.A },
 ];
 const options = [{ label: '设置参数' }];
+let copySelectGraphic: Signal | null = null;
+
 watch(
   () => lineStore.selectedGraphics,
-  (val) => {
-    if (val?.length == 1 && val[0].type == Signal.Type) {
+  (val, oldVal) => {
+    if (oldVal?.length == 1 && oldVal[0] instanceof Signal) {
+      unSubscribeState(oldVal[0]);
+    }
+    if (val?.length == 1 && val[0] instanceof Signal) {
+      copySelectGraphic = toRaw(val[0]);
       initSignalState(val[0] as Signal);
     } else {
+      copySelectGraphic = null;
       signalState.value = new SignalState();
     }
   }
 );
 const mt = ref(0);
 function initSignalState(signal: Signal) {
+  copySelectGraphic = toRaw(signal);
   // index.value = signal.datas.index;
   initOptions(signal.datas.mt);
   mt.value = signal.datas.mt;
   code.value = signal.datas.code;
   signalState.value = signal.states.clone() as SignalState;
+  subscribeState(signal);
+}
+
+function updateState(newVal: SignalState) {
+  signalState.value = newVal.clone() as SignalState;
 }
 // function submitState() {
 //   if (lineStore.simulationId) {
@@ -276,22 +289,23 @@ function initOptions(mt: graphicData.Signal.Model) {
   }
 }
 
-watch(
-  () => lineStore.socketStates,
-  (val) => {
-    if (val && signalState.value.code) {
-      const find = val.find((item) => {
-        return (
-          item.graphicType == Signal.Type &&
-          (item as SignalState).code == signalState.value.code
-        );
-      });
-      if (find) {
-        signalState.value = find.clone() as SignalState;
-      }
-    }
+function subscribeState(g: Signal) {
+  if (g) {
+    g.on('stateupdate', updateState);
   }
-);
+}
+
+function unSubscribeState(g: Signal) {
+  if (g) {
+    g.off('stateupdate', updateState);
+  }
+}
+
+onUnmounted(() => {
+  if (copySelectGraphic) {
+    unSubscribeState(copySelectGraphic);
+  }
+});
 </script>
 <style scoped>
 .border-box {
diff --git a/src/components/line-app/states/TransponderState.vue b/src/components/line-app/states/TransponderState.vue
index 0187f01..030dec5 100644
--- a/src/components/line-app/states/TransponderState.vue
+++ b/src/components/line-app/states/TransponderState.vue
@@ -74,7 +74,7 @@
 </template>
 <script setup lang="ts">
 import { useLineStore } from 'src/stores/line-store';
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, toRaw, onUnmounted } from 'vue';
 import { errorNotify } from 'src/utils/CommonNotify';
 import { TransponderState } from 'src/drawApp/graphics/TransponderInteraction';
 import { Transponder } from 'src/graphics/transponder/Transponder';
@@ -120,22 +120,36 @@ const directionOptions = [
   { label: '左行', value: 0 },
   { label: '右行', value: 1 },
 ];
+let copySelectGraphic: Transponder | null = null;
 
 watch(
   () => lineStore.selectedGraphics,
-  (val) => {
-    if (val?.length == 1 && val[0].type == Transponder.Type) {
+  (val, oldVal) => {
+    if (oldVal?.length == 1 && oldVal[0] instanceof Transponder) {
+      unSubscribeState(oldVal[0]);
+    }
+    if (val?.length == 1 && val[0] instanceof Transponder) {
+      copySelectGraphic = toRaw(val[0]);
       initTransponderState(val[0] as Transponder);
     } else {
+      copySelectGraphic = null;
       transponderState.value = new TransponderState();
     }
   }
 );
 function initTransponderState(transponder: Transponder) {
+  copySelectGraphic = toRaw(transponder);
   code.value = transponder.datas.code;
   kilometer.value = transponder.states.km?.kilometer || 0;
   transponderState.value = transponder.states.clone() as TransponderState;
+  subscribeState(transponder);
 }
+
+function updateState(newVal: TransponderState) {
+  transponderState.value = newVal.clone() as TransponderState;
+  kilometer.value = transponderState.value.km.kilometer;
+}
+
 function doTransponderOperation(operation: number) {
   const simulationId = useLineStore().simulationId || '';
   const mapId = useLineStore().mapId as number;
@@ -193,21 +207,21 @@ onMounted(() => {
   }
 });
 
-watch(
-  () => lineStore.socketStates,
-  (val) => {
-    if (val && transponderState.value.code) {
-      const find = val.find((item) => {
-        return (
-          item.graphicType == Transponder.Type &&
-          (item as TransponderState).code == transponderState.value.code
-        );
-      });
-      if (find) {
-        transponderState.value = find.clone() as TransponderState;
-        kilometer.value = transponderState.value.km.kilometer;
-      }
-    }
+function subscribeState(g: Transponder) {
+  if (g) {
+    g.on('stateupdate', updateState);
   }
-);
+}
+
+function unSubscribeState(g: Transponder) {
+  if (g) {
+    g.off('stateupdate', updateState);
+  }
+}
+
+onUnmounted(() => {
+  if (copySelectGraphic) {
+    unSubscribeState(copySelectGraphic);
+  }
+});
 </script>
diff --git a/src/components/line-app/states/TurnoutState.vue b/src/components/line-app/states/TurnoutState.vue
index 7326c10..32eee44 100644
--- a/src/components/line-app/states/TurnoutState.vue
+++ b/src/components/line-app/states/TurnoutState.vue
@@ -195,8 +195,8 @@ let copySelectGraphic: Turnout | null = null;
 watch(
   () => lineStore.selectedGraphics,
   (val, oldVal) => {
-    if (oldVal?.length == 1 && oldVal[0].type == Turnout.Type) {
-      unSubscribeState(oldVal[0] as JlGraphic);
+    if (oldVal?.length == 1 && oldVal[0] instanceof Turnout) {
+      unSubscribeState(oldVal[0]);
     }
     if (val?.length == 1 && val[0] instanceof Turnout) {
       copySelectGraphic = toRaw(val[0]);
@@ -220,7 +220,7 @@ function initTurnoutState(turnout: Turnout) {
   turnoutState.value = turnout.states.clone() as TurnoutStates;
   forcePosition.value = turnoutState.value.param?.forcePosition;
   name.value = turnout.datas.code;
-  subscribeState(turnout as JlGraphic);
+  subscribeState(turnout);
 }
 
 function updateState(newVal: TurnoutStates) {
@@ -249,13 +249,13 @@ function doTurnoutOperation(item: { label: string }) {
   }
 }
 
-function subscribeState(g: JlGraphic) {
+function subscribeState(g: Turnout) {
   if (g) {
     g.on('stateupdate', updateState);
   }
 }
 
-function unSubscribeState(g: JlGraphic) {
+function unSubscribeState(g: Turnout) {
   if (g) {
     g.off('stateupdate', updateState);
   }