绘制图形属性组件去除watch

src/components/draw-app/DrawProperties.vue

@@ -19,9 +19,6 @@
         <template v-if="drawStore.drawGraphicType === Station.Type">
           <station-template></station-template>
         </template>
-        <!-- <template v-if="drawStore.drawGraphicType === Train.Type">
-          <train-template></train-template>
-        </template> -->
       </q-card-section>
     </q-card>
   </div>
@@ -54,9 +51,6 @@
           <station-line-property
             v-if="drawStore.selectedGraphicType === StationLine.Type"
           ></station-line-property>
-          <!-- <train-property
-            v-if="drawStore.selectedGraphicType === Train.Type"
-          ></train-property> -->
           <iscs-fan-property
             v-else-if="drawStore.selectedGraphicType === IscsFan.Type"
           ></iscs-fan-property>

src/components/draw-app/properties/AxleCountingProperty.vue

@@ -77,7 +77,7 @@ import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
 import { Section } from 'src/graphics/section/Section';
 import { Turnout } from 'src/graphics/turnout/Turnout';
 import { useDrawStore } from 'src/stores/draw-store';
-import { computed, onMounted, reactive, watch } from 'vue';
+import { computed, onMounted, onUnmounted, reactive } from 'vue';
 
 const drawStore = useDrawStore();
 const axleCountingModel = reactive(new AxleCountingData());
@@ -90,25 +90,11 @@ const CoordinateSystemOptions = [
   { label: '换线', value: 'TRANSFER' },
 ];
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == AxleCounting.Type) {
-      axleCountingModel.copyFrom(val.saveData() as AxleCountingData);
-      if (axleCountingModel.kilometerSystem) {
-        kilometerSystem.coordinateSystem =
-          axleCountingModel.kilometerSystem.coordinateSystem;
-        kilometerSystem.kilometer = axleCountingModel.kilometerSystem.kilometer;
-      }
-    }
-  }
-);
-
 onMounted(() => {
   const axleCounting = drawStore.selectedGraphic as AxleCounting;
   if (axleCounting) {
     axleCountingModel.copyFrom(axleCounting.saveData());
+    drawStore.bindFormData(axleCountingModel);
     if (axleCountingModel.kilometerSystem) {
       kilometerSystem.coordinateSystem =
         axleCountingModel.kilometerSystem.coordinateSystem;
@@ -161,4 +147,8 @@ const turnoutRelations = computed(() => {
   );
   return Array.from(new Set(ref));
 });
+
+onUnmounted(() => {
+  drawStore.unbindFormData(axleCountingModel);
+});
 </script>

src/components/draw-app/properties/LinkProperty.vue

@@ -62,27 +62,18 @@
 import { LinkData } from 'src/drawApp/graphics/LinkInteraction';
 import { Link } from 'src/graphics/link/Link';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch } from 'vue';
+import { onMounted, onUnmounted, reactive } from 'vue';
 
 const drawStore = useDrawStore();
 const linkModel = reactive(new LinkData());
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Link.Type) {
-      // console.log('link变更');
-      linkModel.copyFrom(val.saveData() as LinkData);
-    }
-  }
-);
 
 onMounted(() => {
   // console.log('link 属性表单 mounted');
   const link = drawStore.selectedGraphic as Link;
   if (link) {
     linkModel.copyFrom(link.saveData());
+    drawStore.bindFormData(linkModel);
   }
 });
 
@@ -93,4 +84,8 @@ function onUpdate() {
     drawStore.getDrawApp().updateGraphicAndRecord(link, linkModel);
   }
 }
+
+onUnmounted(() => {
+  drawStore.unbindFormData(linkModel);
+});
 </script>

src/components/draw-app/properties/LogicSectionProperty.vue

@@ -14,23 +14,28 @@
 import { LogicSectionData } from 'src/drawApp/graphics/LogicSectionInteraction';
 import { LogicSection } from 'src/graphics/logicSection/LogicSection';
 import { useDrawStore } from 'src/stores/draw-store';
-import { shallowRef, watchEffect } from 'vue';
+import { onMounted, onUnmounted, reactive } from 'vue';
 
 const drawStore = useDrawStore();
 
-const sectionModel = shallowRef(new LogicSectionData());
+const sectionModel = reactive(new LogicSectionData());
 
