From bcd75ea5830da2f088e7c7cea939e36c23d8e9a4 Mon Sep 17 00:00:00 2001
From: dong <58670809@qq.com>
Date: Fri, 11 Aug 2023 16:12:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=8E=A7=E5=88=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../draw-app/dialogs/LayerControlDialog.vue   |  41 ++++++-
 src/drawApp/index.ts                          |  70 +++++-------
 src/drawApp/lineApp.ts                        | 106 ++++++++++++------
 3 files changed, 139 insertions(+), 78 deletions(-)

diff --git a/src/components/draw-app/dialogs/LayerControlDialog.vue b/src/components/draw-app/dialogs/LayerControlDialog.vue
index 53bdf16..936e405 100644
--- a/src/components/draw-app/dialogs/LayerControlDialog.vue
+++ b/src/components/draw-app/dialogs/LayerControlDialog.vue
@@ -10,6 +10,12 @@
           label="全部"
           @update:modelValue="allListFn"
         />
+        <q-checkbox
+          style="width: 150px"
+          v-model="defaultCheck"
+          label="默认显示"
+          @update:modelValue="defaultListFn"
+        />
       </q-card-section>
       <q-separator />
       <q-card-section class="row justify-center">
@@ -33,12 +39,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useLineStore } from 'src/stores/line-store';
 
 interface ItemData {
   label: string;
   value: string;
+  defaultShow: boolean;
 }
 
 const lineStore = useLineStore();
@@ -72,6 +79,7 @@ watch(
     if (val) {
       list.value = props.showLayer;
       allList.value = props.layerList.length == props.showLayer.length;
+      defaultCheck.value = isEqualArr(defaultShowList.value, list.value);
     }
   }
 );
@@ -83,6 +91,7 @@ watch(
   (val) => {
     lineStore.setShowLayer(val);
     allList.value = props.layerList.length == val.length;
+    defaultCheck.value = isEqualArr(defaultShowList.value, list.value);
     emits('setShowLayer', val);
   }
 );
@@ -90,5 +99,35 @@ watch(
 function onDialogCancel() {
   emits('onDialogClose');
 }
+
+const defaultCheck = ref(false);
+const defaultShowList = computed(() => {
+  const arr: string[] = [];
+  props.layerList.forEach((item) => {
+    if (item.defaultShow) {
+      arr.push(item.value);
+    }
+  });
+  return arr;
+});
+
+function defaultListFn() {
+  const arr: string[] = [];
+  if (defaultCheck.value) {
+    defaultShowList.value.forEach((item) => {
+      arr.push(item);
+    });
+    list.value = arr;
+  } else {
+    list.value = arr;
+  }
+}
+function isEqualArr(arr1: string[], arr2: string[]): boolean {
+  let s = false;
+  if (arr1.length === arr2.length && arr1.filter((t) => !arr2.includes(t))) {
+    s = true;
+  }
+  return s;
+}
 </script>
 <style scoped></style>
diff --git a/src/drawApp/index.ts b/src/drawApp/index.ts
index 224e276..55702fe 100644
--- a/src/drawApp/index.ts
+++ b/src/drawApp/index.ts
@@ -206,45 +206,29 @@ export function destroyDrawApp(): void {
   }
 }
 
