电子地图

rtsa-proto-msg

@@ -1 +1 @@
-Subproject commit f09c8fb24492d99245119dae9e723fb609b19606
+Subproject commit 8d2f5c7506e63202847cab4bd6a935a7310aa000

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

@@ -0,0 +1,208 @@
+<template>
+  <draggable-dialog
+    seamless
+    :title="noSelect ? '显示控制' : '显示 / 选择'"
+    :height="height"
+  >
+    <q-tabs
+      v-if="!noSelect"
+      v-model="tab"
+      dense
+      active-color="primary"
+      indicator-color="primary"
+      align="justify"
+      narrow-indicator
+    >
+      <q-tab
+        v-for="(item, index) in tabList"
+        :key="index"
+        :name="item.value"
+        :label="item.label"
+      />
+    </q-tabs>
+    <q-separator />
+    <q-tab-panels v-model="tab" animated keep-alive>
+      <q-tab-panel name="show">
+        <q-card class="q-pa-sm">
+          <q-card-section class="q-pa-sm">
+            <q-checkbox
+              style="width: 150px"
+              v-model="allList"
+              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">
+            <div class="row">
+              <q-checkbox
+                class="col-4"
+                v-for="(item, index) in props.layerList"
+                :key="index"
+                v-model="list"
+                :label="item.label"
+                :val="item.value"
+              />
+            </div>
+          </q-card-section>
+          <q-card-actions align="right" class="text-primary">
+            <q-btn flat label="取消" v-close-popup />
+          </q-card-actions>
+        </q-card>
+      </q-tab-panel>
+      <q-tab-panel name="select">
+        <q-card class="q-pa-md">
+          <q-card-section class="row justify-center">
+            <div class="row">
+              <q-checkbox
+                class="col-4"
+                v-for="(item, index) in props.layerList"
+                :key="index"
+                v-model="selectList"
+                :label="item.label"
+                :val="item.value"
+              />
+            </div>
+          </q-card-section>
+          <q-card-actions align="right" class="text-primary">
+            <q-btn flat label="取消" v-close-popup />
+          </q-card-actions>
+        </q-card>
+      </q-tab-panel>
+    </q-tab-panels>
+  </draggable-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useDrawStore } from 'src/stores/electronicMap-draw-store';
+import DraggableDialog from 'src/components/common/DraggableDialog.vue';
+import { IDrawApp, IGraphicApp } from 'jl-graphic';
+
+interface ItemData {
+  label: string;
+  value: string;
+  defaultShow?: boolean;
+}
+
+const drawStore = useDrawStore();
+
+const list = ref<string[]>([]);
+const allList = ref(false);
+
+const props = defineProps<{
+  showDialog: boolean;
+  layerList: ItemData[];
+  showLayer: string[];
+  app: IDrawApp | IGraphicApp;
+  noSelect?: boolean; // 没有选择tab
+}>();
+
+function allListFn() {
+  const arr: string[] = [];
+  if (allList.value) {
+    props.layerList.forEach((item) => {
+      arr.push(item.value);
+    });
+    list.value = arr;
+  } else {
+    list.value = arr;
+  }
+}
+
+onMounted(() => {
+  if (props.showDialog) {
+    list.value = props.showLayer;
+    allList.value = props.layerList.length == props.showLayer.length;
+    defaultCheck.value = isEqualArr(defaultShowList.value, list.value);
+  }
+});
+
+watch(
+  () => list.value,
+  (val) => {
+    drawStore.setShowLayer(val);
+    allList.value = props.layerList.length == val.length;
+    defaultCheck.value = isEqualArr(defaultShowList.value, list.value);
+    setShowLayer(val);
+  }
+);
+
+function setShowLayer(val: string[]) {
+  drawStore.setShowLayer(val);
+  const alllGraphic = props.app.queryStore.getAllGraphics();
+  alllGraphic.forEach((g) => {
+    if (val.includes(g.type)) {
+      g.visible = true;
+    } else {
+      g.visible = false;
+    }
+  });
+}
+
+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;
+}
+
+const tabList = [
+  {
+    label: '显示',
+    value: 'show',
+  },
+  {
+    label: '选择',
+    value: 'select',
+  },
+];
+const tab = ref('show');
+const selectList = ref<string[]>([]);
+
+watch(
+  () => selectList.value,
+  (val) => {
+    props.app.selectAllGraphics((g) => val.includes(g.type));
+  }
+);
+
+const height = computed(() => {
+  let h = 189;
+  const tH = props.noSelect ? 0 : 36;
+  const l = props.layerList.length / 3;
+  let t = h + tH + Math.ceil(l) * 40;
+  t = t > 700 ? 700 : t;
+  return t;
+});
+</script>
+<style scoped></style>

src/components/draw-app/electronicMapDrawProperties.vue

@@ -24,16 +24,32 @@
         <q-card-section>
           <platform-property
             v-if="drawStore.selectedGraphicType === Platform.Type"
-          ></platform-property>
+          />
           <station-property
             v-else-if="drawStore.selectedGraphicType === Station.Type"
-          ></station-property>
+          />
           <screenDoor-property
             v-else-if="drawStore.selectedGraphicType === ScreenDoor.Type"
-          ></screenDoor-property>
+          />
           <section-property
             v-else-if="drawStore.selectedGraphicType === Section.Type"
-          ></section-property>
+          />
+          <turnout-property
+            v-else-if="drawStore.selectedGraphicType === Turnout.Type"
+          />
+          <axleCounting-property
+            v-else-if="drawStore.selectedGraphicType === AxleCounting.Type"
+          />
+          <concentrationDividingLine-property
+            v-else-if="
+              drawStore.selectedGraphicType === ConcentrationDividingLine.Type
+            "
+          />
+          <separator-property
+            v-else-if="
+              drawStore.selectedGraphicType === Separator.Type
+            "
+          />
         </q-card-section>
       </template>
       <!-- <template v-else-if="drawStore.selectedGraphics.length > 1">
@@ -54,6 +70,14 @@ import ScreenDoorProperty from './properties/electronicMap/ScreenDoorProperty.vu
 import { ScreenDoor } from 'src/graphics/electronicMap/screenDoor/ScreenDoor';
 import SectionProperty from './properties/electronicMap/SectionProperty.vue';
 import { Section } from 'src/graphics/electronicMap/section/Section';
+import TurnoutProperty from './properties/electronicMap/TurnoutProperty.vue';
+import { Turnout } from 'src/graphics/electronicMap/turnout/Turnout';
+import AxleCountingProperty from './properties/electronicMap/AxleCountingProperty.vue';
+import { AxleCounting } from 'src/graphics/electronicMap/axleCounting/AxleCounting';
+import ConcentrationDividingLineProperty from './properties/electronicMap/ConcentrationDividingLineProperty.vue';
+import { ConcentrationDividingLine } from 'src/graphics/electronicMap/concentrationDividingLine/ConcentrationDividingLine';
+import SeparatorProperty from './properties/electronicMap/SeparatorProperty.vue';
+import { Separator } from 'src/graphics/electronicMap/separator/Separator';
 
 const drawStore = useDrawStore();
 </script>

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

@@ -0,0 +1,247 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="axleCountingModel.id" label="id" />
+    <q-input
+      outlined
+      label="区段检测点名称"
+      type="textarea"
+      @blur="onUpdate"
+      v-model="axleCountingModel.code"
+      lazy-rules
+      autogrow
+    />
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
+        <q-input
+          outlined
+          style="margin-top: 10px"
+          v-model="axleCountingModel.kilometerSystem.coordinateSystem"
+          @blur="onUpdate"
+          label="坐标系"
+        ></q-input>
+        <q-input
+          outlined
+          style="margin-top: 10px"
+          v-model.number="axleCountingModel.kilometerSystem.kilometer"
+          type="number"
+          @blur="onUpdate"
+          label="公里标(mm):"
+        />
+        <q-select
+          outlined
+          v-model="axleCountingModel.kilometerSystem.direction"
+          :options="directionOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="方向"
+        ></q-select>
+      </q-item>
+    </q-list>
+    <q-select
+      outlined
+      v-model="axleCountingModel.type"
+      :options="optionsDetectType"
+      map-options
+      emit-value
+      @update:model-value="onUpdate"
+      label="区段检测点的类型"
+    ></q-select>
+    <q-btn
+      v-if="
+        axleCountingModel.type == 1 &&
+        axleCountingModel.axleCountingRef.length == 2
+      "
+      color="primary"
+      label="生成区段检测点"
+      @click="oneClickAxleCounting"
+    />
+    <q-list bordered separator class="rounded-borders">
+      <q-item>
+        <q-item-section no-wrap class="q-gutter-y-sm column">
+          <q-item-label> 关联的区段 </q-item-label>
+          <div class="q-gutter-sm row">
+            <q-chip
+              v-for="item in sectionRelations"
+              :key="item"
+              square
+              color="primary"
+              text-color="white"
+            >
+              {{ item }}
+            </q-chip>
+          </div>
+        </q-item-section>
+      </q-item>
+      <q-item>
+        <q-item-section no-wrap class="q-gutter-y-sm column">
+          <q-item-label> 关联的道岔 </q-item-label>
+          <div class="q-gutter-sm row">
+            <q-chip
+              v-for="item in turnoutRelations"
+              :key="item"
+              square
+              color="primary"
+              text-color="white"
+            >
+              {{ item }}
+            </q-chip>
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-list>
+    <q-field class="q-mt-lg" outlined label="所属集中站" stack-label>
+      <template #control>
+        <q-chip
+          color="primary"
+          text-color="white"
+          v-for="(id, index) in axleCountingModel.centralizedStations"
+          :key="index"
+          removable
+          @remove="removeStation(index)"
+          square
+          >{{ getName(id) }}</q-chip
+        >
+        <q-btn round color="primary" size="xs" icon="add" @click="addStation" />
+      </template>
+    </q-field>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { getRectangleCenter, GraphicIdGenerator } from 'jl-graphic';
+import { useDrawStore } from 'src/stores/electronicMap-draw-store';
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
+import AddCentralizedStationDialog from 'src/components/draw-app/dialogs/AddCentralizedStationDialog.vue';
+import { AxleCountingData } from 'src/drawApp/graphics/electronicMap/AxleCountingInteraction';
+import { AxleCounting } from 'src/graphics/electronicMap/axleCounting/AxleCounting';
+import { Section } from 'src/graphics/electronicMap/section/Section';
+import { Turnout } from 'src/graphics/electronicMap/turnout/Turnout';
+import { Station } from 'src/graphics/electronicMap/station/Station';
+
+
+const $q = useQuasar();
+const drawStore = useDrawStore();
+const { data: axleCountingModel, onUpdate } = useFormData(
+  new AxleCountingData(),
+  drawStore.getDrawApp()
+);
+
+const directionOptions = [
+  { label: '左行', value: 0 },
+  { label: '右行', value: 1 },
+];
+
+const optionsDetectType = [
+  { label: '计轴', value: 0 },
+  { label: '区段边界', value: 1 },
+];
+
+const sectionRelations = computed(() => {
+  const axleCounting = drawStore.selectedGraphic as AxleCounting;
+  const sectionRelations =
+    axleCounting?.relationManage.getRelationsOfGraphicAndOtherType(
+      axleCounting,
+      Section.Type
+    );
+  const ref = sectionRelations.map(
+    (relation) =>
+      `${relation.getOtherGraphic<Section>(axleCounting).datas.code}(${
+        relation.getOtherRelationParam(axleCounting).param
+      })`
+  );
+  return Array.from(new Set(ref));
+});
+
+const turnoutRelations = computed(() => {
+  const axleCounting = drawStore.selectedGraphic as AxleCounting;
+  const turnoutRelations =
+    axleCounting?.relationManage.getRelationsOfGraphicAndOtherType(
+      axleCounting,
+      Turnout.Type
+    );
+  const ref = turnoutRelations.map(
+    (relation) =>
+      `${relation.getOtherGraphic<Turnout>(axleCounting).datas.code}(${
+        relation.getOtherRelationParam(axleCounting).param
+      })`
+  );
+  return Array.from(new Set(ref));
+});
+function removeStation(index: number) {
+  axleCountingModel.centralizedStations.splice(index, 1);
+  onUpdate();
+}
+
+function addStation() {
+  $q.dialog({
+    title: '',
+    message: '',
+    component: AddCentralizedStationDialog,
+    cancel: true,
+    persistent: true,
+  }).onOk((data: number) => {
+    axleCountingModel.centralizedStations.push(data);
+    onUpdate();
+  });
+}
+function oneClickAxleCounting() {
+  const select = drawStore.selectedGraphic as AxleCounting;
+  const axleCountings = select.queryStore.queryByType<AxleCounting>(
+    AxleCounting.Type
+  );
+  for (let i = 0; i < axleCountings.length; i++) {
+    if (
+      axleCountings[i].x == select.x - 40 &&
+      axleCountings[i].y == select.y + 30
+    ) {
+      return;
+    }
+  }
+  const ref = select.datas.axleCountingRef;
+  const refDevice = select.queryStore.queryById<Section | Turnout>(ref[0].id);
+  const refDeviceOther = select.queryStore.queryById<Section | Turnout>(
+    ref[1].id
+  );
+  for (let i = 0; i < 2; i++) {
+    const axleCounting = new AxleCounting(1);
+    axleCounting.loadData(new AxleCountingData());
+    axleCounting.id = GraphicIdGenerator.next();
+    const offsetX = i == 0 ? -40 : 40;
+    axleCounting.position.set(select.x + offsetX, select.y + 30);
+    const [leftDevice, rightDevice] =
+      refDevice.localToCanvasPoint(
+        getRectangleCenter(refDevice.getLocalBounds())
+      ).x <
+      refDeviceOther.localToCanvasPoint(
+        getRectangleCenter(refDeviceOther.getLocalBounds())
+      ).x
+        ? [
+            { device: refDevice, ref: ref[0] },
+            { device: refDeviceOther, ref: ref[1] },
+          ]
+        : [
+            { device: refDeviceOther, ref: ref[1] },
+            { device: refDevice, ref: ref[0] },
+          ];
+    const deviceUse = i == 0 ? rightDevice : leftDevice;
+    axleCounting.datas.axleCountingRef = [deviceUse.ref];
+    axleCounting.datas.code = `${deviceUse.device.datas.code}-${deviceUse.ref.devicePort}`;
+    const app = drawStore.getDrawApp();
+    app.addGraphicAndRecord(axleCounting);
+    axleCounting.loadRelations();
+  }
+}
+
+function getName(id: number) {
+  try {
+    const station = drawStore.getDrawApp().queryStore.queryById<Station>(id);
+    return station.datas.code;
+  } catch (error) {
+    return id;
+  }
+}
+</script>

