继电器、道岔、区段、屏蔽门状态组件格式化统一及代码优化

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);

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>

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>

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>