图层显示弹窗调整

src/components/draw-app/dialogs/LayerControlDialog.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <q-dialog ref="dialogRef">
+  <q-dialog v-model="lineStore.showLayerDialog">
     <q-card class="q-pa-md">
       <q-card-section> <div class="text-h6">显示控制</div> </q-card-section>
       <q-card-section>
@@ -16,7 +16,7 @@
         <div class="row">
           <q-checkbox
             class="col-4"
-            v-for="(item, index) in props.layerList"
+            v-for="(item, index) in layerList"
             :key="index"
             v-model="list"
             :label="item.label"
@@ -26,35 +26,25 @@
       </q-card-section>
       <q-card-actions align="right" class="text-primary">
         <q-btn flat label="取消" @click="onDialogCancel" v-close-popup />
-        <q-btn flat label="确认" @click="onDialogOK(list)" v-close-popup />
+        <!-- <q-btn flat label="确认" @click="onDialogOK(list)" v-close-popup /> -->
       </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
 
 <script setup lang="ts">
-import { useDialogPluginComponent } from 'quasar';
-import { onMounted, ref, watch } from 'vue';
-interface ItemData {
-  label: string;
-  value: string;
-}
-const props = defineProps<{
-  layerList: ItemData[];
-  showLayer: string[];
-}>();
+import { ref, watch } from 'vue';
+import { layerList } from 'src/drawApp/lineApp';
+import { useLineStore } from 'src/stores/line-store';
+const lineStore = useLineStore();
+
 const list = ref<string[]>([]);
 const allList = ref(false);
 
-onMounted(() => {
-  list.value = props.showLayer;
-  allList.value = props.layerList.length == props.showLayer.length;
-});
-
 function allListFn() {
   const arr: string[] = [];
   if (allList.value) {
-    props.layerList.forEach((item) => {
+    layerList.forEach((item) => {
       arr.push(item.value);
     });
     list.value = arr;
@@ -64,14 +54,34 @@ function allListFn() {
 }
 
 watch(
-  () => list.value,
+  () => lineStore.showLayerDialog,
   (val) => {
-    allList.value = props.layerList.length == val.length;
+    if (val) {
+      list.value = lineStore.showLayer;
+      allList.value = layerList.length == lineStore.showLayer.length;
+    }
   }
 );
 
-defineEmits([...useDialogPluginComponent.emits]);
+watch(
+  () => list.value,
+  (val) => {
+    lineStore.setShowLayer(val);
+    allList.value = layerList.length == val.length;
+    const lineApp = lineStore.getLineApp();
+    const alllGraphic = lineApp.queryStore.getAllGraphics();
+    alllGraphic.forEach((g) => {
+      if (val.includes(g.type)) {
+        g.visible = true;
+      } else {
+        g.visible = false;
+      }
+    });
+  }
+);
 
-const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+function onDialogCancel() {
+  lineStore.setShowLayerDialog(false);
+}
 </script>
 <style scoped></style>

src/drawApp/lineApp.ts

@@ -67,7 +67,7 @@ import {
 } from './graphics/SectionLinkInteraction';
 import { AxleCountingSectionData } from './graphics/AxleCountingSectionInteraction';
 import { LogicSectionData } from './graphics/LogicSectionInteraction';
-import { Dialog, Notify, QNotifyUpdateOptions } from 'quasar';
+import { Notify, QNotifyUpdateOptions } from 'quasar';
 import {
   StopPosition,
   StopPositionTemplate,
@@ -87,7 +87,6 @@ import {
   TransponderTemplate,
 } from 'src/graphics/transponder/Transponder';
 import { TransponderData } from './graphics/TransponderInteraction';
-import LayerControlDialog from 'src/components/draw-app/dialogs/LayerControlDialog.vue';
 
 let lineApp: GraphicApp | null = null;
 
@@ -129,8 +128,7 @@ const showType = [
 ];
 const physicShowType = [...showType, Section.Type];
 
-let showLayer = [...physicShowType];
-const layerList = [
+export const layerList = [
   { label: '区段', value: Section.Type },
   { label: 'link', value: SectionLink.Type },
   { label: '计轴', value: AxleCounting.Type },
@@ -198,25 +196,9 @@ export function initLineApp(dom: HTMLElement): GraphicApp {
   // 画布右键菜单
   lineApp.registerMenu(DefaultCanvasMenu);
   lineApp.canvas.on('_rightclick', (e) => {
-    const alllGraphic = (lineApp as GraphicApp).queryStore.getAllGraphics();
+    const lineStore = useLineStore();
     showOptions.handler = () => {
-      Dialog.create({
-        title: '显示控制',
-        message: '',
-        component: LayerControlDialog,
-        componentProps: { layerList, showLayer },
-        cancel: true,
-        persistent: true,
-      }).onOk((data: string[]) => {
-        alllGraphic.forEach((g) => {
-          if (data.includes(g.type)) {
-            g.visible = true;
-          } else {
-            g.visible = false;
-          }
-        });
-        showLayer = data;
-      });
+      lineStore.setShowLayerDialog(true);
     };
     DefaultCanvasMenu.open(e.global);
   });
@@ -295,7 +277,7 @@ export async function loadLineDatas(app: GraphicApp) {
 
     const alllGraphic = (lineApp as GraphicApp).queryStore.getAllGraphics();
     alllGraphic.forEach((g) => {
-      if (showLayer.includes(g.type)) {
+      if (physicShowType.includes(g.type)) {
         g.visible = true;
       } else {
         g.visible = false;
@@ -305,7 +287,7 @@ export async function loadLineDatas(app: GraphicApp) {
         (g as Transponder).labelGraphic.visible = false;
       }
     });
-
+    lineStore.setShowLayer(physicShowType);
     app.enableWsMassaging({
       engine: ClientEngine.Centrifugo,
       wsUrl: `${getWebsocketUrl()}`,

src/layouts/LineLayout.vue

@@ -21,6 +21,7 @@
     <q-page-container>
       <div id="line-app-container"></div>
     </q-page-container>
+    <LayerControlDialog></LayerControlDialog>
   </q-layout>
 </template>
 
@@ -33,6 +34,7 @@ import { destroySimulation } from 'src/api/Simulation';
 import StateProperties from 'src/components/line-app/StateProperties.vue';
 // import { Train } from 'src/graphics/train/Train';
 // import { Turnout } from 'src/graphics/turnout/Turnout';
+import LayerControlDialog from 'src/components/draw-app/dialogs/LayerControlDialog.vue';
 
 const canvasWidth = ref(0);
 const canvasHeight = ref(0);

src/stores/line-store.ts

@@ -10,6 +10,8 @@ export const useLineStore = defineStore('line', {
     simulationId: null as string | null,
     socketStates: null as GraphicState[] | null,
     stateProCount: 0,
+    showLayer: [] as string[], // 显示的图层
+    showLayerDialog: false, // 显示图层控制弹窗
   }),
   getters: {
     selectedGraphicType: (state) => {
@@ -58,5 +60,11 @@ export const useLineStore = defineStore('line', {
     stateProCountIncrease() {
       this.stateProCount++;
     },
+    setShowLayer(v: string[]) {
+      this.showLayer = v;
+    },
+    setShowLayerDialog(v: boolean) {
+      this.showLayerDialog = v;
+    },
   },
 });