src/components/draw-app/properties/electronicMap/ConcentrationDividingLineProperty.vue

@@ -0,0 +1,118 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input
+      outlined
+      readonly
+      v-model="concentrationDividingLineModel.id"
+      label="id"
+    />
+    <q-select
+      outlined
+      style="margin-top: 10px"
+      v-model="concentrationDividingLineModel.refLeftStationId"
+      :options="centralizedStations"
+      emitValue
+      mapOptions
+      @update:model-value="onUpdate"
+      label="左边关联的集中站"
+    />
+    <q-select
+      outlined
+      style="margin-top: 10px"
+      v-model="concentrationDividingLineModel.refRightStationId"
+      :options="centralizedStations"
+      emitValue
+      mapOptions
+      @update:model-value="onUpdate"
+      label="右边关联的集中站"
+    />
+    <q-list bordered separator class="rounded-borders">
+      <q-item
+        v-for="sectionRelation in sectionRelations"
+        :key="sectionRelation.label"
+      >
+        <q-item-section no-wrap class="q-gutter-y-sm column">
+          <q-item-label> {{ sectionRelation.label }} </q-item-label>
+          <div class="q-gutter-sm row">
+            <q-chip
+              v-for="(item, index) in sectionRelation.refSectionInfo"
+              :key="index"
+              square
+              color="primary"
+              text-color="white"
+            >
+              {{ item }}
+            </q-chip>
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { ConcentrationDividingLineData } from 'src/drawApp/graphics/electronicMap/ConcentrationDividingLineInteraction';
+import { ConcentrationDividingLine } from 'src/graphics/electronicMap/concentrationDividingLine/ConcentrationDividingLine';
+import { Section } from 'src/graphics/electronicMap/section/Section';
+import { Station } from 'src/graphics/electronicMap/station/Station';
+import { useDrawStore } from 'src/stores/electronicMap-draw-store';
+import { computed, onMounted, ref } from 'vue';
+
+const drawStore = useDrawStore();
+const { data: concentrationDividingLineModel, onUpdate } = useFormData(
+  new ConcentrationDividingLineData(),
+  drawStore.getDrawApp()
+);
+const centralizedStations = ref<{ label: string; value: number }[]>([]);
+
+const sectionRelations = computed(() => {
+  const refSectionInfo: { label: string; refSectionInfo: string[] }[] = [
+    { label: '左边关联的设备', refSectionInfo: [] },
+    { label: '右边关联的设备', refSectionInfo: [] },
+  ];
+  enum devicePort {
+    'A',
+    'B',
+    'C',
+  }
+  const concentrationDividingLine =
+    drawStore.selectedGraphic as ConcentrationDividingLine;
+  concentrationDividingLine.datas.nodeConWithSecs.forEach((nodeConWithSec) => {
+    const refleftSection = nodeConWithSec.leftSection?.id
+      ? `${
+          drawStore
+            .getDrawApp()
+            .queryStore.queryById<Section>(nodeConWithSec.leftSection.id).datas
+            .code
+        }(${devicePort[nodeConWithSec.leftSection.devicePort]})`
+      : '边界';
+    refSectionInfo[0].refSectionInfo.push(refleftSection);
+    const refRightSection = nodeConWithSec.rightSection?.id
+      ? `${
+          drawStore
+            .getDrawApp()
+            .queryStore.queryById<Section>(nodeConWithSec.rightSection.id).datas
+            .code
+        }(${devicePort[nodeConWithSec.rightSection.devicePort]})`
+      : '边界';
+    refSectionInfo[1].refSectionInfo.push(refRightSection);
+  });
+  return refSectionInfo;
+});
+
+onMounted(() => {
+  const stations = drawStore
+    .getDrawApp()
+    .queryStore.queryByType<Station>(Station.Type);
+  centralizedStations.value = [{ label: '', value: 0 }];
+  stations.forEach((station) => {
+    if (station.datas.concentrationStations || station.datas.depots) {
+      centralizedStations.value.push({
+        label: station.datas.stationName,
+        value: station.datas.id,
+      });
+    }
+  });
+});
+</script>

src/components/draw-app/properties/electronicMap/ScreenDoorConfig.vue

@@ -0,0 +1,152 @@
+<template>
+  <q-form class="q-gutter-sm q-pa-sm">
+    <q-card-section>
+      <div class="text-h6">屏蔽门相关配置</div>
+    </q-card-section>
+    <q-input
+      outlined
+      v-model.number="screenDoorConfig.sonDoorAmount"
+      type="number"
+      label="子屏蔽门的数量"
+    />
+    <q-list bordered separator class="rounded-borders">
+      <q-expansion-item
+        default-opened
+        expand-separator
+        v-for="screenDoorGroup in screenDoorConfig.screenDoorGroupList"
+        :key="screenDoorGroup"
+        :label="'列车编组数量为' + screenDoorGroup.trainGroupAmount"
+      >
+        <q-card>
+          <q-item no-wrap class="q-gutter-y-sm column">
+            <q-input
+              outlined
+              readonly
+              v-model.number="screenDoorGroup.trainGroupAmount"
+              type="number"
+              label="列车编组数量"
+            />
+            <q-input
+              outlined
+              v-model.number="screenDoorGroup.startSmallDoor"
+              type="number"
+              label="起始的屏蔽门编号"
+            />
+            <q-input
+              outlined
+              v-model.number="screenDoorGroup.endSmallDoor"
+              type="number"
+              label="结束的屏蔽门编号"
+            />
+          </q-item>
+        </q-card>
+      </q-expansion-item>
+    </q-list>
+    <div>
+      <q-btn
+        label="确认修改"
+        color="primary"
+        @click="editScreenDoorConfig"
+        class="q-mr-md"
+      />
+      <q-btn label="返回" color="primary" @click="goBack" />
+    </div>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, ref } from 'vue';
+import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
+import { useQuasar } from 'quasar';
+import {
+  loadScreenDoorConfig,
+  setScreenDoorConfig,
+} from 'src/drawApp/electronicMapApp';
+import { ScreenDoor } from 'src/graphics/electronicMap/screenDoor/ScreenDoor';
+
+const emit = defineEmits(['close']);
+
+const $q = useQuasar();
+const drawStore = useDrawStore();
+const screenDoorConfig = ref<{
+  sonDoorAmount: number;
+  screenDoorGroupList: electronicMapGraphicData.ScreenDoorGroup[];
+}>({
+  sonDoorAmount: 30,
+  screenDoorGroupList: [],
+});
+
+onMounted(() => {
+  if (
+    loadScreenDoorConfig() == undefined ||
+    loadScreenDoorConfig().screenDoorGroupList.length == 0
+  ) {
+    /* const stopPositions = drawStore
+      .getDrawApp()
+      .queryStore.queryByType<StopPosition>(StopPosition.Type);
+    const coachNum: electronicMapGraphicData.StopPosition.CoachNum[] = [];
+    stopPositions.forEach((stopPosition) => {
+      if (!coachNum.includes(stopPosition.datas.coachNum)) {
+        coachNum.push(stopPosition.datas.coachNum);
+      }
+    });
+
+    coachNum.sort((a, b) => a - b);
+    const showCoachNum = coachNum.map((item) => {
+      let changeItem: number;
+      switch (item) {
+        case graphicData.StopPosition.CoachNum.Eight:
+          changeItem = 8;
+          break;
+        case graphicData.StopPosition.CoachNum.Four:
+          changeItem = 4;
+          break;
+        case graphicData.StopPosition.CoachNum.Six:
+          changeItem = 6;
+          break;
+        default:
+          changeItem = 0;
+          break;
+      }
+      return changeItem;
+    });  */
+    const showCoachNum = [4, 8];
+    showCoachNum.forEach((coachNum) => {
+      screenDoorConfig.value.screenDoorGroupList.push(
+        new electronicMapGraphicData.ScreenDoorGroup({
+          trainGroupAmount: coachNum,
+          startSmallDoor: 0,
+          endSmallDoor: 30,
+        })
+      );
+    });
+  } else {
+    screenDoorConfig.value = loadScreenDoorConfig();
+  }
+});
+
+function editScreenDoorConfig() {
+  const screenDoorGroupList: electronicMapGraphicData.ScreenDoorGroup[] = [];
+  screenDoorConfig.value.screenDoorGroupList.forEach((screenDoorGroup) => {
+    screenDoorGroupList.push(
+      new electronicMapGraphicData.ScreenDoorGroup(screenDoorGroup)
+    );
+  });
+  setScreenDoorConfig(
+    new electronicMapGraphicData.ScreenDoorConfig({
+      sonDoorAmount: screenDoorConfig.value.sonDoorAmount,
+      screenDoorGroupList,
+    })
+  );
+  $q.notify({ type: 'positive', message: '更新成功' });
+  const screenDoors = drawStore
+    .getDrawApp()
+    .queryStore.queryByType(ScreenDoor.Type);
+  screenDoors.forEach((screenDoor) => screenDoor.doRepaint());
+}
+
+function goBack() {
+  emit('close');
+}
+</script>

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

@@ -46,7 +46,8 @@
     ></q-select>
     <q-checkbox
       v-if="
-        sectionModel.sectionType === electronicMapGraphicData.Section.SectionType.Physical
+        sectionModel.sectionType ===
+        electronicMapGraphicData.Section.SectionType.Physical
       "
       label="是否折返区域"
       class="q-mt-lg"
@@ -55,7 +56,8 @@
     ></q-checkbox>
     <q-field
       v-if="
-        sectionModel.sectionType === electronicMapGraphicData.Section.SectionType.Physical
+        sectionModel.sectionType ===
+        electronicMapGraphicData.Section.SectionType.Physical
       "
       class="q-mt-lg"
       outlined
@@ -76,7 +78,8 @@
     </q-field>
     <q-field
       v-if="
-        sectionModel.sectionType === electronicMapGraphicData.Section.SectionType.Physical
+        sectionModel.sectionType ===
+        electronicMapGraphicData.Section.SectionType.Physical
       "
       class="q-mt-lg"
       outlined