-watchEffect(() => {
+onMounted(() => {
   const section = drawStore.selectedGraphic;
   if (section && section instanceof LogicSection) {
-    sectionModel.value = section.saveData();
+    sectionModel.copyFrom(section.saveData());
+    drawStore.bindFormData(sectionModel);
   }
 });
 
 const onUpdate = () => {
   const section = drawStore.selectedGraphic as LogicSection;
   if (section) {
-    drawStore.getDrawApp().updateGraphicAndRecord(section, sectionModel.value);
+    drawStore.getDrawApp().updateGraphicAndRecord(section, sectionModel);
   }
 };
+
+onUnmounted(() => {
+  drawStore.unbindFormData(sectionModel);
+});
 </script>

src/components/draw-app/properties/PathLineProperty.vue

@@ -55,22 +55,12 @@
 import { PathLineData } from 'src/drawApp/graphics/PathLineInteraction';
 import { PathLine } from 'src/graphics/pathLine/PathLine';
 import { useDrawStore } from 'src/stores/draw-store';
-import { reactive, onMounted, watch } from 'vue';
+import { reactive, onMounted, onUnmounted } from 'vue';
 import { getLineList } from 'src/api/LineInfoApi';
 const drawStore = useDrawStore();
 const pathLineModel = reactive(new PathLineData());
 const lineList: { label: string; value: string }[] = reactive([]);
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == PathLine.Type) {
-      pathLineModel.copyFrom(val.saveData() as PathLineData);
-    }
-  }
-);
-
 onMounted(() => {
   getLineList()
     .then((res) => {
@@ -84,6 +74,7 @@ onMounted(() => {
   const pathLine = drawStore.selectedGraphic as PathLine;
   if (pathLine) {
     pathLineModel.copyFrom(pathLine.saveData());
+    drawStore.bindFormData(pathLineModel);
   }
 });
 
@@ -93,4 +84,8 @@ function onUpdate() {
     drawStore.getDrawApp().updateGraphicAndRecord(pathLine, pathLineModel);
   }
 }
+
+onUnmounted(() => {
+  drawStore.unbindFormData(pathLineModel);
+});
 </script>

src/components/draw-app/properties/PlatformProperty.vue

@@ -51,7 +51,7 @@ import { PlatformData } from 'src/drawApp/graphics/PlatformInteraction';
 import { Platform } from 'src/graphics/platform/Platform';
 import { Station } from 'src/graphics/station/Station';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
 
 const drawStore = useDrawStore();
 const platformModel = reactive(new PlatformData());
@@ -83,29 +83,11 @@ enum showUpData {
   false = '下行',
 }
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Platform.Type) {
-      platformModel.copyFrom(val.saveData() as PlatformData);
-      hasDoor.value = (showSelectData as never)[platformModel.hasdoor + ''];
-      direction.value = (showSelectData as never)[platformModel.direction];
-      upAndDown.value = (showUpData as never)[platformModel.up + ''];
-      if (platformModel.refStation) {
-        const refStation = val.queryStore.queryById<Station>(
-          platformModel.refStation
-        ) as Station;
-        stationName.value = refStation.datas.name;
-      }
-    }
-  }
-);
-
 onMounted(() => {
   const platform = drawStore.selectedGraphic as Platform;
   if (platform) {
     platformModel.copyFrom(platform.saveData());
+    drawStore.bindFormData(platformModel);
     hasDoor.value = (showSelectData as never)[platformModel.hasdoor + ''];
     direction.value = (showSelectData as never)[platformModel.direction];
     upAndDown.value = (showUpData as never)[platformModel.up + ''];
@@ -127,4 +109,8 @@ function onUpdate() {
     drawStore.getDrawApp().updateGraphicAndRecord(platform, platformModel);
   }
 }
+
+onUnmounted(() => {
+  drawStore.unbindFormData(platformModel);
+});
 </script>

src/components/draw-app/properties/RectProperty.vue

@@ -69,25 +69,16 @@
 import { RectData } from 'src/drawApp/graphics/RectInteraction';
 import { Rect } from 'src/graphics/rect/Rect';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch } from 'vue';
+import { onMounted, onUnmounted, reactive } from 'vue';
 
 const drawStore = useDrawStore();
 const rectModel = reactive(new RectData());
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Rect.Type) {
-      rectModel.copyFrom(val.saveData() as RectData);
-    }
-  }
-);
-
 onMounted(() => {
   const Rect = drawStore.selectedGraphic as Rect;
   if (Rect) {
     rectModel.copyFrom(Rect.saveData());
+    drawStore.bindFormData(rectModel);
   }
 });
 