-const showType = [
-  // 默认显示的图层
-  Section.Type,
-  AxleCounting.Type,
-  Platform.Type,
-  Station.Type,
-  Turnout.Type,
-  Signal.Type,
-  Separator.Type,
-  StopPosition.Type,
-  SpksSwitch.Type,
-  GatedBox.Type,
-  EsbButton.Type,
-  Transponder.Type,
-  TrainWindow.Type,
-  SlopeKiloMarker.Type,
-  Slope.Type,
-  CurvatureKiloMarker.Type,
-  Curvature.Type,
-];
 export const drawLayerList = [
-  // 图层列表
-  { label: '区段', value: Section.Type },
-  { label: 'SectionLink', value: SectionLink.Type },
-  { label: '计轴', value: AxleCounting.Type },
-  { label: '站台', value: Platform.Type },
-  { label: '车站', value: Station.Type },
-  { label: '道岔', value: Turnout.Type },
-  { label: '信号机', value: Signal.Type },
-  { label: '分隔符', value: Separator.Type },
-  { label: '停车位置标', value: StopPosition.Type },
-  { label: 'Spks开关', value: SpksSwitch.Type },
-  { label: '门控箱', value: GatedBox.Type },
-  { label: '紧急关闭按钮', value: EsbButton.Type },
-  { label: '应答器', value: Transponder.Type },
-  { label: '车次窗', value: TrainWindow.Type },
-  { label: '计轴区段', value: AxleCountingSection.Type },
-  { label: '逻辑区段', value: LogicSection.Type },
-  { label: 'Link', value: Link.Type },
+  // 图层列表  默认显示的图层defaultShow: true
+  { label: '区段', value: Section.Type, defaultShow: true },
+  { label: 'SectionLink', value: SectionLink.Type, defaultShow: false },
+  { label: '计轴', value: AxleCounting.Type, defaultShow: true },
+  { label: '站台', value: Platform.Type, defaultShow: true },
+  { label: '车站', value: Station.Type, defaultShow: true },
+  { label: '道岔', value: Turnout.Type, defaultShow: true },
+  { label: '信号机', value: Signal.Type, defaultShow: true },
+  { label: '分隔符', value: Separator.Type, defaultShow: true },
+  { label: '停车位置标', value: StopPosition.Type, defaultShow: true },
+  { label: 'Spks开关', value: SpksSwitch.Type, defaultShow: true },
+  { label: '门控箱', value: GatedBox.Type, defaultShow: true },
+  { label: '紧急关闭按钮', value: EsbButton.Type, defaultShow: true },
+  { label: '应答器', value: Transponder.Type, defaultShow: true },
+  { label: '车次窗', value: TrainWindow.Type, defaultShow: true },
+  { label: '计轴区段', value: AxleCountingSection.Type, defaultShow: false },
+  { label: '逻辑区段', value: LogicSection.Type, defaultShow: false },
+  { label: 'Link', value: Link.Type, defaultShow: false },
+  { label: '坡度公里标', value: SlopeKiloMarker.Type, defaultShow: true },
+  { label: '坡度', value: Slope.Type, defaultShow: true },
+  { label: '曲度公里标', value: CurvatureKiloMarker.Type, defaultShow: true },
+  { label: '曲度', value: Curvature.Type, defaultShow: true },
 ];
 
 export function initDrawApp(dom: HTMLElement): JlDrawApp {
@@ -558,16 +542,22 @@ export async function loadLinkDatas(app: GraphicApp) {
 }
 
 function initShowLayer(app: GraphicApp) {
+  const showTypeList: string[] = [];
+  drawLayerList.forEach((item) => {
+    if (item.defaultShow) {
+      showTypeList.push(item.value);
+    }
+  });
   const alllGraphic = app.queryStore.getAllGraphics();
   alllGraphic.forEach((g) => {
-    if (showType.includes(g.type)) {
+    if (showTypeList.includes(g.type)) {
       g.visible = true;
     } else {
       g.visible = false;
     }
   });
   const lineStore = useLineStore();
-  lineStore.setShowLayer(showType);
+  lineStore.setShowLayer(showTypeList);
 }
 
 export async function loadDrawDatas(app: GraphicApp) {
diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts
index aa52021..be25aa8 100644
--- a/src/drawApp/lineApp.ts
+++ b/src/drawApp/lineApp.ts
@@ -48,13 +48,22 @@ import {
   AxleCountingTemplate,
 } from 'src/graphics/axleCounting/AxleCounting';
 import { AxleCountingData } from './graphics/AxleCountingInteraction';
-import { TrainWindowTemplate } from 'src/graphics/trainWindow/TrainWindow';
+import {
+  TrainWindow,
+  TrainWindowTemplate,
+} from 'src/graphics/trainWindow/TrainWindow';
 import { TrainWindowData } from './graphics/TrainWindowInteraction';
 import { useRoute } from 'vue-router';
 import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
 import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
-import { AxleCountingSectionTemplate } from 'src/graphics/axleCountingSection/AxleCountingSection';
-import { LogicSectionTemplate } from 'src/graphics/logicSection/LogicSection';
+import {
+  AxleCountingSection,
+  AxleCountingSectionTemplate,
+} from 'src/graphics/axleCountingSection/AxleCountingSection';
+import {
+  LogicSection,
+  LogicSectionTemplate,
+} from 'src/graphics/logicSection/LogicSection';
 import {
   SectionLink,
   SectionLinkTemplate,
@@ -87,10 +96,22 @@ import {
   TransponderTemplate,
 } from 'src/graphics/transponder/Transponder';
 import { TransponderData } from './graphics/TransponderInteraction';
-import { SlopeKiloMarkerTemplate } from 'src/graphics/slopeKiloMarker/SlopeKiloMarker';
+import {
+  SlopeKiloMarker,
+  SlopeKiloMarkerTemplate,
+} from 'src/graphics/slopeKiloMarker/SlopeKiloMarker';
 import { SlopeKiloMarkerData } from './graphics/SlopeKiloMarkerInteraction';
 import { Link, LinkTemplate } from 'src/graphics/link/Link';
 import { LinkData } from './graphics/LinkInteraction';
+import { Slope, SlopeTemplate } from 'src/graphics/slope/Slope';
+import {
+  CurvatureKiloMarker,
+  CurvatureKiloMarkerTemplate,
+} from 'src/graphics/curvatureKiloMarker/CurvatureKiloMarker';
+import { Curvature, CurvatureTemplate } from 'src/graphics/curvature/Curvature';
+import { SlopeData } from './graphics/SlopeInteraction';
+import { CurvatureKiloMarkerData } from './graphics/CurvatureKiloMarkerInteraction';
+import { CurvatureData } from './graphics/CurvatureInteraction';
 
 let lineApp: GraphicApp | null = null;
 
@@ -117,39 +138,31 @@ const DefaultCanvasMenu = new ContextMenu({
     },
   ],
 });
-const showType = [
-  // 默认显示的图层
-  Section.Type,
-  Platform.Type,
-  Station.Type,
-  Turnout.Type,
-  Signal.Type,
-  Separator.Type,
-  Train.Type,
-  StopPosition.Type,
-  SpksSwitch.Type,
-  GatedBox.Type,
-  EsbButton.Type,
-  Transponder.Type,
-];
 
 export const layerList = [
-  // 图层列表
-  { label: '区段', value: Section.Type },
-  { label: 'SectionLink', value: SectionLink.Type },
-  { label: '计轴', value: AxleCounting.Type },
-  { label: '站台', value: Platform.Type },
-  { label: '车站', value: Station.Type },
-  { label: '道岔', value: Turnout.Type },
-  { label: '信号机', value: Signal.Type },
-  { label: '分隔符', value: Separator.Type },
-  { label: '列车', value: Train.Type },
-  { label: '停车位置标', value: StopPosition.Type },
-  { label: 'Spks开关', value: SpksSwitch.Type },
-  { label: '门控箱', value: GatedBox.Type },
-  { label: '紧急关闭按钮', value: EsbButton.Type },
-  { label: '应答器', value: Transponder.Type },
-  { label: 'Link', value: Link.Type },
+  // 图层列表   默认显示的图层defaultShow: true
+  { label: '区段', value: Section.Type, defaultShow: true },
+  { label: 'SectionLink', value: SectionLink.Type, defaultShow: false },
+  { label: '计轴', value: AxleCounting.Type, defaultShow: false },
+  { label: '站台', value: Platform.Type, defaultShow: true },
+  { label: '车站', value: Station.Type, defaultShow: true },
+  { label: '道岔', value: Turnout.Type, defaultShow: true },
+  { label: '信号机', value: Signal.Type, defaultShow: true },
+  { label: '分隔符', value: Separator.Type, defaultShow: true },
+  { label: '列车', value: Train.Type, defaultShow: true },
+  { label: '停车位置标', value: StopPosition.Type, defaultShow: true },
+  { label: 'Spks开关', value: SpksSwitch.Type, defaultShow: true },
+  { label: '门控箱', value: GatedBox.Type, defaultShow: true },
+  { label: '紧急关闭按钮', value: EsbButton.Type, defaultShow: true },
+  { label: '应答器', value: Transponder.Type, defaultShow: true },
+  { label: 'Link', value: Link.Type, defaultShow: false },
+  { label: '车次窗', value: TrainWindow.Type, defaultShow: false },
+  { label: '计轴区段', value: AxleCountingSection.Type, defaultShow: false },
+  { label: '逻辑区段', value: LogicSection.Type, defaultShow: false },
+  { label: '坡度公里标', value: SlopeKiloMarker.Type, defaultShow: false },
+  { label: '坡度', value: Slope.Type, defaultShow: false },
+  { label: '曲度公里标', value: CurvatureKiloMarker.Type, defaultShow: false },
+  { label: '曲度', value: Curvature.Type, defaultShow: false },
 ];
 
 export function initLineApp(dom: HTMLElement): GraphicApp {
@@ -174,6 +187,10 @@ export function initLineApp(dom: HTMLElement): GraphicApp {
     new TransponderTemplate(new TransponderData()),
     new SlopeKiloMarkerTemplate(new SlopeKiloMarkerData()),
     new LinkTemplate(new LinkData()),
+    new TrainWindowTemplate(new TrainWindowData()),
+    new SlopeTemplate(new SlopeData()),
+    new CurvatureKiloMarkerTemplate(new CurvatureKiloMarkerData()),
+    new CurvatureTemplate(new CurvatureData()),
   ];
   lineApp.registerGraphicTemplates(...graphicTemplate);
   lineApp.setOptions({
@@ -292,11 +309,26 @@ export async function loadLineDatas(app: GraphicApp) {
     storage.slopeKiloMarker.forEach((slopeKilometer) => {
       datas.push(new SlopeKiloMarkerData(slopeKilometer));
     });
+    storage.curvatureKiloMarker.forEach((curvatureKiloMarker) => {
+      datas.push(new CurvatureKiloMarkerData(curvatureKiloMarker));
+    });
+    storage.slopes.forEach((slope) => {
+      datas.push(new SlopeData(slope));
+    });
+    storage.curvatures.forEach((curvature) => {
+      datas.push(new CurvatureData(curvature));
+    });
     await app.loadGraphic(datas);
 
+    const showTypeList: string[] = [];
+    layerList.forEach((item) => {
+      if (item.defaultShow) {
+        showTypeList.push(item.value);
+      }
+    });
     const alllGraphic = (lineApp as GraphicApp).queryStore.getAllGraphics();
     alllGraphic.forEach((g) => {
-      if (showType.includes(g.type)) {
+      if (showTypeList.includes(g.type)) {
         g.visible = true;
       } else {
         g.visible = false;
@@ -306,7 +338,7 @@ export async function loadLineDatas(app: GraphicApp) {
         (g as Transponder).labelGraphic.visible = false;
       }
     });
-    lineStore.setShowLayer(showType);
+    lineStore.setShowLayer(showTypeList);
     app.enableWsMassaging({
       engine: ClientEngine.Centrifugo,
       wsUrl: `${getWebsocketUrl()}`,