@@ -156,7 +159,7 @@ const { data: sectionModel, onUpdate } = useFormData(
 );
 
 const sectionTypeText = computed(() => {
-  return ['物理区段', '', '道岔物理区段'][sectionModel.sectionType];
+  return ['物理区段', '道岔物理区段'][sectionModel.sectionType];
 });
 
 const runningDirectionOptions = [

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

@@ -0,0 +1,34 @@
+<template>
+  <q-form>
+    <q-input outlined readonly v-model="separatorModel.id" label="id" hint="" />
+
+    <q-select
+      outlined
+      class="q-mt-sm"
+      v-model="separatorModel.separatorType"
+      :options="typeOptions"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="分隔符类型"
+    ></q-select>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { SeparatorData } from 'src/drawApp/graphics/electronicMap/SeparatorInteraction';
+import { useDrawStore } from 'src/stores/electronicMap-draw-store';
+
+const { data: separatorModel, onUpdate } = useFormData(
+  new SeparatorData(),
+  useDrawStore().getDrawApp()
+);
+
+const typeOptions = [
+  { label: '区段分隔符', value: 'section' },
+  { label: '道岔分隔符', value: 'turnout' },
+  { label: '左断路分隔符', value: 'endA' },
+  { label: '右断路分隔符', value: 'endB' },
+];
+</script>

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

@@ -90,16 +90,17 @@
 </template>
 
 <script setup lang="ts">
-import { TurnoutData } from 'src/drawApp/graphics/TurnoutInteraction';
+import { useDrawStore } from 'src/stores/electronicMap-draw-store';
-import { Section } from 'src/graphics/section/Section';
-import { Turnout } from 'src/graphics/turnout/Turnout';
-import { graphicData } from 'src/protos/stationLayoutGraphics';
-import { useDrawStore } from 'src/stores/draw-store';
 import { useQuasar } from 'quasar';
 import { computed } from 'vue';
 import { useFormData } from 'src/components/DrawAppFormUtils';
-import AddCentralizedStationDialog from '../dialogs/AddCentralizedStationDialog.vue';
+import AddCentralizedStationDialog from 'src/components/draw-app/dialogs/AddCentralizedStationDialog.vue';
-import { Station } from 'src/graphics/station/Station';
+import { TurnoutData } from 'src/drawApp/graphics/electronicMap/TurnoutInteraction';
+import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
+import { Turnout } from 'src/graphics/electronicMap/turnout/Turnout';
+import { Section } from 'src/graphics/electronicMap/section/Section';
+import { Station } from 'src/graphics/electronicMap/station/Station';
+
 
 const drawStore = useDrawStore();
 const $q = useQuasar();
@@ -117,15 +118,15 @@ const directionOptions = [
 const switchMachineTypeOptions = [
   {
     label: '请选择',
-    value: graphicData.Turnout.SwitchMachineType.Unknown,
+    value: electronicMapGraphicData.Turnout.SwitchMachineType.Unknown,
   },
   {
     label: 'ZDJ9(单机牵引)',
-    value: graphicData.Turnout.SwitchMachineType.ZDJ9_Single,
+    value: electronicMapGraphicData.Turnout.SwitchMachineType.ZDJ9_Single,
   },
   {
     label: 'ZDJ9(双机牵引)',
-    value: graphicData.Turnout.SwitchMachineType.ZDJ9_Double,
+    value: electronicMapGraphicData.Turnout.SwitchMachineType.ZDJ9_Double,
   },
 ];
 

src/drawApp/electronicMapApp.ts

@@ -46,6 +46,65 @@ import {
 import { ScreenDoorData } from './graphics/electronicMap/ScreenDoorInteraction';
 import { SectionDraw } from 'src/graphics/electronicMap/section/SectionDrawAssistant';
 import { SectionData } from './graphics/electronicMap/SectionInteraction';
+import { TurnoutDraw } from 'src/graphics/electronicMap/turnout/TurnoutDrawAssistant';
+import {
+  Turnout,
+  TurnoutTemplate,
+} from 'src/graphics/electronicMap/turnout/Turnout';
+import { TurnoutData } from './graphics/electronicMap/TurnoutInteraction';
+import { AxleCountingDraw } from 'src/graphics/electronicMap/axleCounting/AxleCountingDrawAssistant';
+import {
+  AxleCounting,
+  AxleCountingTemplate,
+} from 'src/graphics/electronicMap/axleCounting/AxleCounting';
+import { AxleCountingData } from './graphics/electronicMap/AxleCountingInteraction';
+import { ConcentrationDividingLineDraw } from 'src/graphics/electronicMap/concentrationDividingLine/ConcentrationDividingLineDrawAssistant';
+import {
+  ConcentrationDividingLine,
+  ConcentrationDividingLineTemplate,
+} from 'src/graphics/electronicMap/concentrationDividingLine/ConcentrationDividingLine';
+import { ConcentrationDividingLineData } from './graphics/electronicMap/ConcentrationDividingLineInteraction';
+import { SeparatorDraw } from 'src/graphics/electronicMap/separator/SeparatorDrawAssistant';
+import {
+  Separator,
+  SeparatorTemplate,
+} from 'src/graphics/electronicMap/separator/Separator';
+import { SeparatorData } from './graphics/electronicMap/SeparatorInteraction';
+
+export const drawLayerList = [
+  // 图层列表  默认显示的图层defaultShow: true
+  { label: '车站', value: Station.Type, defaultShow: true },
+  { label: '站台', value: Platform.Type, defaultShow: true },
+  { label: '屏蔽门', value: ScreenDoor.Type, defaultShow: true },
+  { label: '区段', value: Section.Type, defaultShow: true },
+  { label: '道岔', value: Turnout.Type, defaultShow: true },
+  { label: '区段检测点', value: AxleCounting.Type, defaultShow: true },
+  {
+    label: '集中区分割线',
+    value: ConcentrationDividingLine.Type,
+    defaultShow: true,
+  },
+  { label: '分隔符', value: Separator.Type, defaultShow: true },
+];
+
+function initShowLayer(app: IDrawApp) {
+  const showTypeList: string[] = [];
+  drawLayerList.forEach((item) => {
+    if (item.defaultShow) {
+      showTypeList.push(item.value);
+    }
+  });
+  const alllGraphic = app.queryStore.getAllGraphics();
+  alllGraphic.forEach((g) => {
+    if (showTypeList.includes(g.type)) {
+      g.visible = true;
+    } else {
+      g.visible = false;
+    }
+  });
+  const drawStore = useDrawStore();
+  drawStore.setShowLayer(showTypeList);
+}
 
 let electronicMapDrawApp: IDrawApp | null = null;
 
@@ -69,6 +128,9 @@ const RedoOptions: MenuItemOptions = {
 const SelectAllOptions: MenuItemOptions = {
   name: '全选',
 };
+const layerOptions: MenuItemOptions = {
+  name: '显示 / 选择',
+};
 
 export const DefaultEmCanvasMenu = new ContextMenu({
   name: '绘制-画布菜单',
@@ -79,6 +141,9 @@ export const DefaultEmCanvasMenu = new ContextMenu({
     {
       items: [SelectAllOptions],
     },
+    {
+      items: [layerOptions],
+    },
   ],
 });
 
@@ -92,6 +157,13 @@ export function initElectronicMapDrawApp(): IDrawApp {
   new PlatformDraw(app, new PlatformTemplate(new PlatformData()));
   new ScreenDoorDraw(app, new ScreenDoorTemplate(new ScreenDoorData()));
   new SectionDraw(app, new SectionTemplate(new SectionData()));
+  new TurnoutDraw(app, new TurnoutTemplate(new TurnoutData()));
+  new AxleCountingDraw(app, new AxleCountingTemplate(new AxleCountingData()));
+  new ConcentrationDividingLineDraw(
+    app,
+    new ConcentrationDividingLineTemplate(new ConcentrationDividingLineData())
+  );
+  new SeparatorDraw(app, new SeparatorTemplate(new SeparatorData()));
 
   // 画布右键菜单
   app.registerMenu(DefaultEmCanvasMenu);
@@ -110,12 +182,20 @@ export function initElectronicMapDrawApp(): IDrawApp {
     SelectAllOptions.handler = () => {
       app.selectAllGraphics();
     };
+    const drawStore = useDrawStore();
+    layerOptions.handler = () => {
+      drawStore.setShowLayerDialog(true);
+    };
     DefaultEmCanvasMenu.open(e.global);
   });
+  app.on('postdataloaded', () => {
+    initShowLayer(app);
+  });
   app.on('destroy', () => {
     generateAxleCountingConfig =
       new electronicMapGraphicData.GenerateAxleCountingConfig();
   });
+  screenDoorConfig = new electronicMapGraphicData.ScreenDoorConfig();
   app.addKeyboardListener(
     new KeyListener({
       value: 'KeyS',
@@ -236,6 +316,7 @@ export async function loadElectronicMapDrawDatas(): Promise<IGraphicStorage> {
       );
     const datas: GraphicData[] = [];
     generateAxleCountingConfig = storage.generateAxleCountingConfig;
+    screenDoorConfig = storage.screenDoorConfig;
     storage.stations.forEach((station) => {
       datas.push(new StationData(station));
     });
@@ -248,6 +329,18 @@ export async function loadElectronicMapDrawDatas(): Promise<IGraphicStorage> {
     storage.section.forEach((section) => {
       datas.push(new SectionData(section));
     });
+    storage.turnouts.forEach((turnout) => {
+      datas.push(new TurnoutData(turnout));
+    });
+    storage.axleCountings.forEach((axleCounting) => {
+      datas.push(new AxleCountingData(axleCounting));
+    });
+    storage.concentrationDividingLines.forEach((concentrationDividingLine) => {
+      datas.push(new ConcentrationDividingLineData(concentrationDividingLine));
+    });
+    storage.separators.forEach((separator) => {
+      datas.push(new SeparatorData(separator));
+    });
     console.log(storage, 'storage');
     return Promise.resolve({
       canvasProperty: storage.canvas,
@@ -283,9 +376,24 @@ export function saveDrawDatas(app: IDrawApp) {
     } else if (g instanceof Section) {
       const sectionData = g.saveData();
       storage.section.push((sectionData as SectionData).data);
+    } else if (g instanceof Turnout) {
+      const turnoutData = g.saveData();
+      storage.turnouts.push((turnoutData as TurnoutData).data);
+    } else if (g instanceof AxleCounting) {
+      const axleCountingData = g.saveData();
+      storage.axleCountings.push((axleCountingData as AxleCountingData).data);
+    } else if (g instanceof ConcentrationDividingLine) {
+      const concentrationDividingLineData = g.saveData();
+      storage.concentrationDividingLines.push(
+        (concentrationDividingLineData as ConcentrationDividingLineData).data
+      );
+    } else if (g instanceof Separator) {
+      const separatorData = g.saveData();
+      storage.separators.push((separatorData as SeparatorData).data);
     }
   });
   storage.generateAxleCountingConfig = generateAxleCountingConfig;
+  storage.screenDoorConfig = screenDoorConfig;
   const base64 = fromUint8Array(storage.serialize());
   console.log('保存数据', storage);
   return base64;
@@ -318,3 +426,15 @@ export function setGenerateAxleCountingConfig(
 ) {
   generateAxleCountingConfig = newScreenDoorConfig;
 }
+
+//屏蔽门配置--子门数量和编组列表
+let screenDoorConfig = new electronicMapGraphicData.ScreenDoorConfig();
+export function loadScreenDoorConfig() {
+  return screenDoorConfig;
+}
+
+export function setScreenDoorConfig(
+  newScreenDoorConfig: electronicMapGraphicData.ScreenDoorConfig
+) {
+  screenDoorConfig = newScreenDoorConfig;
+}

src/drawApp/graphics/electronicMap/AxleCountingInteraction.ts

@@ -1,20 +1,18 @@
 import * as pb_1 from 'google-protobuf';
-import {
+import { GraphicDataBase } from '../GraphicDataBase';
-  AxleCounting,
+import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
-  IAxleCountingData,
+import { AxleCounting, IAxleCountingData } from 'src/graphics/electronicMap/axleCounting/AxleCounting';
-} from 'src/graphics/axleCounting/AxleCounting';
+import { KilometerSystem } from 'src/graphics/electronicMap/signal/Signal';
-import { graphicData } from 'src/protos/stationLayoutGraphics';
+
-import { GraphicDataBase } from './GraphicDataBase';
-import { KilometerSystem } from 'src/graphics/signal/Signal';
 
 export class AxleCountingData
   extends GraphicDataBase
   implements IAxleCountingData
 {
-  constructor(data?: graphicData.AxleCounting) {
+  constructor(data?: electronicMapGraphicData.AxleCounting) {
     let axleCounting;
     if (!data) {
-      axleCounting = new graphicData.AxleCounting({
+      axleCounting = new electronicMapGraphicData.AxleCounting({
         common: GraphicDataBase.defaultCommonInfo(AxleCounting.Type),
       });
     } else {
@@ -23,8 +21,8 @@ export class AxleCountingData
     super(axleCounting);
   }
 
-  public get data(): graphicData.AxleCounting {
+  public get data(): electronicMapGraphicData.AxleCounting {
-    return this.getData<graphicData.AxleCounting>();
+    return this.getData<electronicMapGraphicData.AxleCounting>();
   }
   get code(): string {
     return this.data.code;
@@ -34,23 +32,23 @@ export class AxleCountingData
   }
   get kilometerSystem(): KilometerSystem {
     if (!this.data.kilometerSystem) {
-      this.data.kilometerSystem = new graphicData.KilometerSystem();
+      this.data.kilometerSystem = new electronicMapGraphicData.KilometerSystem();
     }
     return this.data.kilometerSystem;
   }
   set kilometerSystem(v: KilometerSystem) {
-    this.data.kilometerSystem = new graphicData.KilometerSystem(v);
+    this.data.kilometerSystem = new electronicMapGraphicData.KilometerSystem(v);
   }
-  get axleCountingRef(): graphicData.RelatedRef[] {
+  get axleCountingRef(): electronicMapGraphicData.RelatedRef[] {
     return this.data.axleCountingRef;
   }
-  set axleCountingRef(points: graphicData.RelatedRef[]) {
+  set axleCountingRef(points: electronicMapGraphicData.RelatedRef[]) {
     this.data.axleCountingRef = points;
   }
-  get type(): graphicData.AxleCounting.TypeDetectionPoint {
+  get type(): electronicMapGraphicData.AxleCounting.TypeDetectionPoint {
     return this.data.type;
   }
-  set type(type: graphicData.AxleCounting.TypeDetectionPoint) {
+  set type(type: electronicMapGraphicData.AxleCounting.TypeDetectionPoint) {
     this.data.type = type;
   }
   get centralizedStations(): number[] {

src/drawApp/graphics/electronicMap/ScreenDoorInteraction.ts

@@ -10,6 +10,7 @@ import {
 } from 'jl-graphic';
 import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
 import { IScreenDoorData, ScreenDoor } from 'src/graphics/electronicMap/screenDoor/ScreenDoor';
+import { loadScreenDoorConfig } from 'src/drawApp/electronicMapApp';
 
 
 export class ScreenDoorData extends GraphicDataBase implements IScreenDoorData {
@@ -41,7 +42,7 @@ export class ScreenDoorData extends GraphicDataBase implements IScreenDoorData {
     this.data.refPlatformId = v;
   }
   get sonDoorAmount(): number {
-    return  30;
+    return loadScreenDoorConfig()?.sonDoorAmount || 30;
   }
 
   clone(): ScreenDoorData {

src/drawApp/graphics/electronicMap/SeparatorInteraction.ts

@@ -0,0 +1,44 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from '../GraphicDataBase';
+import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
+import { ISeparatorData, Separator } from 'src/graphics/electronicMap/separator/Separator';
+
+
+export class SeparatorData extends GraphicDataBase implements ISeparatorData {
+  constructor(data?: electronicMapGraphicData.Separator) {
+    let separator;
+    if (!data) {
+      separator = new electronicMapGraphicData.Separator({
+        common: GraphicDataBase.defaultCommonInfo(Separator.Type),
+      });
+    } else {
+      separator = data;
+    }
+    super(separator);
+  }
+
+  public get data(): electronicMapGraphicData.Separator {
+    return this.getData<electronicMapGraphicData.Separator>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get separatorType(): string {
+    return this.data.separatorType;
+  }
+  set separatorType(v: string) {
+    this.data.separatorType = v;
+  }
+  clone(): SeparatorData {
+    return new SeparatorData(this.data.cloneMessage());
+  }
+  copyFrom(data: SeparatorData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: SeparatorData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/graphics/electronicMap/TurnoutInteraction.ts

@@ -1,15 +1,7 @@
-import {
-  ITurnoutData,
-  ITurnoutState,
-  Turnout,
-  TurnoutSection,
-} from 'src/graphics/turnout/Turnout';
 import * as pb_1 from 'google-protobuf';
-import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
+import { GraphicDataBase } from '../GraphicDataBase';
-import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
-import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
+import { IPointData } from 'pixi.js';
-import { KilometerSystem } from 'src/graphics/signal/Signal';
-import { state } from 'src/protos/device_state';
 import {
   IGraphicScene,
   GraphicInteractionPlugin,
@@ -17,32 +9,141 @@ import {
   MenuItemOptions,
   ContextMenu,
 } from 'jl-graphic';
+import { common } from 'src/protos/common';
+import {
+  ITurnoutData,
+  Turnout,
+} from 'src/graphics/electronicMap/turnout/Turnout';
+import { KilometerSystem } from 'src/graphics/electronicMap/signal/Signal';
 import {
   ForkHitArea,
   TurnoutSectionHitArea,
-} from 'src/graphics/turnout/TurnoutDrawAssistant';
+} from 'src/graphics/electronicMap/turnout/TurnoutDrawAssistant';
-import { useLineStore } from 'src/stores/line-store';
+
-import { Dialog } from 'quasar';
+export class TurnoutData extends GraphicDataBase implements ITurnoutData {
-// import AddTrainDialog from '../../components/draw-app/dialogs/AddTrainDialog.vue';
+  constructor(data?: electronicMapGraphicData.Turnout) {
-// import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
+    let turnout = new electronicMapGraphicData.Turnout();
-import TurnoutOperation from 'src/components/draw-app/dialogs/TurnoutOperation.vue';
+    if (!data) {
-// import { getKmDistance } from '../lineScene';
+      turnout.common = GraphicDataBase.defaultCommonInfo(Turnout.Type);
-import { request } from 'src/protos/request';
+      const p = getDefaultEndPoint();
+      turnout.pointA = p.pointA;
+      turnout.pointB = p.pointB;
+      turnout.pointC = p.pointC;
+    } else {
+      turnout = data;
+    }
+    super(turnout);
+  }
+  get data(): electronicMapGraphicData.Turnout {
+    return this.getData<electronicMapGraphicData.Turnout>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get pointA(): IPointData[] {
+    return this.data.pointA;
+  }
+  set pointA(v: IPointData[]) {
+    this.data.pointA = v.map((p) => new common.Point({ x: p.x, y: p.y }));
+  }
+  get pointB(): IPointData[] {
+    return this.data.pointB;
+  }
+  set pointB(v: IPointData[]) {
+    this.data.pointB = v.map((p) => new common.Point({ x: p.x, y: p.y }));
+  }
+  get pointC(): IPointData[] {
+    return this.data.pointC;
+  }
+  set pointC(v: IPointData[]) {
+    this.data.pointC = v.map((p) => new common.Point({ x: p.x, y: p.y }));
+  }
+  get paRef(): electronicMapGraphicData.RelatedRef {
+    return this.data.paRef;
+  }
+  set paRef(ref: electronicMapGraphicData.RelatedRef) {
+    this.data.paRef = ref;
+  }
+  get pbRef(): electronicMapGraphicData.RelatedRef {
+    return this.data.pbRef;
+  }
+  set pbRef(ref: electronicMapGraphicData.RelatedRef) {
+    this.data.pbRef = ref;
+  }
+  get pcRef(): electronicMapGraphicData.RelatedRef {
+    return this.data.pcRef;
+  }
+  set pcRef(ref: electronicMapGraphicData.RelatedRef) {
+    this.data.pcRef = ref;
+  }
+  get kilometerSystem(): KilometerSystem {
+    if (!this.data.kilometerSystem[0]) {
+      this.data.kilometerSystem = [
+        new electronicMapGraphicData.KilometerSystem(),
+      ];
+    }
+    return this.data.kilometerSystem[0];
+  }
+  set kilometerSystem(v: KilometerSystem) {
+    this.data.kilometerSystem = [
+      new electronicMapGraphicData.KilometerSystem(v),
+    ];
+  }
+  get paTrackSectionId(): number {
+    return this.data.paTrackSectionId;
+  }
+  set paTrackSectionId(v: number) {
+    this.data.paTrackSectionId = v;
+  }
+  get pbTrackSectionId(): number {
+    return this.data.pbTrackSectionId;
+  }
+  set pbTrackSectionId(v: number) {
+    this.data.pbTrackSectionId = v;
+  }
+  get pcTrackSectionId(): number {
+    return this.data.pcTrackSectionId;
+  }
+  set pcTrackSectionId(v: number) {
+    this.data.pcTrackSectionId = v;
+  }
+  get switchMachineType(): electronicMapGraphicData.Turnout.SwitchMachineType {
+    return this.data.switchMachineType;
+  }
+  set switchMachineType(v: electronicMapGraphicData.Turnout.SwitchMachineType) {
+    this.data.switchMachineType = v;
+  }
+  get centralizedStations(): number[] {
+    return this.data.centralizedStations;
+  }
+  set centralizedStations(v: number[]) {
+    this.data.centralizedStations = v;
+  }
+  clone(): TurnoutData {
+    return new TurnoutData(this.data.cloneMessage());
+  }
+  copyFrom(data: TurnoutData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: TurnoutData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
 
 function getDefaultEndPoint() {
   return {
-    pointA: [new graphicData.Point([50, 0])],
+    pointA: [new common.Point([50, 0])],
-    pointB: [new graphicData.Point([-50, 0])],
+    pointB: [new common.Point([-50, 0])],
-    pointC: [new graphicData.Point([-50, -50])],
+    pointC: [new common.Point([-50, -50])],
   };
 }
 
 const setTurnoutParam: MenuItemOptions = { name: '设置参数' };
 
-// const addTrainConfig: MenuItemOptions = {
-//   name: '添加列车',
-// };
-
 const TurnoutOperationMenu: ContextMenu = ContextMenu.init({
   name: 'Turnout操作',
   groups: [{ items: [setTurnoutParam] }],
@@ -70,7 +171,6 @@ export class TurnoutOperationPlugin extends GraphicInteractionPlugin<Turnout> {
       sectionGraphic.cursor = 'pointer';
       sectionGraphic.hitArea = new TurnoutSectionHitArea(sectionGraphic);
     });
-    g.on('rightclick', this.onContextMenu, this);
     g.on('_leftclick', this.onLeftClick, this);
   }
   unbind(g: Turnout): void {
@@ -79,300 +179,9 @@ export class TurnoutOperationPlugin extends GraphicInteractionPlugin<Turnout> {
     g.graphics.sections.forEach((sectionGraphic) => {
       sectionGraphic.eventMode = 'none';
     });
-    g.off('rightclick', this.onContextMenu);
     g.off('_leftclick', this.onLeftClick, this);
   }
   onLeftClick() {
-    useLineStore().stateProCountIncrease();
+    //useLineStore().stateProCountIncrease();
-  }
-  onContextMenu(e: FederatedMouseEvent) {
-    const target = e.target as DisplayObject;
-    const turnout = target.getGraphic<Turnout>();
-    if (!turnout) return;
-    const lineStore = useLineStore();
-    this.app.updateSelected(turnout);
-    setTurnoutParam.handler = async () => {
-      if (lineStore.deviceOpreratDialogInstance) return;
-      lineStore.deviceOpreratDialogInstance = Dialog.create({
-        title: '道岔设置参数',
-        message: '',
-        component: TurnoutOperation,
-        componentProps: {
-          id: turnout.id,
-          code: turnout.datas.code,
-          force: turnout.states.param.forcePosition,
-        },
-        cancel: true,
-        persistent: true,
-      });
-    };
-
-    // const port = (target as TurnoutSection).port;
-    // addTrainConfig.disabled = !port || !lineStore.trainConfigList;
-    // addTrainConfig.handler = () => {
-    //   const relations =
-    //     turnout.relationManage.getRelationsOfGraphicAndOtherType(
-    //       turnout,
-    //       AxleCounting.Type
-    //     );
-    //   const findAc = relations.find((item) => {
-    //     const rp = item.getRelationParam(turnout);
-    //     const orp = item.getOtherRelationParam(turnout as Turnout);
-    //     const ac = orp.g as AxleCounting;
-    //     return (
-    //       rp.getParam() == port &&
-    //       ((ac.datas.axleCountingRef.length > 1 &&
-    //         ac.datas.type ==
-    //         graphicData.AxleCounting.TypeDetectionPoint.AxleCounting) ||
-    //         ac.datas.axleCountingRef.length == 1)
-    //     );
-    //   });
-    //   const oKm = turnout.datas.kilometerSystem;
-    //   let pKm;
-    //   if (findAc) {
-    //     const other = findAc.getOtherGraphic(turnout) as AxleCounting;
-    //     pKm = other.datas.kilometerSystem;
-    //   } else {
-    //     const relations =
-    //       turnout.relationManage.getRelationsOfGraphicAndOtherType(
-    //         turnout,
-    //         Turnout.Type
-    //       );
-    //     const findT = relations.find((item) => {
-    //       const rp = item.getRelationParam(turnout);
-    //       return rp.getParam() == port;
-    //     });
-    //     if (findT) {
-    //       const other = findT.getOtherGraphic(turnout) as Turnout;
-    //       pKm = other.datas.kilometerSystem;
-    //     }
-    //   }
-    //   const d = getKmDistance(pKm, oKm);
-    //   if (lineStore.deviceOpreratDialogInstance) return;
-    //   lineStore.deviceOpreratDialogInstance = Dialog.create({
-    //     title: '创建列车',
-    //     message: '',
-    //     component: AddTrainDialog,
-    //     componentProps: { dev: turnout, kmLength: d },
-    //     cancel: true,
-    //     persistent: true,
-    //   });
-    // };
-    TurnoutOperationMenu.open(e.global);
-  }
-}
-
-export class TurnoutData extends GraphicDataBase implements ITurnoutData {
-  constructor(data?: graphicData.Turnout) {
-    let turnout = new graphicData.Turnout();
-    if (!data) {
-      turnout.common = GraphicDataBase.defaultCommonInfo(Turnout.Type);
-      const p = getDefaultEndPoint();
-      turnout.pointA = p.pointA;
-      turnout.pointB = p.pointB;
-      turnout.pointC = p.pointC;
-    } else {
-      turnout = data;
-    }
-    super(turnout);
-  }
-  get data(): graphicData.Turnout {
-    return this.getData<graphicData.Turnout>();
-  }
-
-  get code(): string {
-    return this.data.code;
-  }
-  set code(v: string) {
-    this.data.code = v;
-  }
-  get pointA(): IPointData[] {
-    return this.data.pointA;
-  }
-  set pointA(v: IPointData[]) {
-    this.data.pointA = v.map((p) => new graphicData.Point({ x: p.x, y: p.y }));
-  }
-  get pointB(): IPointData[] {
-    return this.data.pointB;
-  }
-  set pointB(v: IPointData[]) {
-    this.data.pointB = v.map((p) => new graphicData.Point({ x: p.x, y: p.y }));
-  }
-  get pointC(): IPointData[] {
-    return this.data.pointC;
-  }
-  set pointC(v: IPointData[]) {
-    this.data.pointC = v.map((p) => new graphicData.Point({ x: p.x, y: p.y }));
-  }
-  get paRef(): graphicData.RelatedRef {
-    return this.data.paRef;
-  }
-  set paRef(ref: graphicData.RelatedRef) {
-    this.data.paRef = ref;
-  }
-  get pbRef(): graphicData.RelatedRef {
-    return this.data.pbRef;
-  }
-  set pbRef(ref: graphicData.RelatedRef) {
-    this.data.pbRef = ref;
-  }
-  get pcRef(): graphicData.RelatedRef {
-    return this.data.pcRef;
-  }
-  set pcRef(ref: graphicData.RelatedRef) {
-    this.data.pcRef = ref;
-  }
-  get kilometerSystem(): KilometerSystem {
-    if (!this.data.kilometerSystem[0]) {
-      this.data.kilometerSystem = [new graphicData.KilometerSystem()];
-    }
-    return this.data.kilometerSystem[0];
-  }
-  set kilometerSystem(v: KilometerSystem) {
-    this.data.kilometerSystem = [new graphicData.KilometerSystem(v)];
-  }
-  get paTrackSectionId(): number {
-    return this.data.paTrackSectionId;
-  }
-  set paTrackSectionId(v: number) {
-    this.data.paTrackSectionId = v;
-  }
-  get pbTrackSectionId(): number {
-    return this.data.pbTrackSectionId;
-  }
-  set pbTrackSectionId(v: number) {
-    this.data.pbTrackSectionId = v;
-  }
-  get pcTrackSectionId(): number {
-    return this.data.pcTrackSectionId;
-  }
-  set pcTrackSectionId(v: number) {
-    this.data.pcTrackSectionId = v;
-  }
-  get switchMachineType(): graphicData.Turnout.SwitchMachineType {
-    return this.data.switchMachineType;
-  }
-  set switchMachineType(v: graphicData.Turnout.SwitchMachineType) {
-    this.data.switchMachineType = v;
-  }
-  get centralizedStations(): number[] {
-    return this.data.centralizedStations;
-  }
-  set centralizedStations(v: number[]) {
-    this.data.centralizedStations = v;
-  }
-  clone(): TurnoutData {
-    return new TurnoutData(this.data.cloneMessage());
-  }
-  copyFrom(data: TurnoutData): void {
-    pb_1.Message.copyInto(data.data, this.data);
-  }
-  eq(other: TurnoutData): boolean {
-    return pb_1.Message.equals(this.data, other.data);
-  }
-}
-
-export class TurnoutStates extends GraphicStateBase implements ITurnoutState {
-  constructor(proto?: state.SwitchState) {
-    let states;
-    if (proto) {
-      states = proto;
-    } else {
-      states = new state.SwitchState();
-    }
-    super(states, Turnout.Type);
-  }
-  get code(): string {
-    return this.states.id + '';
-  }
-  get id(): number {
-    return this.states.id;
-  }
-  set id(id: number) {
-    this.states.id = id;
-  }
-  get normal(): boolean {
-    return this.states.normal;
-  }
-  set normal(normal: boolean) {
-    this.states.normal = normal;
-  }
-  get reverse(): boolean {
-    return this.states.reverse;
-  }
-  set reverse(reverse: boolean) {
-    this.states.reverse = reverse;
-  }
-  get dw(): boolean {
-    return this.states.dw;
-  }
-  set dw(dw: boolean) {
-    this.states.dw = dw;
-  }
-  get fw(): boolean {
-    return this.states.fw;
-  }
-  set fw(v: boolean) {
-    this.states.fw = v;
-  }
-  get param(): request.PointsParam {
-    return this.states.param;
-  }
-  set param(param: request.PointsParam) {
-    this.states.param = param;
-  }
-  get qdc(): boolean {
-    return this.states.qdc;
-  }
-  set qdc(v: boolean) {
-    this.states.qdc = v;
-  }
-  get qfc(): boolean {
-    return this.states.qfc;
-  }
-  set qfc(v: boolean) {
-    this.states.qfc = v;
-  }
-  get qyc(): boolean {
-    return this.states.qyc;
-  }
-  set qyc(v: boolean) {
-    this.states.qyc = v;
-  }
-  get dc(): boolean {
-    return this.states.dc;
-  }
-  set dc(v: boolean) {
-    this.states.dc = v;
-  }
-  get fc(): boolean {
-    return this.states.fc;
-  }
-  set fc(v: boolean) {
-    this.states.fc = v;
-  }
-  get yc(): boolean {
-    return this.states.yc;
-  }
-  set yc(v: boolean) {
-    this.states.yc = v;
-  }
-  get occupied(): boolean {
-    return this.states.occupied;
-  }
-  set occupied(v: boolean) {
-    this.states.occupied = v;
-  }
-  get states(): state.SwitchState {
-    return this.getState<state.SwitchState>();
-  }
-  clone(): TurnoutStates {
-    return new TurnoutStates(this.states.cloneMessage());
-  }
-  copyFrom(data: GraphicStateBase): void {
-    pb_1.Message.copyInto(data._state, this._state);
-  }
-  eq(data: GraphicStateBase): boolean {
-    return pb_1.Message.equals(this._state, data._state);
   }
 }

src/graphics/electronicMap/axleCounting/AxleCountingDrawAssistant.ts

@@ -19,8 +19,8 @@ import { Section, DevicePort, SectionType } from '../section/Section';
 import { Turnout } from '../turnout/Turnout';
 import { IRelatedRefData, createRelatedRefProto } from '../CommonGraphics';
 import { Signal } from '../signal/Signal';
-import { loadGenerateAxleCountingConfig } from 'src/drawApp/commonApp';
+import { loadGenerateAxleCountingConfig } from 'src/drawApp/electronicMapApp';
-import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
 
 export interface IAxleCountingDrawOptions {
   newData: () => IAxleCountingData;
@@ -172,7 +172,7 @@ export class AxleCountingDraw extends GraphicDrawAssistant<
       .filter((axleCounting) => {
         if (axleCounting.datas.axleCountingRef.length == 1) {
           const refInfo = axleCounting.datas.axleCountingRef[0];
-          if (refInfo.deviceType == graphicData.RelatedRef.DeviceType.Section) {
+          if (refInfo.deviceType == electronicMapGraphicData.RelatedRef.DeviceType.Section) {
             const refSection = this.app.queryStore.queryById<Section>(
               refInfo.id
             );
@@ -195,7 +195,7 @@ export class AxleCountingDraw extends GraphicDrawAssistant<
     axleCountingRefs.forEach((axleCountingRef) => {
       map.set(
         `${axleCountingRef.id}-${
-          graphicData.RelatedRef.DevicePort[axleCountingRef.devicePort]
+          electronicMapGraphicData.RelatedRef.DevicePort[axleCountingRef.devicePort]
         }`,
         1
       );

src/graphics/electronicMap/concentrationDividingLine/ConcentrationDividingLineDrawAssistant.ts

@@ -35,7 +35,7 @@ export class ConcentrationDividingLineDraw extends GraphicDrawAssistant<
   graphic = new Graphics();
 
   constructor(app: IDrawApp, template: ConcentrationDividingLineTemplate) {
-    super(app, template, 'sym_o_timeline', '集中区分割线');
+    super(app, template, 'stacked_line_chart', '集中区分割线');
     this.container.addChild(this.graphic);
 
     ConcentrationDividingLinePointEditPlugin.init(app, this);

src/graphics/electronicMap/concentrationDividingLine/ConcentrationDividingLineUtils.ts

@@ -5,6 +5,9 @@ import { Section } from '../section/Section';
 import { Turnout } from '../turnout/Turnout';
 import { GraphicDataBase } from 'src/drawApp/graphics/GraphicDataBase';
 import { SectionData } from 'src/drawApp/graphics/electronicMap/SectionInteraction';
+import { TurnoutData } from 'src/drawApp/graphics/electronicMap/TurnoutInteraction';
+import { AxleCountingData } from 'src/drawApp/graphics/electronicMap/AxleCountingInteraction';
+import { AxleCounting } from '../axleCounting/AxleCounting';
 
 //判断线段与线段有木有交点
 export function isSegmentsIntersect(
@@ -158,7 +161,9 @@ export function handleCentralizedStationsData(
     centralizedStations: number[];
   }
   const dataMap = new Map<string, GraphicDataBase>([
+    [Turnout.Type, new TurnoutData()],
     [Section.Type, new SectionData()],
+    [AxleCounting.Type, new AxleCountingData()],
   ]);
   devices.forEach((device) => {
     const data = dataMap.get(device.type);

src/graphics/electronicMap/separator/Separator.ts

@@ -0,0 +1,96 @@
+import { Color, Graphics } from 'pixi.js';
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic';
+
+export interface ISeparatorData extends GraphicData {
+  get code(): string; // 编号
+  set code(v: string);
+  get separatorType(): string; // 类型
+  set separatorType(v: string);
+  clone(): ISeparatorData;
+  copyFrom(data: ISeparatorData): void;
+  eq(other: ISeparatorData): boolean;
+}
+
+export enum separatorTypeEnum {
+  turnout = 'turnout', // 道岔分隔符
+  endA = 'endA', // A端尽头分隔符
+  endB = 'endB', // B端尽头分隔符
+  section = 'section', // 区段分隔符
+}
+
+export const SeparatorConsts = {
+  height: 12,
+  lineWidth: 2,
+  lineColor: '0xFFFFFF',
+  circleColor: '0xEF0200',
+  radius: 5,
+};
+
+export class Separator extends JlGraphic {
+  static Type = 'Separator';
+  rectGraphic: Graphics = new Graphics();
+  circleGraphic: Graphics = new Graphics();
+  constructor() {
+    super(Separator.Type);
+    this.addChild(this.rectGraphic);
+    this.addChild(this.circleGraphic);
+  }
+  get datas(): ISeparatorData {
+    return this.getDatas<ISeparatorData>();
+  }
+  clear() {
+    this.rectGraphic.clear();
+    this.circleGraphic.clear();
+  }
+  doRepaint(): void {
+    this.clear();
+    const rectGraphic = this.rectGraphic;
+    if (!this.datas.separatorType) {
+      this.datas.separatorType = separatorTypeEnum.endA;
+    }
+    const typeArr = ['section', 'turnout'];
+    if (typeArr.includes(this.datas.separatorType)) {
+      rectGraphic.lineStyle(
+        SeparatorConsts.lineWidth,
+        new Color(SeparatorConsts.lineColor)
+      );
+      rectGraphic.moveTo(0, -SeparatorConsts.height / 2);
+      rectGraphic.lineTo(0, SeparatorConsts.height / 2);
+      if (this.datas.separatorType == 'turnout') {
+        this.circleGraphic.lineStyle(1, SeparatorConsts.circleColor);
+        this.circleGraphic.drawCircle(0, 0, SeparatorConsts.radius);
+      }
+    }
+    const endTypeArr = ['endA', 'endB'];
+    if (endTypeArr.includes(this.datas.separatorType)) {
+      let d = SeparatorConsts.radius;
+      if (this.datas.separatorType == 'endB') {
+        d = -d;
+      }
+      rectGraphic.lineStyle(
+        SeparatorConsts.lineWidth,
+        new Color(SeparatorConsts.lineColor)
+      );
+      rectGraphic.moveTo(0, 0);
+      rectGraphic.lineTo(-d, 0);
+      rectGraphic.lineTo(-d, -d);
+      rectGraphic.lineTo(-d * 3, -d);
+      rectGraphic.moveTo(-d, 0);
+      rectGraphic.lineTo(-d, d);
+      rectGraphic.lineTo(-d * 3, d);
+    }
+  }
+}
+
+export class SeparatorTemplate extends JlGraphicTemplate<Separator> {
+  constructor(dataTemplate: ISeparatorData) {
+    super(Separator.Type, {
+      dataTemplate,
+    });
+  }
+  new(): Separator {
+    const separator = new Separator();
+    separator.loadData(this.datas);
+    return separator;
+  }
+}

src/graphics/electronicMap/separator/SeparatorDrawAssistant.ts

@@ -0,0 +1,242 @@
+import { FederatedPointerEvent, IHitArea, Point } from 'pixi.js';
+import {
+  GraphicDrawAssistant,
+  GraphicIdGenerator,
+  GraphicInteractionPlugin,
+  GraphicRelationParam,
+  IDrawApp,
+  JlGraphic,
+  pointBox,
+} from 'jl-graphic';
+import { Section } from '../section/Section';
+import {
+  ISeparatorData,
+  Separator,
+  SeparatorTemplate,
+  separatorTypeEnum,
+} from './Separator';
+
+import { Turnout } from '../turnout/Turnout';
+import { SeparatorData } from 'src/drawApp/graphics/electronicMap/SeparatorInteraction';
+
+export class SeparatorDraw extends GraphicDrawAssistant<
+  SeparatorTemplate,
+  ISeparatorData
+> {
+  SeparatorGraph: Separator;
+  constructor(app: IDrawApp, template: SeparatorTemplate) {
+    super(app, template, 'sym_o_square', '分隔符Separator');
+    this.SeparatorGraph = this.graphicTemplate.new();
+    this.container.addChild(this.SeparatorGraph);
+    SeparatorInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    this.SeparatorGraph.loadData(this.graphicTemplate.datas);
+    this.SeparatorGraph.doRepaint();
+  }
+
+  onLeftDown(e: FederatedPointerEvent): void {
+    this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+
+  redraw(p: Point): void {
+    this.container.position.copyFrom(p);
+  }
+
+  prepareData(data: ISeparatorData): boolean {
+    data.transform = this.container.saveTransform();
+    return true;
+  }
+  oneGenerates() {
+    const SeparatorAll = this.app.queryStore.queryByType<Separator>(
+      Separator.Type
+    );
+    this.app.deleteGraphics(...SeparatorAll);
+    const rMap = new Map();
+    const sections = this.app.queryStore.queryByType<Section>(Section.Type);
+    const turnouts = this.app.queryStore.queryByType<Turnout>(Turnout.Type);
+    function setKey(gr: GraphicRelationParam): string {
+      let key = '';
+      key = `${gr.g.id}_${gr.param}`;
+      return key;
+    }
+    const arrType = [Section.Type, Turnout.Type]; // 只统计关联关系是道岔和区段的
+    sections.forEach((section) => {
+      const allR = section.relationManage
+        .getRelationsOfGraphic(section)
+        .filter((ref) => {
+          return arrType.includes(ref.getOtherGraphic(section).type);
+        });
+      const port: string[] = [];
+      allR.forEach((relation, index) => {
+        const r = relation.getRelationParam(section);
+        const other = relation.getOtherRelationParam(section);
+        port.push(r.param);
+        if (!rMap.has(setKey(r))) {
+          rMap.set(setKey(r), { ...r });
+        }
+        if (!rMap.has(setKey(other))) {
+          rMap.set(setKey(other), { ...other, repetition: true });
+        }
+        /*   if (section.datas.sectionType === SectionType.Logic) {
+          // 逻辑区段没有断路分隔符
+          return;
+        } */
+        if (index == allR.length - 1) {
+          if (!port.includes('A')) {
+            rMap.set(`${section.id}_A`, {
+              g: section,
+              param: 'A',
+              separatorType: separatorTypeEnum.endA,
+            });
+          }
+          if (!port.includes('B')) {
+            rMap.set(`${section.id}_B`, {
+              g: section,
+              param: 'B',
+              separatorType: separatorTypeEnum.endB,
+            });
+          }
+        }
+      });
+    });
+    turnouts.forEach((turnout) => {
+      const allR = turnout.relationManage
+        .getRelationsOfGraphic(turnout)
+        .filter((ref) => {
+          return arrType.includes(ref.getOtherGraphic(turnout).type);
+        });
+      const port: string[] = [];
+      allR.forEach((relation, index) => {
+        const r = relation.getRelationParam(turnout);
+        port.push(r.param);
+        const other = relation.getOtherRelationParam(turnout);
+        let t = separatorTypeEnum.section;
+        if (
+          (r.param == 'C' && other.param == 'C') ||
+          (r.g.type == Turnout.Type &&
+            other.g.type == Turnout.Type &&
+            (r.param == 'C' || other.param == 'C'))
+        ) {
+          t = separatorTypeEnum.turnout;
+        }
+        if (!rMap.has(setKey(r))) {
+          rMap.set(setKey(r), {
+            ...r,
+            separatorType: t,
+          });
+        }
+        if (!rMap.has(setKey(other))) {
+          rMap.set(setKey(other), {
+            ...other,
+            separatorType: t,
+            repetition: true,
+          });
+        }
+        if (index == allR.length - 1) {
+          const ps = turnout.getPortPoints();
+          let isALeft = true; // 判断A端在左还是右
+          if (ps[0][ps[0].length - 1].x > ps[1][ps[1].length - 1].x) {
+            isALeft = false;
+          }
+          if (!port.includes('A')) {
+            rMap.set(`${turnout.id}_A`, {
+              g: turnout,
+              param: 'A',
+              separatorType: isALeft
+                ? separatorTypeEnum.endA
+                : separatorTypeEnum.endB,
+            });
+          }
+          if (!port.includes('B')) {
+            rMap.set(`${turnout.id}_B`, {
+              g: turnout,
+              param: 'B',
+              separatorType: isALeft
+                ? separatorTypeEnum.endB
+                : separatorTypeEnum.endA,
+            });
+          }
+        }
+      });
+    });
+    rMap.forEach((item) => {
+      if (!item.repetition) {
+        let p;
+        if (item.g.type == Section.Type) {
+          p = item.g.getStartPoint();
+          if (item.param == 'B') {
+            p = item.g.getEndPoint();
+          }
+        } else if (item.g.type == Turnout.Type) {
+          const ps = item.g.getPortPoints();
+          let l = 2;
+          if (item.param == 'A') {
+            l = 0;
+          } else if (item.param == 'B') {
+            l = 1;
+          }
+          const lps = ps[l];
+          p = lps[lps.length - 1];
+        }
+        const tps = item.g.localToCanvasPoint(p);
+        const sType = item.separatorType || separatorTypeEnum.section;
+        this.createSeparator(sType, tps);
+      }
+    });
+  }
+  createSeparator(separatorType: separatorTypeEnum, tps: Point) {
+    const separator = new Separator();
+    const data = new SeparatorData();
+    data.separatorType = separatorType;
+    separator.loadData(data);
+    separator.position.set(tps.x, tps.y);
+    separator.id = GraphicIdGenerator.next();
+    this.storeGraphic(separator);
+  }
+}
+
+//碰撞检测
+export class SeparatorGraphicHitArea implements IHitArea {
+  separator: Separator;
+  constructor(separator: Separator) {
+    this.separator = separator;
+  }
+  contains(x: number, y: number): boolean {
+    let contains = false;
+    const p = new Point(x, y);
+    const r = this.separator.getLocalBounds();
+    contains = pointBox(p, r);
+    return contains;
+  }
+}
+
+export class SeparatorInteraction extends GraphicInteractionPlugin<Separator> {
+  static Name = 'Separator_transform';
+  constructor(app: IDrawApp) {
+    super(SeparatorInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new SeparatorInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Separator[] | undefined {
+    return grahpics
+      .filter((g) => g.type === Separator.Type)
+      .map((g) => g as Separator);
+  }
+  bind(g: Separator): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.rectGraphic.hitArea = new SeparatorGraphicHitArea(g);
+  }
+  unbind(g: Separator): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+  }
+}

src/graphics/electronicMap/turnout/Turnout.ts

@@ -3,7 +3,6 @@ import {
   GraphicAnimation,
   GraphicData,
   GraphicRelationParam,
-  GraphicState,
   JlGraphic,
   JlGraphicTemplate,
   VectorText,
@@ -52,21 +51,6 @@ export interface ITurnoutData extends GraphicData {
   eq(other: ITurnoutData): boolean;
 }
 
-export interface ITurnoutState extends GraphicState {
-  id?: number;
-  normal?: boolean;
-  reverse?: boolean;
-  dw?: boolean;
-  fw?: boolean;
-  qdc?: boolean;
-  qfc?: boolean;
-  qyc?: boolean;
-  dc?: boolean;
-  fc?: boolean;
-  yc?: boolean;
-  occupied?: boolean;
-}
-
 export const TurnoutConsts = {
   lineColor: '#5578b6',
   occupiedColor: '#f00',
@@ -112,8 +96,7 @@ export class TurnoutSection extends Graphics {
         break;
     }
     const gap = this.port === DevicePort.A ? 0 : TurnoutConsts.forkLenth;
-    let color = TurnoutConsts.lineColor;
+    /*     if (this.turnout.states.occupied) {
-    if (this.turnout.states.occupied) {
       if (
         this.port === DevicePort.A ||
         (this.turnout.states.dw && this.port === DevicePort.B) ||
@@ -121,10 +104,10 @@ export class TurnoutSection extends Graphics {
       ) {
         color = TurnoutConsts.occupiedColor;
       }
-    }
+    } */
     const start = getForkPoint(gap, pList[0]);
     this.clear()
-      .lineStyle(TurnoutConsts.lineWidth, color)
+      .lineStyle(TurnoutConsts.lineWidth, TurnoutConsts.lineColor)
       .moveTo(start.x, start.y);
     pList.forEach((p) => {
       const { x, y } = p;
@@ -142,11 +125,8 @@ class ForkGraphic extends Graphics {
 
   paint(p: IPointData) {
     const target = getForkPoint(TurnoutConsts.forkLenth, p);
-    const color = this.turnout.states.occupied
-      ? TurnoutConsts.occupiedColor
-      : TurnoutConsts.lineColor;
     this.clear()
-      .lineStyle(TurnoutConsts.lineWidth, color)
+      .lineStyle(TurnoutConsts.lineWidth, TurnoutConsts.lineColor)
       .moveTo(0, 0)
       .lineTo(target.x, target.y);
   }
@@ -196,32 +176,24 @@ export class Turnout extends JlGraphic {
     return this.getDatas<ITurnoutData>();
   }
 
-  get states(): ITurnoutState {
-    return this.getStates<ITurnoutState>();
-  }
   getPortPoints() {
     return [this.datas.pointA, this.datas.pointB, this.datas.pointC];
   }
 
   doRepaint(): void {
-    const { pointB, pointC } = this.datas;
+    //const { pointB, pointC } = this.datas;
-    if (this.states.dw) {
+    /*     if (this.states.dw) {
       this.graphics.fork.paint(pointB[0]);
       this.graphics.label.style.stroke = TurnoutConsts.normalLabelColor;
     } else if (this.states.fw) {
       this.graphics.fork.paint(pointC[0]);
       this.graphics.label.style.stroke = TurnoutConsts.reverseLabelColor;
-    }
+    } */
     this.graphics.label.text = this.datas.code;
 
     this.graphics.sections.forEach((sectionGraphic) => sectionGraphic.paint());
 
-    if (!this.states.dw && !this.states.fw) {
+    this.graphics.fork.visible = true;
-      // 失表
-      this.graphics.fork.visible = false;
-    } else {
-      this.graphics.fork.visible = true;
-    }
   }
   initTurnoutSplit() {
     // 道岔失表
@@ -447,17 +419,15 @@ export class Turnout extends JlGraphic {
 }
 
 export class TurnoutTemplate extends JlGraphicTemplate<Turnout> {
-  constructor(dataTemplate: ITurnoutData, stateTemplate?: ITurnoutState) {
+  constructor(dataTemplate: ITurnoutData) {
     super(Turnout.Type, {
       dataTemplate,
-      stateTemplate,
     });
   }
 
   new() {
     const g = new Turnout();
     g.loadData(this.datas);
-    g.loadState(this.states);
     return g;
   }
 }

src/layouts/electronicMapDrawLayout.vue

@@ -87,7 +87,11 @@
         v-if="showGenerateAxleCountingConfig"
         @close="closeGenerateAxleCountingConfig"
       />
-      <draw-properties v-else></draw-properties>
+      <screen-door-config
+        v-else-if="showScreenDoorConfig"
+        @close="closeScreenDoorConfig"
+      />
+      <draw-properties v-else />
     </q-drawer>
 
     <q-page-container>
@@ -135,11 +139,28 @@ import { Station } from 'src/graphics/electronicMap/station/Station';
 import { Platform } from 'src/graphics/electronicMap/platform/Platform';
 import { ScreenDoor } from 'src/graphics/electronicMap/screenDoor/ScreenDoor';
 import { Section } from 'src/graphics/electronicMap/section/Section';
-/* import { Turnout } from 'src/graphics/electronicMap/turnout/Turnout';
+import { Turnout } from 'src/graphics/electronicMap/turnout/Turnout';
-import { Signal } from 'src/graphics/electronicMap/signal/Signal'; */
+//import { Signal } from 'src/graphics/electronicMap/signal/Signal';
-import { saveDrawDatas, saveDrawToServer } from 'src/drawApp/electronicMapApp';
+import { ConcentrationDividingLine } from 'src/graphics/electronicMap/concentrationDividingLine/ConcentrationDividingLine';
+import {
+  drawLayerList,
+  saveDrawDatas,
+  saveDrawToServer,
+} from 'src/drawApp/electronicMapApp';
 import { saveAsDraft } from 'src/api/DraftApi';
 import { successNotify } from 'src/utils/CommonNotify';
+import LayerControlDialog from 'src/components/draw-app/dialogs/LayerControlDialog.vue';
+import {
+  findCommonElements,
+  findContainDevice,
+  handleCentralizedStationsData,
+} from 'src/graphics/electronicMap/concentrationDividingLine/ConcentrationDividingLineUtils';
+import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
+import { AxleCounting } from 'src/graphics/electronicMap/axleCounting/AxleCounting';
+import ScreenDoorConfig from 'src/components/draw-app/properties/electronicMap/ScreenDoorConfig.vue';
+import { Separator } from 'src/graphics/electronicMap/separator/Separator';
+import { SeparatorDraw } from 'src/graphics/electronicMap/separator/SeparatorDrawAssistant';
+import { SectionDraw } from 'src/graphics/electronicMap/section/SectionDrawAssistant';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -177,6 +198,28 @@ watch(
   }
 );
 
+const dialogInstance = ref();
+watch(
+  () => drawStore.showLayerDialog,
+  (val) => {
+    if (!val) return;
+    dialogInstance.value = $q
+      .dialog({
+        component: LayerControlDialog,
+        componentProps: {
+          showDialog: val,
+          layerList: drawLayerList,
+          showLayer: drawStore.showLayer,
+          app: drawStore.getDrawApp(),
+        },
+      })
+      .onCancel(() => {
+        dialogInstance.value = null;
+        drawStore.showLayerDialog = false;
+      });
+  }
+);
+
 const rightDrawerOpen = ref(false);
 function toggleRightDrawer() {
   rightDrawerOpen.value = !rightDrawerOpen.value;
@@ -211,11 +254,20 @@ const leftMenuConfig = [
   { label: '保存', click: saveAllDrawDatas },
   { label: '另存为', click: () => (saveAsDialog.value = true) },
   { label: '一键关联', click: buildRelations },
+  { label: '一键生成分隔符', click: oneClickSeparator },
   { label: '一键生成计轴', click: oneClickAxleCounting },
+  { label: '一键生成道岔区段', click: oneClickTurnoutSection },
+  {
+    label: '一键关联设备所属的集中站',
+    click: oneClickRelateCentralizedStation,
+  },
 ];
 
 //数据管理下拉按钮
 const showScreenDoorConfig = ref(false);
+const closeScreenDoorConfig = () => {
+  showScreenDoorConfig.value = false;
+};
 const showGenerateAxleCountingConfig = ref(false);
 const closeGenerateAxleCountingConfig = () => {
   showGenerateAxleCountingConfig.value = false;
@@ -242,6 +294,8 @@ onMounted(() => {
     Platform.Type,
     ScreenDoor.Type,
     Section.Type,
+    Turnout.Type,
+    ConcentrationDividingLine.Type,
   ];
   drawAssistantsTypes.forEach((type) => {
     const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
@@ -290,21 +344,6 @@ function saveAllDrawDatas() {
   saveDrawToServer(saveDrawDatas(drawApp));
 }
 
-function buildRelations() {
-  const app = drawStore.getDrawApp();
-  app?.detectRelations();
-}
-
-function oneClickAxleCounting() {
-  //一键生成计轴--先展示配置
-  drawStore.oneClickType;
-  showGenerateAxleCountingConfig.value = true;
-}
-
-function backConfirm() {
-  router.go(-1);
-}
-
 const saveAsDialog = ref(false);
 const saveAsName = ref('');
 async function saveAs(name: string) {
@@ -322,4 +361,306 @@ async function saveAs(name: string) {
     saveAsDialog.value = false;
   }
 }
+
+function buildRelations() {
+  const app = drawStore.getDrawApp();
+  app?.detectRelations();
+}
+
+function oneClickAxleCounting() {
+  //一键生成计轴--先展示配置
+  drawStore.oneClickType;
+  showGenerateAxleCountingConfig.value = true;
+}
+
+function oneClickTurnoutSection() {
+  const SDA = drawStore
+    .getDrawApp()
+    .getDrawAssistant<SectionDraw>(Section.Type);
+  SDA.generateTurnoutSection();
+}
+
+function oneClickSeparator() {
+  //一键生成分隔符
+  const separatorDraw = drawStore
+    .getDrawApp()
+    .getDrawAssistant<SeparatorDraw>(Separator.Type);
+  separatorDraw.oneGenerates();
+}
+
+function oneClickRelateCentralizedStation() {
+  const drawApp = drawStore.getDrawApp();
+  const concentrationDividingLines = drawApp.queryStore
+    .queryByType<ConcentrationDividingLine>(ConcentrationDividingLine.Type)
+    .sort((a, b) => a.datas.points[0].x - b.datas.points[0].x);
+  const hasHandleStation: number[] = [];
+  for (let i = 0; i < concentrationDividingLines.length - 1; i++) {
+    let containDeviceIds: number[] = [];
+    //右边
+    const rightDatas = concentrationDividingLines[i].datas;
+    if (hasHandleStation.includes(rightDatas.refRightStationId)) {
+      continue;
+    } else {
+      hasHandleStation.push(rightDatas.refRightStationId);
+    }
+    const rightSections: {
+      section: Section;
+      port: electronicMapGraphicData.RelatedRef.DevicePort;
+    }[] = [];
+    rightDatas.nodeConWithSecs.forEach((node) => {
+      if (node.rightSection && node.rightSection.id) {
+        rightSections.push({
+          section: drawApp.queryStore.queryById(node.rightSection.id),
+          port: node.rightSection.devicePort,
+        });
+      }
+    });
+    //左边
+    const leftSections: number[] = [];
+    for (let j = i + 1; j < concentrationDividingLines.length; j++) {
+      const LeftDatas = concentrationDividingLines[j].datas;
+      if (LeftDatas.refLeftStationId == rightDatas.refRightStationId) {
+        LeftDatas.nodeConWithSecs.forEach((node) => {
+          if (node.leftSection && node.leftSection.id) {
+            leftSections.push(node.leftSection.id);
+          }
+        });
+      }
+    }
+    containDeviceIds = [
+      ...rightSections.map((g) => g.section.id),
+      ...leftSections,
+    ];
+    //递归从右边的设备开始找路径，找到左边相同的集中站停下来
+    rightSections.forEach((rightSection) => {
+      findContainDevice(
+        rightSection.section,
+        rightSection.port,
+        containDeviceIds,
+        drawApp
+      );
+      containDeviceIds = Array.from(new Set(containDeviceIds));
+    });
+    if (rightDatas.refRightStationId) {
+      handleContainDevices(containDeviceIds, [rightDatas.refRightStationId]);
+    }
+  }
+  //需要考虑是否绘制左右边界和车辆段这种
+  const leftBoundary = concentrationDividingLines[0];
+  handleLeftBoundary(leftBoundary);
+  const rightBoundary =
+    concentrationDividingLines[concentrationDividingLines.length - 1];
+  handleRightBoundary(rightBoundary);
+  concentrationDividingLines.forEach((concentrationDividingLine) => {
+    const datas = concentrationDividingLine.datas;
+    if (
+      datas.refLeftStationId &&
+      drawApp.queryStore.queryById<Station>(datas.refLeftStationId).datas.depots
+    ) {
+      handleLeftBoundary(concentrationDividingLine);
+    } else if (
+      datas.refRightStationId &&
+      drawApp.queryStore.queryById<Station>(datas.refRightStationId).datas
+        .depots
+    ) {
+      handleRightBoundary(concentrationDividingLine);
+    }
+  });
+  //区段边界的计轴和信号机单独处理
+  const axleCountings = drawApp.queryStore
+    .queryByType<AxleCounting>(AxleCounting.Type)
+    .filter(
+      (g) =>
+        g.datas.type ==
+        electronicMapGraphicData.AxleCounting.TypeDetectionPoint.SectionBoundary
+    );
+  axleCountings.forEach((g) => {
+    if (g.datas.axleCountingRef.length == 2) {
+      const centralizedStations: number[] = [];
+      g.datas.axleCountingRef.forEach((ref) => {
+        const section = drawApp.queryStore.queryById<Section>(ref.id);
+        centralizedStations.push(...section.datas.centralizedStations);
+      });
+      g.datas.centralizedStations = Array.from(new Set(centralizedStations));
+    }
+  });
+
+  //const signals = drawApp.queryStore.queryByType<Signal>(Signal.Type);
+  concentrationDividingLines.forEach((concentrationDividingLine) => {
+    concentrationDividingLine.datas.nodeConWithSecs.forEach(
+      (nodeConWithSec) => {
+        if (nodeConWithSec.leftSection && nodeConWithSec.rightSection) {
+          const ids = [
+            nodeConWithSec.leftSection.id,
+            nodeConWithSec.rightSection.id,
+          ];
+          if (ids[0] && ids[1]) {
+            if (
+              nodeConWithSec.leftSection.deviceType ==
+              electronicMapGraphicData.RelatedRef.DeviceType.Section
+            ) {
+              handleNodeConWithSec(nodeConWithSec.leftSection, ids);
+            } else {
+              handleNodeConWithSec(nodeConWithSec.rightSection, ids);
+            }
+          }
+        }
+      }
+    );
+  });
+  //其它线路设备集中站置空
+  /*   const otherLineList = loadOtherLineList();
+  const otherLineListDevice: JlGraphic[] = [];
+  otherLineList.forEach((otherLine) => {
+    otherLine.ids.forEach((id) => {
+      const device = drawApp.queryStore.queryById(id);
+      otherLineListDevice.push(device);
+    });
+  });
+  handleCentralizedStationsData(otherLineListDevice, []); */
+  //道岔物理区段--(根据关联的计轴获取所属集中站)
+  const turnoutPhysicalSections = drawApp.queryStore
+    .queryByType<Section>(Section.Type)
+    .filter(
+      (section) =>
+        section.datas.sectionType ==
+        electronicMapGraphicData.Section.SectionType.TurnoutPhysical
+    );
+  turnoutPhysicalSections.forEach((turnoutPhysicalSection) => {
+    const refAxleCounting = turnoutPhysicalSection.relationManage
+      .getRelationsOfGraphicAndOtherType(
+        turnoutPhysicalSection,
+        AxleCounting.Type
+      )[0]
+      .getOtherGraphic<AxleCounting>(turnoutPhysicalSection);
+    turnoutPhysicalSection.datas.centralizedStations =
+      refAxleCounting.datas.centralizedStations;
+  });
+
+  function handleNodeConWithSec(
+    relatedRef: electronicMapGraphicData.RelatedRef,
+    ids: number[]
+  ) {
+    const section = drawApp.queryStore.queryById<Section>(relatedRef.id);
+    const portPos =
+      relatedRef.devicePort == electronicMapGraphicData.RelatedRef.DevicePort.A
+        ? section.localToCanvasPoint(section.getStartPoint())
+        : section.localToCanvasPoint(section.getEndPoint());
+    console.log(ids, portPos);
+
+    /* signals.forEach((signal) => {
+      if (
+        distance2(portPos, signal.position) < 100 &&
+        ids.includes(signal.datas.refDev.id)
+      ) {
+        signal.datas.centralizedStations =
+          ids[0] == signal.datas.refDev.id
+            ? drawApp.queryStore.queryById<Section>(ids[1]).datas
+                .centralizedStations
+            : drawApp.queryStore.queryById<Section>(ids[0]).datas
+                .centralizedStations;
+      }
+    }); */
+  }
+
+  function handleContainDevices(
+    containDeviceIds: number[],
+    centralizedStations: number[]
+  ) {
+    const containDevices = containDeviceIds.map((id) => {
+      return drawApp.queryStore.queryById(id);
+    });
+    /* const signals = drawApp.queryStore
+      .queryByType<Signal>(Signal.Type)
+      .filter((g) => containDeviceIds.includes(g.datas.refDev.id)); */
+    const axleCountings = drawApp.queryStore
+      .queryByType<AxleCounting>(AxleCounting.Type)
+      .filter((g) => {
+        const axleCountingRefId = g.datas.axleCountingRef.map((ref) => ref.id);
+        if (findCommonElements([axleCountingRefId, containDeviceIds]).length) {
+          return true;
+        }
+        return false;
+      });
+    const allSetCentralizedStationsDevice = [
+      ...containDevices,
+      ...axleCountings,
+    ];
+    allSetCentralizedStationsDevice.forEach(
+      (g) => ((g as AxleCounting).datas.centralizedStations = [])
+    );
+    handleCentralizedStationsData(
+      allSetCentralizedStationsDevice,
+      centralizedStations
+    );
+  }
+  function handleLeftBoundary(leftBoundary: ConcentrationDividingLine) {
+    let containDeviceIds: number[] = [];
+    const leftSections: {
+      section: Section;
+      port: electronicMapGraphicData.RelatedRef.DevicePort;
+    }[] = [];
+    leftBoundary.datas.nodeConWithSecs.forEach((node) => {
+      if (node.leftSection && node.leftSection.id) {
+        leftSections.push({
+          section: drawApp.queryStore.queryById(node.leftSection.id),
+          port: node.leftSection.devicePort,
+        });
+      }
+    });
+    containDeviceIds = [...leftSections.map((g) => g.section.id)];
+    leftSections.forEach((leftSection) => {
+      findContainDevice(
+        leftSection.section,
+        leftSection.port,
+        containDeviceIds,
+        drawApp
+      );
+      containDeviceIds = Array.from(new Set(containDeviceIds));
+    });
+    if (!leftBoundary.datas.refLeftStationId) {
+      handleContainDevices(containDeviceIds, []);
+    } else {
+      handleContainDevices(containDeviceIds, [
+        leftBoundary.datas.refLeftStationId,
+      ]);
+    }
+  }
+  function handleRightBoundary(rightBoundary: ConcentrationDividingLine) {
+    let containDeviceIds: number[] = [];
+    const rightSections: {
+      section: Section;
+      port: electronicMapGraphicData.RelatedRef.DevicePort;
+    }[] = [];
+    rightBoundary.datas.nodeConWithSecs.forEach((node) => {
+      if (node.rightSection && node.rightSection.id) {
+        rightSections.push({
+          section: drawApp.queryStore.queryById(node.rightSection.id),
+          port: node.rightSection.devicePort,
+        });
+      }
+    });
+    containDeviceIds = [...rightSections.map((g) => g.section.id)];
+    rightSections.forEach((rightSections) => {
+      findContainDevice(
+        rightSections.section,
+        rightSections.port,
+        containDeviceIds,
+        drawApp
+      );
+      containDeviceIds = Array.from(new Set(containDeviceIds));
+    });
+    if (!rightBoundary.datas.refRightStationId) {
+      handleContainDevices(containDeviceIds, []);
+    } else {
+      handleContainDevices(containDeviceIds, [
+        rightBoundary.datas.refRightStationId,
+      ]);
+    }
+  }
+}
+
+function backConfirm() {
+  router.go(-1);
+}
 </script>

src/protos/electronicMap_graphic_data.ts

@@ -24,9 +24,11 @@ export namespace electronicMapGraphicData {
             logicSections?: LogicSection[];
             concentrationDividingLines?: ConcentrationDividingLine[];
             generateAxleCountingConfig?: GenerateAxleCountingConfig;
+            screenDoorConfig?: ScreenDoorConfig;
+            separators?: Separator[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5, 6, 7, 8, 9, 10], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5, 6, 7, 8, 9, 10, 13], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("canvas" in data && data.canvas != undefined) {
                     this.canvas = data.canvas;
@@ -61,6 +63,12 @@ export namespace electronicMapGraphicData {
                 if ("generateAxleCountingConfig" in data && data.generateAxleCountingConfig != undefined) {
                     this.generateAxleCountingConfig = data.generateAxleCountingConfig;
                 }
+                if ("screenDoorConfig" in data && data.screenDoorConfig != undefined) {
+                    this.screenDoorConfig = data.screenDoorConfig;
+                }
+                if ("separators" in data && data.separators != undefined) {
+                    this.separators = data.separators;
+                }
             }
         }
         get canvas() {
@@ -135,6 +143,21 @@ export namespace electronicMapGraphicData {
         get has_generateAxleCountingConfig() {
             return pb_1.Message.getField(this, 11) != null;
         }
+        get screenDoorConfig() {
+            return pb_1.Message.getWrapperField(this, ScreenDoorConfig, 12) as ScreenDoorConfig;
+        }
+        set screenDoorConfig(value: ScreenDoorConfig) {
+            pb_1.Message.setWrapperField(this, 12, value);
+        }
+        get has_screenDoorConfig() {
+            return pb_1.Message.getField(this, 12) != null;
+        }
+        get separators() {
+            return pb_1.Message.getRepeatedWrapperField(this, Separator, 13) as Separator[];
+        }
+        set separators(value: Separator[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 13, value);
+        }
         static fromObject(data: {
             canvas?: ReturnType<typeof dependency_1.common.Canvas.prototype.toObject>;
             stations?: ReturnType<typeof Station.prototype.toObject>[];
@@ -147,6 +170,8 @@ export namespace electronicMapGraphicData {
             logicSections?: ReturnType<typeof LogicSection.prototype.toObject>[];
             concentrationDividingLines?: ReturnType<typeof ConcentrationDividingLine.prototype.toObject>[];
             generateAxleCountingConfig?: ReturnType<typeof GenerateAxleCountingConfig.prototype.toObject>;
+            screenDoorConfig?: ReturnType<typeof ScreenDoorConfig.prototype.toObject>;
+            separators?: ReturnType<typeof Separator.prototype.toObject>[];
         }): ElectronicMapGraphicStorage {
             const message = new ElectronicMapGraphicStorage({});
             if (data.canvas != null) {
@@ -182,6 +207,12 @@ export namespace electronicMapGraphicData {
             if (data.generateAxleCountingConfig != null) {
                 message.generateAxleCountingConfig = GenerateAxleCountingConfig.fromObject(data.generateAxleCountingConfig);
             }
+            if (data.screenDoorConfig != null) {
+                message.screenDoorConfig = ScreenDoorConfig.fromObject(data.screenDoorConfig);
+            }
+            if (data.separators != null) {
+                message.separators = data.separators.map(item => Separator.fromObject(item));
+            }
             return message;
         }
         toObject() {
@@ -197,6 +228,8 @@ export namespace electronicMapGraphicData {
                 logicSections?: ReturnType<typeof LogicSection.prototype.toObject>[];
                 concentrationDividingLines?: ReturnType<typeof ConcentrationDividingLine.prototype.toObject>[];
                 generateAxleCountingConfig?: ReturnType<typeof GenerateAxleCountingConfig.prototype.toObject>;
+                screenDoorConfig?: ReturnType<typeof ScreenDoorConfig.prototype.toObject>;
+                separators?: ReturnType<typeof Separator.prototype.toObject>[];
             } = {};
             if (this.canvas != null) {
                 data.canvas = this.canvas.toObject();
@@ -231,6 +264,12 @@ export namespace electronicMapGraphicData {
             if (this.generateAxleCountingConfig != null) {
                 data.generateAxleCountingConfig = this.generateAxleCountingConfig.toObject();
             }
+            if (this.screenDoorConfig != null) {
+                data.screenDoorConfig = this.screenDoorConfig.toObject();
+            }
+            if (this.separators != null) {
+                data.separators = this.separators.map((item: Separator) => item.toObject());
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -259,6 +298,10 @@ export namespace electronicMapGraphicData {
                 writer.writeRepeatedMessage(10, this.concentrationDividingLines, (item: ConcentrationDividingLine) => item.serialize(writer));
             if (this.has_generateAxleCountingConfig)
                 writer.writeMessage(11, this.generateAxleCountingConfig, () => this.generateAxleCountingConfig.serialize(writer));
+            if (this.has_screenDoorConfig)
+                writer.writeMessage(12, this.screenDoorConfig, () => this.screenDoorConfig.serialize(writer));
+            if (this.separators.length)
+                writer.writeRepeatedMessage(13, this.separators, (item: Separator) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -301,6 +344,12 @@ export namespace electronicMapGraphicData {
                     case 11:
                         reader.readMessage(message.generateAxleCountingConfig, () => message.generateAxleCountingConfig = GenerateAxleCountingConfig.deserialize(reader));
                         break;
+                    case 12:
+                        reader.readMessage(message.screenDoorConfig, () => message.screenDoorConfig = ScreenDoorConfig.deserialize(reader));
+                        break;
+                    case 13:
+                        reader.readMessage(message.separators, () => pb_1.Message.addToRepeatedWrapperField(message, 13, Separator.deserialize(reader), Separator));
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -855,6 +904,209 @@ export namespace electronicMapGraphicData {
             return ScreenDoor.deserialize(bytes);
         }
     }
+    export class ScreenDoorConfig extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            sonDoorAmount?: number;
+            screenDoorGroupList?: ScreenDoorGroup[];
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("sonDoorAmount" in data && data.sonDoorAmount != undefined) {
+                    this.sonDoorAmount = data.sonDoorAmount;
+                }
+                if ("screenDoorGroupList" in data && data.screenDoorGroupList != undefined) {
+                    this.screenDoorGroupList = data.screenDoorGroupList;
+                }
+            }
+        }
+        get sonDoorAmount() {
+            return pb_1.Message.getFieldWithDefault(this, 1, 0) as number;
+        }
+        set sonDoorAmount(value: number) {
+            pb_1.Message.setField(this, 1, value);
+        }
+        get screenDoorGroupList() {
+            return pb_1.Message.getRepeatedWrapperField(this, ScreenDoorGroup, 2) as ScreenDoorGroup[];
+        }
+        set screenDoorGroupList(value: ScreenDoorGroup[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 2, value);
+        }
+        static fromObject(data: {
+            sonDoorAmount?: number;
+            screenDoorGroupList?: ReturnType<typeof ScreenDoorGroup.prototype.toObject>[];
+        }): ScreenDoorConfig {
+            const message = new ScreenDoorConfig({});
+            if (data.sonDoorAmount != null) {
+                message.sonDoorAmount = data.sonDoorAmount;
+            }
+            if (data.screenDoorGroupList != null) {
+                message.screenDoorGroupList = data.screenDoorGroupList.map(item => ScreenDoorGroup.fromObject(item));
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                sonDoorAmount?: number;
+                screenDoorGroupList?: ReturnType<typeof ScreenDoorGroup.prototype.toObject>[];
+            } = {};
+            if (this.sonDoorAmount != null) {
+                data.sonDoorAmount = this.sonDoorAmount;
+            }
+            if (this.screenDoorGroupList != null) {
+                data.screenDoorGroupList = this.screenDoorGroupList.map((item: ScreenDoorGroup) => item.toObject());
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.sonDoorAmount != 0)
+                writer.writeInt32(1, this.sonDoorAmount);
+            if (this.screenDoorGroupList.length)
+                writer.writeRepeatedMessage(2, this.screenDoorGroupList, (item: ScreenDoorGroup) => item.serialize(writer));
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): ScreenDoorConfig {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new ScreenDoorConfig();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        message.sonDoorAmount = reader.readInt32();
+                        break;
+                    case 2:
+                        reader.readMessage(message.screenDoorGroupList, () => pb_1.Message.addToRepeatedWrapperField(message, 2, ScreenDoorGroup.deserialize(reader), ScreenDoorGroup));
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): ScreenDoorConfig {
+            return ScreenDoorConfig.deserialize(bytes);
+        }
+    }
+    export class ScreenDoorGroup extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            trainGroupAmount?: number;
+            startSmallDoor?: number;
+            endSmallDoor?: number;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("trainGroupAmount" in data && data.trainGroupAmount != undefined) {
+                    this.trainGroupAmount = data.trainGroupAmount;
+                }
+                if ("startSmallDoor" in data && data.startSmallDoor != undefined) {
+                    this.startSmallDoor = data.startSmallDoor;
+                }
+                if ("endSmallDoor" in data && data.endSmallDoor != undefined) {
+                    this.endSmallDoor = data.endSmallDoor;
+                }
+            }
+        }
+        get trainGroupAmount() {
+            return pb_1.Message.getFieldWithDefault(this, 1, 0) as number;
+        }
+        set trainGroupAmount(value: number) {
+            pb_1.Message.setField(this, 1, value);
+        }
+        get startSmallDoor() {
+            return pb_1.Message.getFieldWithDefault(this, 2, 0) as number;
+        }
+        set startSmallDoor(value: number) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        get endSmallDoor() {
+            return pb_1.Message.getFieldWithDefault(this, 3, 0) as number;
+        }
+        set endSmallDoor(value: number) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        static fromObject(data: {
+            trainGroupAmount?: number;
+            startSmallDoor?: number;
+            endSmallDoor?: number;
+        }): ScreenDoorGroup {
+            const message = new ScreenDoorGroup({});
+            if (data.trainGroupAmount != null) {
+                message.trainGroupAmount = data.trainGroupAmount;
+            }
+            if (data.startSmallDoor != null) {
+                message.startSmallDoor = data.startSmallDoor;
+            }
+            if (data.endSmallDoor != null) {
+                message.endSmallDoor = data.endSmallDoor;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                trainGroupAmount?: number;
+                startSmallDoor?: number;
+                endSmallDoor?: number;
+            } = {};
+            if (this.trainGroupAmount != null) {
+                data.trainGroupAmount = this.trainGroupAmount;
+            }
+            if (this.startSmallDoor != null) {
+                data.startSmallDoor = this.startSmallDoor;
+            }
+            if (this.endSmallDoor != null) {
+                data.endSmallDoor = this.endSmallDoor;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.trainGroupAmount != 0)
+                writer.writeInt32(1, this.trainGroupAmount);
+            if (this.startSmallDoor != 0)
+                writer.writeInt32(2, this.startSmallDoor);
+            if (this.endSmallDoor != 0)
+                writer.writeInt32(3, this.endSmallDoor);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): ScreenDoorGroup {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new ScreenDoorGroup();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        message.trainGroupAmount = reader.readInt32();
+                        break;
+                    case 2:
+                        message.startSmallDoor = reader.readInt32();
+                        break;
+                    case 3:
+                        message.endSmallDoor = reader.readInt32();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): ScreenDoorGroup {
+            return ScreenDoorGroup.deserialize(bytes);
+        }
+    }
     export class Section extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
@@ -2185,6 +2437,96 @@ export namespace electronicMapGraphicData {
             SectionBoundary = 1
         }
     }
+    export class GenerateAxleCountingConfig extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            bbConnect?: number[];
+            noGenerateGroup?: number[];
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [1, 2], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("bbConnect" in data && data.bbConnect != undefined) {
+                    this.bbConnect = data.bbConnect;
+                }
+                if ("noGenerateGroup" in data && data.noGenerateGroup != undefined) {
+                    this.noGenerateGroup = data.noGenerateGroup;
+                }
+            }
+        }
+        get bbConnect() {
+            return pb_1.Message.getFieldWithDefault(this, 1, []) as number[];
+        }
+        set bbConnect(value: number[]) {
+            pb_1.Message.setField(this, 1, value);
+        }
+        get noGenerateGroup() {
+            return pb_1.Message.getFieldWithDefault(this, 2, []) as number[];
+        }
+        set noGenerateGroup(value: number[]) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        static fromObject(data: {
+            bbConnect?: number[];
+            noGenerateGroup?: number[];
+        }): GenerateAxleCountingConfig {
+            const message = new GenerateAxleCountingConfig({});
+            if (data.bbConnect != null) {
+                message.bbConnect = data.bbConnect;
+            }
+            if (data.noGenerateGroup != null) {
+                message.noGenerateGroup = data.noGenerateGroup;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                bbConnect?: number[];
+                noGenerateGroup?: number[];
+            } = {};
+            if (this.bbConnect != null) {
+                data.bbConnect = this.bbConnect;
+            }
+            if (this.noGenerateGroup != null) {
+                data.noGenerateGroup = this.noGenerateGroup;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.bbConnect.length)
+                writer.writePackedUint32(1, this.bbConnect);
+            if (this.noGenerateGroup.length)
+                writer.writePackedUint32(2, this.noGenerateGroup);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): GenerateAxleCountingConfig {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new GenerateAxleCountingConfig();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        message.bbConnect = reader.readPackedUint32();
+                        break;
+                    case 2:
+                        message.noGenerateGroup = reader.readPackedUint32();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): GenerateAxleCountingConfig {
+            return GenerateAxleCountingConfig.deserialize(bytes);
+        }
+    }
     export class ConcentrationDividingLine extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
@@ -2489,6 +2831,122 @@ export namespace electronicMapGraphicData {
             return NodeConWithSec.deserialize(bytes);
         }
     }
+    export class Separator extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: dependency_1.common.CommonInfo;
+            code?: string;
+            separatorType?: string;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("common" in data && data.common != undefined) {
+                    this.common = data.common;
+                }
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
+                }
+                if ("separatorType" in data && data.separatorType != undefined) {
+                    this.separatorType = data.separatorType;
+                }
+            }
+        }
+        get common() {
+            return pb_1.Message.getWrapperField(this, dependency_1.common.CommonInfo, 1) as dependency_1.common.CommonInfo;
+        }
+        set common(value: dependency_1.common.CommonInfo) {
+            pb_1.Message.setWrapperField(this, 1, value);
+        }
+        get has_common() {
+            return pb_1.Message.getField(this, 1) != null;
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        get separatorType() {
+            return pb_1.Message.getFieldWithDefault(this, 3, "") as string;
+        }
+        set separatorType(value: string) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof dependency_1.common.CommonInfo.prototype.toObject>;
+            code?: string;
+            separatorType?: string;
+        }): Separator {
+            const message = new Separator({});
+            if (data.common != null) {
+                message.common = dependency_1.common.CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.separatorType != null) {
+                message.separatorType = data.separatorType;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof dependency_1.common.CommonInfo.prototype.toObject>;
+                code?: string;
+                separatorType?: string;
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.separatorType != null) {
+                data.separatorType = this.separatorType;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.has_common)
+                writer.writeMessage(1, this.common, () => this.common.serialize(writer));
+            if (this.code.length)
+                writer.writeString(2, this.code);
+            if (this.separatorType.length)
+                writer.writeString(3, this.separatorType);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Separator {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Separator();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.common, () => message.common = dependency_1.common.CommonInfo.deserialize(reader));
+                        break;
+                    case 2:
+                        message.code = reader.readString();
+                        break;
+                    case 3:
+                        message.separatorType = reader.readString();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): Separator {
+            return Separator.deserialize(bytes);
+        }
+    }
     export class KilometerSystem extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
@@ -2832,94 +3290,4 @@ export namespace electronicMapGraphicData {
             C = 2
         }
     }
-    export class GenerateAxleCountingConfig extends pb_1.Message {
-        #one_of_decls: number[][] = [];
-        constructor(data?: any[] | {
-            bbConnect?: number[];
-            noGenerateGroup?: number[];
-        }) {
-            super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [1, 2], this.#one_of_decls);
-            if (!Array.isArray(data) && typeof data == "object") {
-                if ("bbConnect" in data && data.bbConnect != undefined) {
-                    this.bbConnect = data.bbConnect;
-                }
-                if ("noGenerateGroup" in data && data.noGenerateGroup != undefined) {
-                    this.noGenerateGroup = data.noGenerateGroup;
-                }
-            }
-        }
-        get bbConnect() {
-            return pb_1.Message.getFieldWithDefault(this, 1, []) as number[];
-        }
-        set bbConnect(value: number[]) {
-            pb_1.Message.setField(this, 1, value);
-        }
-        get noGenerateGroup() {
-            return pb_1.Message.getFieldWithDefault(this, 2, []) as number[];
-        }
-        set noGenerateGroup(value: number[]) {
-            pb_1.Message.setField(this, 2, value);
-        }
-        static fromObject(data: {
-            bbConnect?: number[];
-            noGenerateGroup?: number[];
-        }): GenerateAxleCountingConfig {
-            const message = new GenerateAxleCountingConfig({});
-            if (data.bbConnect != null) {
-                message.bbConnect = data.bbConnect;
-            }
-            if (data.noGenerateGroup != null) {
-                message.noGenerateGroup = data.noGenerateGroup;
-            }
-            return message;
-        }
-        toObject() {
-            const data: {
-                bbConnect?: number[];
-                noGenerateGroup?: number[];
-            } = {};
-            if (this.bbConnect != null) {
-                data.bbConnect = this.bbConnect;
-            }
-            if (this.noGenerateGroup != null) {
-                data.noGenerateGroup = this.noGenerateGroup;
-            }
-            return data;
-        }
-        serialize(): Uint8Array;
-        serialize(w: pb_1.BinaryWriter): void;
-        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
-            const writer = w || new pb_1.BinaryWriter();
-            if (this.bbConnect.length)
-                writer.writePackedUint32(1, this.bbConnect);
-            if (this.noGenerateGroup.length)
-                writer.writePackedUint32(2, this.noGenerateGroup);
-            if (!w)
-                return writer.getResultBuffer();
-        }
-        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): GenerateAxleCountingConfig {
-            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new GenerateAxleCountingConfig();
-            while (reader.nextField()) {
-                if (reader.isEndGroup())
-                    break;
-                switch (reader.getFieldNumber()) {
-                    case 1:
-                        message.bbConnect = reader.readPackedUint32();
-                        break;
-                    case 2:
-                        message.noGenerateGroup = reader.readPackedUint32();
-                        break;
-                    default: reader.skipField();
-                }
-            }
-            return message;
-        }
-        serializeBinary(): Uint8Array {
-            return this.serialize();
-        }
-        static deserializeBinary(bytes: Uint8Array): GenerateAxleCountingConfig {
-            return GenerateAxleCountingConfig.deserialize(bytes);
-        }
-    }
 }

src/stores/electronicMap-draw-store.ts

@@ -19,6 +19,8 @@ export const useDrawStore = defineStore('draw', {
     selectedGraphics: null as JlGraphic[] | null,
     draftId: null as number | null,
     oneClickType: '',
+    showLayer: [] as string[], // 显示的图层（草稿和发布图共用）
+    showLayerDialog: false, // 显示图层控制弹窗（草稿和发布图共用）
   }),
   getters: {
     drawMode: (state) => state.drawAssistant != null,
@@ -103,5 +105,11 @@ export const useDrawStore = defineStore('draw', {
     setDraftId(id: number | null) {
       this.draftId = id;
     },
+    setShowLayer(v: string[]) {
+      this.showLayer = v;
+    },
+    setShowLayerDialog(v: boolean) {
+      this.showLayerDialog = v;
+    },
   },
 });