@@ -97,4 +88,8 @@ function onUpdate() {
     drawStore.getDrawApp().updateGraphicAndRecord(Rect, rectModel);
   }
 }
+
+onUnmounted(() => {
+  drawStore.unbindFormData(rectModel);
+});
 </script>

src/components/draw-app/properties/RunLineProperty.vue

@@ -121,7 +121,7 @@
 import { RunLineData } from 'src/drawApp/graphics/RunLineInteraction';
 import { RunLine } from 'src/graphics/runLine/RunLine';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch, ref } from 'vue';
+import { onMounted, reactive, onUnmounted } from 'vue';
 import { Point } from 'pixi.js';
 import {
   IStationLineData,
@@ -134,16 +134,6 @@ const runLineModel = reactive(new RunLineData());
 const stationLines: IStationLineData[] = reactive([]);
 const lineList: { label: string; value: string }[] = reactive([]);
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == RunLine.Type) {
-      runLineModel.copyFrom(val.saveData() as RunLineData);
-    }
-  }
-);
-
 onMounted(() => {
   getLineList()
     .then((res) => {
@@ -161,6 +151,7 @@ onMounted(() => {
   stations.forEach((item) => stationLines.push(item.datas));
   if (runLine) {
     runLineModel.copyFrom(runLine.saveData());
+    drawStore.bindFormData(runLineModel);
   }
 });
 
@@ -187,4 +178,8 @@ function generateContainSta() {
     runLineModel.copyFrom(runLine.saveData());
   }
 }
+
+onUnmounted(() => {
+  drawStore.unbindFormData(runLineModel);
+});
 </script>

src/components/draw-app/properties/SectionProperty.vue

@@ -78,11 +78,11 @@ import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
 import { Section, SectionType } from 'src/graphics/section/Section';
 import { Turnout } from 'src/graphics/turnout/Turnout';
 import { useDrawStore } from 'src/stores/draw-store';
-import { computed, shallowRef, watchEffect } from 'vue';
+import { computed, onMounted, onUnmounted, reactive } from 'vue';
 
 const drawStore = useDrawStore();
 
-const sectionModel = shallowRef(new SectionData());
+const sectionModel = reactive(new SectionData());
 
 const sectionRelations = computed(() => {
   const section = drawStore.selectedGraphic as Section;
@@ -137,17 +137,23 @@ const axleCountingRelations = computed(() => {
     (relation) => relation.getOtherGraphic<AxleCounting>(section).datas.code
   );
 });
-watchEffect(() => {
+
+onMounted(() => {
   const section = drawStore.selectedGraphic;
   if (section && section instanceof Section) {
-    sectionModel.value = section.saveData();
+    sectionModel.copyFrom(section.saveData());
+    drawStore.bindFormData(sectionModel);
   }
 });
 
 const onUpdate = () => {
   const section = drawStore.selectedGraphic as Section;
   if (section) {
-    drawStore.getDrawApp().updateGraphicAndRecord(section, sectionModel.value);
+    drawStore.getDrawApp().updateGraphicAndRecord(section, sectionModel);
   }
 };
+
+onUnmounted(() => {
+  drawStore.unbindFormData(sectionModel);
+});
 </script>

src/components/draw-app/properties/SeparatorProperty.vue

@@ -19,7 +19,7 @@
 import { SeparatorData } from 'src/drawApp/graphics/SeparatorInteraction';
 import { Separator, separatorTypeEnum } from 'src/graphics/separator/Separator';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch } from 'vue';
+import { onMounted, onUnmounted, reactive } from 'vue';
 
 const drawStore = useDrawStore();
 const separatorModel = reactive(new SeparatorData());
@@ -31,20 +31,11 @@ const typeOptions = [
   { label: '右断路分隔符', value: separatorTypeEnum.endB },
 ];
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Separator.Type) {
-      separatorModel.copyFrom(val.saveData() as SeparatorData);
-    }
-  }
-);
-
 onMounted(() => {
   const Separator = drawStore.selectedGraphic as Separator;
   if (Separator) {
     separatorModel.copyFrom(Separator.saveData());
+    drawStore.bindFormData(separatorModel);
   }
 });
 
@@ -54,4 +45,8 @@ function onUpdate() {
     drawStore.getDrawApp().updateGraphicAndRecord(Separator, separatorModel);
   }
 }
+
+onUnmounted(() => {
+  drawStore.unbindFormData(separatorModel);
+});
 </script>

src/components/draw-app/properties/SignalProperty.vue

@@ -32,7 +32,7 @@
 import { SignalData } from 'src/drawApp/graphics/SignalInteraction';
 import { Signal } from 'src/graphics/signal/Signal';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch } from 'vue';
+import { onMounted, onUnmounted, reactive } from 'vue';
 
 const drawStore = useDrawStore();
 const signalModel = reactive(new SignalData());
@@ -45,25 +45,11 @@ const CoordinateSystemOptions = [
   { label: '换线', value: 'TRANSFER' },
 ];
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Signal.Type) {
-      signalModel.copyFrom(val.saveData() as SignalData);
-      if (signalModel.kilometerSystem) {
-        kilometerSystem.coordinateSystem =
-          signalModel.kilometerSystem.coordinateSystem;
-        kilometerSystem.kilometer = signalModel.kilometerSystem.kilometer;
-      }
-    }
-  }
-);
-
 onMounted(() => {
   const signal = drawStore.selectedGraphic as Signal;
   if (signal) {
     signalModel.copyFrom(signal.saveData());
+    drawStore.bindFormData(signalModel);
     if (signalModel.kilometerSystem) {
       kilometerSystem.coordinateSystem =
         signalModel.kilometerSystem.coordinateSystem;
@@ -82,4 +68,8 @@ function onUpdate() {
     drawStore.getDrawApp().updateGraphicAndRecord(signal, signalModel);
   }
 }
+
+onUnmounted(() => {
+  drawStore.unbindFormData(signalModel);
+});
 </script>

src/components/draw-app/properties/StationLineProperty.vue

@@ -35,7 +35,7 @@
 import { StationLineData } from 'src/drawApp/graphics/StationLineInteraction';
 import { StationLine } from 'src/graphics/stationLine/StationLine';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
 
 const drawStore = useDrawStore();
 const stationLineModel = reactive(new StationLineData());
@@ -50,23 +50,11 @@ enum showSelectData {
   false = '否',
 }
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == StationLine.Type) {
-      stationLineModel.copyFrom(val.saveData() as StationLineData);
-      hasTransfer.value = (showSelectData as never)[
-        stationLineModel.hasTransfer + ''
-      ];
-    }
-  }
-);
-
 onMounted(() => {
   const stationLine = drawStore.selectedGraphic as StationLine;
   if (stationLine) {
     stationLineModel.copyFrom(stationLine.saveData());
+    drawStore.bindFormData(stationLineModel);
     hasTransfer.value = (showSelectData as never)[
       stationLineModel.hasTransfer + ''
     ];
@@ -84,4 +72,8 @@ function onUpdate() {
       .updateGraphicAndRecord(stationLine, stationLineModel);
   }
 }
+
+onUnmounted(() => {
+  drawStore.unbindFormData(stationLineModel);
+});
 </script>

src/components/draw-app/properties/StationProperty.vue

@@ -58,7 +58,7 @@
 import { StationData } from 'src/drawApp/graphics/StationInteraction';
 import { Station } from 'src/graphics/station/Station';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
 
 const drawStore = useDrawStore();
 const stationModel = reactive(new StationData());
@@ -82,31 +82,11 @@ const CoordinateSystemOptions = [
   { label: '换线', value: 'TRANSFER' },
 ];
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Station.Type) {
-      stationModel.copyFrom(val.saveData() as StationData);
-      hasControl.value = (showSelectData as never)[
-        stationModel.hasControl + ''
-      ];
-      concentrationStations.value = (showSelectData as never)[
-        stationModel.concentrationStations + ''
-      ];
-      if (stationModel.kilometerSystem) {
-        kilometerSystem.coordinateSystem =
-          stationModel.kilometerSystem.coordinateSystem;
-        kilometerSystem.kilometer = stationModel.kilometerSystem.kilometer;
-      }
-    }
-  }
-);
-
 onMounted(() => {
   const station = drawStore.selectedGraphic as Station;
   if (station) {
     stationModel.copyFrom(station.saveData());
+    drawStore.bindFormData(stationModel);
     hasControl.value = (showSelectData as never)[stationModel.hasControl + ''];
     concentrationStations.value = (showSelectData as never)[
       stationModel.concentrationStations + ''
@@ -133,4 +113,8 @@ function onUpdate() {
     drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);
   }
 }
+
+onUnmounted(() => {
+  drawStore.unbindFormData(stationModel);
+});
 </script>

src/components/draw-app/properties/TrainProperty.vue

@@ -1,84 +0,0 @@
-<template>
-  <q-form>
-    <q-input outlined readonly v-model="trainModel.id" label="id" hint="" />
-    <q-input
-      outlined
-      v-model="trainModel.code"
-      label="车号"
-      hint=""
-      @blur="onUpdate"
-    />
-    <q-select
-      outlined
-      @blur="onUpdate"
-      v-model="hasBorder"
-      :options="optionsDoor"
-      label="是否有边框"
-    />
-    <q-select
-      outlined
-      @blur="onUpdate"
-      v-model="trainDirection"
-      :options="optionsDirection"
-      label="行驶方向"
-    />
-  </q-form>
-</template>
-
-<script setup lang="ts">
-import { TrainData } from 'src/drawApp/graphics/TrainInteraction';
-import { Train } from 'src/graphics/train/Train';
-import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, ref, watch } from 'vue';
-
-const drawStore = useDrawStore();
-const trainModel = reactive(new TrainData());
-const hasBorder = ref('是');
-const optionsDoor = ['是', '否'];
-const trainDirection = ref('向左');
-const optionsDirection = ['向左', '向右'];
-enum showSelect {
-  是 = 'true',
-  否 = 'false',
-  向左 = 'left',
-  向右 = 'right',
-}
-enum showSelectData {
-  true = '是',
-  false = '否',
-  left = '向左',
-  right = '向右',
-}
-
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == Train.Type) {
-      trainModel.copyFrom(val.saveData() as TrainData);
-      hasBorder.value = (showSelectData as never)[trainModel.hasBorder + ''];
-      trainDirection.value = (showSelectData as never)[
-        trainModel.trainDirection
-      ];
-    }
-  }
-);
-
-onMounted(() => {
-  const train = drawStore.selectedGraphic as Train;
-  if (train) {
-    trainModel.copyFrom(train.saveData());
-    hasBorder.value = (showSelectData as never)[trainModel.hasBorder + ''];
-    trainDirection.value = (showSelectData as never)[trainModel.trainDirection];
-  }
-});
-
-function onUpdate() {
-  trainModel.hasBorder = JSON.parse((showSelect as never)[hasBorder.value]);
-  trainModel.trainDirection = (showSelect as never)[trainDirection.value];
-  const train = drawStore.selectedGraphic as Train;
-  if (train) {
-    drawStore.getDrawApp().updateGraphicAndRecord(train, trainModel);
-  }
-}
-</script>

src/components/draw-app/properties/TrainWindowProperty.vue

@@ -60,25 +60,16 @@ import { LogicSection } from 'src/graphics/logicSection/LogicSection';
 import { Section } from 'src/graphics/section/Section';
 import { TrainWindow } from 'src/graphics/trainWindow/TrainWindow';
 import { useDrawStore } from 'src/stores/draw-store';
-import { computed, onMounted, reactive, watch } from 'vue';
+import { computed, onMounted, onUnmounted, reactive } from 'vue';
 
 const drawStore = useDrawStore();
 const trainWindowModel = reactive(new TrainWindowData());
 
-drawStore.$subscribe;
-watch(
-  () => drawStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == TrainWindow.Type) {
-      trainWindowModel.copyFrom(val.saveData() as TrainWindowData);
-    }
-  }
-);
-
 onMounted(() => {
   const trainWindow = drawStore.selectedGraphic as TrainWindow;
   if (trainWindow) {
     trainWindowModel.copyFrom(trainWindow.saveData());
+    drawStore.bindFormData(trainWindowModel);
   }
 });
 
@@ -111,4 +102,8 @@ const relatedTurnout = computed((): Section[] => {
   }
   return [];
 });
+
+onUnmounted(() => {
+  drawStore.unbindFormData(trainWindowModel);
+});
 </script>

src/components/draw-app/properties/TurnoutProperty.vue

@@ -75,7 +75,7 @@ import { TurnoutData } from 'src/drawApp/graphics/TurnoutInteraction';
 import { Section } from 'src/graphics/section/Section';
 import { Turnout } from 'src/graphics/turnout/Turnout';
 import { useDrawStore } from 'src/stores/draw-store';
-import { computed, reactive, shallowRef, watchEffect } from 'vue';
+import { computed, onMounted, onUnmounted, reactive } from 'vue';
 
 const drawStore = useDrawStore();
 const CoordinateSystemOptions = [
@@ -84,7 +84,7 @@ const CoordinateSystemOptions = [
   { label: '正线', value: 'MAIN_LINE' },
   { label: '换线', value: 'TRANSFER' },
 ];
-const turnoutModel = shallowRef(new TurnoutData());
+const turnoutModel = reactive(new TurnoutData());
 const kilometerSystem = reactive([
   { coordinateSystem: '', kilometer: 0 },
   { coordinateSystem: '', kilometer: 0 },
@@ -125,15 +125,15 @@ const turnoutRelations = computed(() => {
   );
 });
 
-watchEffect(() => {
+onMounted(() => {
   const turnout = drawStore.selectedGraphic;
   if (turnout && turnout instanceof Turnout) {
-    turnoutModel.value = turnout.saveData();
-    if (turnoutModel.value.kilometerSystem.length > 0) {
+    turnoutModel.copyFrom(turnout.saveData());
+    drawStore.bindFormData(turnoutModel);
+    if (turnoutModel.kilometerSystem.length > 0) {
       kilometerSystem.forEach((ks, i) => {
-        ks.coordinateSystem =
-          turnoutModel.value.kilometerSystem[i].coordinateSystem;
-        ks.kilometer = turnoutModel.value.kilometerSystem[i].kilometer;
+        ks.coordinateSystem = turnoutModel.kilometerSystem[i].coordinateSystem;
+        ks.kilometer = turnoutModel.kilometerSystem[i].kilometer;
       });
     }
   }
@@ -141,12 +141,16 @@ watchEffect(() => {
 
 const onUpdate = () => {
   const turnout = drawStore.selectedGraphic as Turnout;
-  turnoutModel.value.kilometerSystem = kilometerSystem.map((ks) => ({
+  turnoutModel.kilometerSystem = kilometerSystem.map((ks) => ({
     coordinateSystem: ks.coordinateSystem,
     kilometer: ks.kilometer,
   }));
   if (turnout) {
-    drawStore.getDrawApp().updateGraphicAndRecord(turnout, turnoutModel.value);
+    drawStore.getDrawApp().updateGraphicAndRecord(turnout, turnoutModel);
   }
 };
+
+onUnmounted(() => {
+  drawStore.unbindFormData(turnoutModel);
+});
 </script>

src/stores/draw-store.ts

@@ -1,6 +1,13 @@
 import { defineStore } from 'pinia';
 import { destroyDrawApp, getDrawApp, initDrawApp } from 'src/drawApp';
-import { DrawAssistant, IJlCanvas, IDrawApp, JlGraphic } from 'src/jl-graphic';
+import {
+  DrawAssistant,
+  IJlCanvas,
+  IDrawApp,
+  JlGraphic,
+  GraphicData,
+} from 'src/jl-graphic';
+import { markRaw } from 'vue';
 
 export const useDrawStore = defineStore('draw', {
   state: () => ({
@@ -65,12 +72,20 @@ export const useDrawStore = defineStore('draw', {
           }
         }
       });
-      app.on('graphicselectedchange', () => {
-        this.selectedGraphics = app.selectedGraphics;
+      app.on('graphicselected', (graphics) => {
+        this.selectedGraphics = markRaw(graphics);
       });
       this.selectedGraphics = [];
       return app;
     },
+    bindFormData(form: GraphicData): void {
+      const app = this.getDrawApp();
+      app.bindFormData(form);
+    },
+    unbindFormData(form: GraphicData): void {
+      const app = this.getDrawApp();
+      app.unbindFormData(form);
+    },
     destroy() {
       // console.log('绘制状态清空，绘制应用销毁');
       this.drawAssistant = null;