Merge branch 'master' of git.code.tencent.com:beijing-rtss-test/bj-rtss-client

bj-rtss-message

@@ -0,0 +1 @@
+Subproject commit f12288dffe11443fbf16c02b9e1f39f3b44ceda2

graphic-pixi

@@ -1 +1 @@
-Subproject commit 1f302648b5a71a82b798b77fe238c5fc6e3081b4
+Subproject commit 0a0cb0a77afd9783081c2dc6ba19687b0b3aa0f7

src/boot/axios.ts

@@ -66,7 +66,7 @@ export class ApiError {
 // "export default () => {}" function below (which runs individually
 // for each client)
 const api = axios.create({ baseURL: getHttpBase() });
-
+let isOpenDialog = false; // 认证弹窗是否打开
 export default boot(({ app, router }) => {
   // for use inside Vue files (Options API) through this.$axios and this.$api
 
@@ -86,14 +86,20 @@ export default boot(({ app, router }) => {
       return response;
     },
     (err) => {
-      if (err.response && err.response.status === 401) {
+      if (err.response && err.response.status === 401 && !isOpenDialog) {
+        isOpenDialog = true;
         Dialog.create({
           title: '认证失败',
           message: '认证失败或登录超时，请重新登录',
           persistent: true,
-        }).onOk(() => {
+        })
-          router.push({ name: 'login' });
+          .onOk(() => {
-        });
+            router.push({ name: 'login' });
+            isOpenDialog = false;
+          })
+          .onCancel(() => {
+            isOpenDialog = false;
+          });
       }
       return Promise.reject(ApiError.from(err));
     }

src/components/draw-app/DrawProperties.vue

@@ -22,6 +22,9 @@
         <!-- <template v-if="drawStore.drawGraphicType === Train.Type">
           <train-template></train-template>
         </template> -->
+        <axle-counting-section-property
+          v-else-if="drawStore.selectedGraphicType === AxleCountingSection.Type"
+        ></axle-counting-section-property>
       </q-card-section>
     </q-card>
   </div>
@@ -69,9 +72,17 @@
           <axle-counting-property
             v-else-if="drawStore.selectedGraphicType === AxleCounting.Type"
           ></axle-counting-property>
+          <axle-counting-section-property
+            v-else-if="
+              drawStore.selectedGraphicType === AxleCountingSection.Type
+            "
+          ></axle-counting-section-property>
           <separator-property
             v-else-if="drawStore.selectedGraphicType === Separator.Type"
           ></separator-property>
+          <section-link-property
+            v-else-if="drawStore.selectedGraphicType === SectionLink.Type"
+          ></section-link-property>
         </q-card-section>
       </template>
     </q-card>
@@ -92,10 +103,12 @@ import StationProperty from './properties/StationProperty.vue';
 // import TrainProperty from './properties/TrainProperty.vue';
 import TrainWindowProperty from './properties/TrainWindowProperty.vue';
 import AxleCountingProperty from './properties/AxleCountingProperty.vue';
+import AxleCountingSectionProperty from './properties/AxleCountingSectionProperty.vue';
 import SignalProperty from './properties/SignalProperty.vue';
 import TurnoutProperty from './properties/TurnoutProperty.vue';
 import SectionProperty from './properties/SectionProperty.vue';
 import SeparatorProperty from './properties/SeparatorProperty.vue';
+import SectionLinkProperty from './properties/SectionLinkProperty.vue';
 import { Link } from 'src/graphics/link/Link';
 import { Rect } from 'src/graphics/rect/Rect';
 import { Platform } from 'src/graphics/platform/Platform';
@@ -107,7 +120,9 @@ import { Turnout } from 'src/graphics/turnout/Turnout';
 import { Section } from 'src/graphics/section/Section';
 import { TrainWindow } from 'src/graphics/trainWindow/TrainWindow';
 import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
+import { AxleCountingSection } from 'src/graphics/axleCountingSection/AxleCountingSection';
 import { Separator } from 'src/graphics/separator/Separator';
+import { SectionLink } from 'src/graphics/sectionLink/SectionLink';
 
 const drawStore = useDrawStore();
 </script>

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

@@ -0,0 +1,119 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input
+      outlined
+      readonly
+      v-model="axleCountingSectionModel.id"
+      label="id"
+      hint=""
+    />
+    <q-input
+      outlined
+      label="计轴区段名称"
+      type="textarea"
+      @blur="onUpdate"
+      v-model="axleCountingSectionModel.code"
+      lazy-rules
+      autogrow
+    />
+    <q-select
+      outlined
+      style="margin-top: 10px"
+      v-model="kilometerSystem.coordinateSystem"
+      :options="CoordinateSystemOptions"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="坐标系"
+    ></q-select>
+    <q-input
+      outlined
+      style="margin-top: 10px"
+      v-model.number="kilometerSystem.kilometer"
+      type="number"
+      @blur="onUpdate"
+      label="公里标(mm):"
+    />
+    <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-list>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { AxleCountingSectionData } from 'src/drawApp/graphics/AxleCountingSectionInteraction';
+import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
+import { AxleCountingSection } from 'src/graphics/axleCountingSection/AxleCountingSection';
+import { useDrawStore } from 'src/stores/draw-store';
+import { computed, onMounted, reactive, watch } from 'vue';
+
+const drawStore = useDrawStore();
+const axleCountingSectionModel = reactive(new AxleCountingSectionData());
+const kilometerSystem = reactive({ coordinateSystem: '', kilometer: 0 });
+
+const CoordinateSystemOptions = [
+  { label: '车辆段', value: 'DEPOT' },
+  { label: '停车场', value: 'PARKING_LOT' },
+  { label: '正线', value: 'MAIN_LINE' },
+  { label: '换线', value: 'TRANSFER' },
+];
+
+drawStore.$subscribe;
+watch(
+  () => drawStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == AxleCountingSection.Type) {
+      axleCountingSectionModel.copyFrom(
+        val.saveData() as AxleCountingSectionData
+      );
+    }
+  }
+);
+
+onMounted(() => {
+  const axleCountingSection = drawStore.selectedGraphic as AxleCountingSection;
+  if (axleCountingSection) {
+    axleCountingSectionModel.copyFrom(axleCountingSection.saveData());
+  }
+});
+
+function onUpdate() {
+  const axleCountingSection = drawStore.selectedGraphic as AxleCountingSection;
+  if (axleCountingSection) {
+    drawStore
+      .getDrawApp()
+      .updateGraphicAndRecord(axleCountingSection, axleCountingSectionModel);
+  }
+}
+
+const sectionRelations = computed(() => {
+  const axleCountingSection = drawStore.selectedGraphic as AxleCountingSection;
+  const sectionRelations =
+    axleCountingSection?.relationManage.getRelationsOfGraphicAndOtherType(
+      axleCountingSection,
+      AxleCounting.Type
+    );
+  const ref = sectionRelations.map(
+    (relation) =>
+      `${
+        relation.getOtherGraphic<AxleCounting>(axleCountingSection).datas.code
+      }(${relation.getOtherRelationParam(axleCountingSection).param})`
+  );
+  return Array.from(new Set(ref));
+});
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <q-form>
+    <q-input
+      outlined
+      readonly
+      v-model="sectionLinkModel.id"
+      label="id"
+      hint=""
+    />
+    <q-input
+      outlined
+      v-model="sectionLinkModel.code"
+      @blur="onUpdate"
+      label="编号"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { SectionLink } from 'src/graphics/sectionLink/SectionLink';
+import { SectionLinkData } from 'src/drawApp/graphics/SectionLinkInteraction';
+import { useDrawStore } from 'src/stores/draw-store';
+import { shallowRef, watchEffect } from 'vue';
+
+const drawStore = useDrawStore();
+
+const sectionLinkModel = shallowRef(new SectionLinkData());
+
+watchEffect(() => {
+  const sectionLink = drawStore.selectedGraphic;
+  if (sectionLink && sectionLink instanceof SectionLink) {
+    sectionLinkModel.value = sectionLink.saveData();
+  }
+});
+
+const onUpdate = () => {
+  const sectionLink = drawStore.selectedGraphic as SectionLink;
+  if (sectionLink) {
+    drawStore
+      .getDrawApp()
+      .updateGraphicAndRecord(sectionLink, sectionLinkModel.value);
+  }
+};
+</script>

src/drawApp/graphics/AxleCountingSectionInteraction.ts

@@ -0,0 +1,63 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from './GraphicDataBase';
+import {
+  IAxleCountingSectionData,
+  AxleCountingSection,
+} from 'src/graphics/axleCountingSection/AxleCountingSection';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { IPointData } from 'pixi.js';
+
+export class AxleCountingSectionData
+  extends GraphicDataBase
+  implements IAxleCountingSectionData
+{
+  constructor(data?: graphicData.AxleCountingSection) {
+    let axleCountingSection;
+    if (!data) {
+      axleCountingSection = new graphicData.AxleCountingSection({
+        common: GraphicDataBase.defaultCommonInfo(AxleCountingSection.Type),
+      });
+    } else {
+      axleCountingSection = data;
+    }
+    super(axleCountingSection);
+  }
+  public get data(): graphicData.AxleCountingSection {
+    return this.getData<graphicData.AxleCountingSection>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get points(): IPointData[] {
+    return this.data.points;
+  }
+  set points(points: IPointData[]) {
+    this.data.points = points.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;
+  }
+  clone(): AxleCountingSectionData {
+    return new AxleCountingSectionData(this.data.cloneMessage());
+  }
+  copyFrom(data: AxleCountingSectionData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: AxleCountingSectionData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/graphics/SectionLinkInteraction.ts

@@ -0,0 +1,58 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from './GraphicDataBase';
+import {
+  ISectionLinkData,
+  SectionLink,
+} from 'src/graphics/sectionLink/SectionLink';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { IPointData } from 'pixi.js';
+
+export class SectionLinkData
+  extends GraphicDataBase
+  implements ISectionLinkData
+{
+  constructor(data?: graphicData.SectionLink) {
+    let sectionLink;
+    if (!data) {
+      sectionLink = new graphicData.SectionLink({
+        common: GraphicDataBase.defaultCommonInfo(SectionLink.Type),
+      });
+    } else {
+      sectionLink = data;
+    }
+    super(sectionLink);
+  }
+  public get data(): graphicData.SectionLink {
+    return this.getData<graphicData.SectionLink>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get points(): IPointData[] {
+    return this.data.points;
+  }
+  set points(points: IPointData[]) {
+    this.data.points = points.map(
+      (p) => new graphicData.Point({ x: p.x, y: p.y })
+    );
+  }
+  get refDevice(): string {
+    return this.data.refDevice;
+  }
+  set refDevice(v: string) {
+    this.data.refDevice = v;
+  }
+
+  clone(): SectionLinkData {
+    return new SectionLinkData(this.data.cloneMessage());
+  }
+  copyFrom(data: SectionLinkData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: SectionLinkData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/index.ts

@@ -46,6 +46,12 @@ import {
 } from 'src/graphics/axleCounting/AxleCounting';
 import { AxleCountingDraw } from 'src/graphics/axleCounting/AxleCountingDrawAssistant';
 import { AxleCountingData } from './graphics/AxleCountingInteraction';
+import {
+  AxleCountingSection,
+  AxleCountingSectionTemplate,
+} from 'src/graphics/axleCountingSection/AxleCountingSection';
+import { AxleCountingSectionDraw } from 'src/graphics/axleCountingSection/AxleCountingSectionAssistant';
+import { AxleCountingSectionData } from './graphics/AxleCountingSectionInteraction';
 import { Turnout, TurnoutTemplate } from 'src/graphics/turnout/Turnout';
 import { TurnoutDraw } from 'src/graphics/turnout/TurnoutDrawAssistant';
 import { TurnoutData, TurnoutStates } from './graphics/TurnoutInteraction';
@@ -59,6 +65,12 @@ import { toStorageTransform } from './graphics/GraphicDataBase';
 import { SeparatorDraw } from 'src/graphics/separator/SeparatorDrawAssistant';
 import { Separator, SeparatorTemplate } from 'src/graphics/separator/Separator';
 import { SeparatorData } from './graphics/SeparatorInteraction';
+import {
+  SectionLink,
+  SectionLinkTemplate,
+} from 'src/graphics/sectionLink/SectionLink';
+import { SectionLinkDraw } from 'src/graphics/sectionLink/SectionLinkDrawAssistant';
+import { SectionLinkData } from './graphics/SectionLinkInteraction';
 
 // export function fromStoragePoint(p: graphicData.Point): Point {
 //   return new Point(p.x, p.y);
@@ -164,6 +176,8 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
     | OneClickGenerateDraw
     | AxleCountingDraw
     | SeparatorDraw
+    | SectionLinkDraw
+    | AxleCountingSectionDraw
   )[] = [];
   if (draftType === 'Line') {
     drawAssistants = [
@@ -192,6 +206,11 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
         new AxleCountingTemplate(new AxleCountingData())
       ),
       new SeparatorDraw(app, new SeparatorTemplate(new SeparatorData())),
+      new SectionLinkDraw(app, new SectionLinkTemplate(new SectionLinkData())),
+      new AxleCountingSectionDraw(
+        app,
+        new AxleCountingSectionTemplate(new AxleCountingSectionData())
+      ),
     ];
     DrawSignalInteraction.init(app);
   }
@@ -210,6 +229,11 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
     const trainWindows = app.queryStore.queryByType<TrainWindow>(
       TrainWindow.Type
     );
+    const sections = app.queryStore.queryByType<Section>(Section.Type);
+    const sectionLinks = app.queryStore.queryByType<SectionLink>(
+      SectionLink.Type
+    );
+    const turnouts = app.queryStore.queryByType<Turnout>(Turnout.Type);
     UndoOptions.handler = () => {
       app.opRecord.undo();
     };
@@ -223,6 +247,15 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
       axleCountings.forEach((axleCounting) => {
         axleCounting.visible = false;
       });
+      sections.forEach((section) => {
+        section.visible = false;
+      });
+      sectionLinks.forEach((sectionLink) => {
+        sectionLink.visible = true;
+      });
+      turnouts.forEach((turnout) => {
+        turnout.visible = false;
+      });
     };
     twoLayerOptions.handler = () => {
       trainWindows.forEach((trainWindow) => {
@@ -311,6 +344,14 @@ export function saveDrawDatas(app: JlDrawApp) {
     } else if (Separator.Type === g.type) {
       const separatorData = (g as Separator).saveData();
       storage.separators.push((separatorData as SeparatorData).data);
+    } else if (SectionLink.Type === g.type) {
+      const sectionLinkData = (g as SectionLink).saveData();
+      storage.sectionLinks.push((sectionLinkData as SectionLinkData).data);
+    } else if (AxleCountingSection.Type === g.type) {
+      const axleCountingSectionData = (g as AxleCountingSection).saveData();
+      storage.axleCountingSections.push(
+        (axleCountingSectionData as AxleCountingSectionData).data
+      );
     }
   });
   const base64 = fromUint8Array(storage.serialize());
@@ -369,6 +410,12 @@ export async function loadDrawDatas(app: GraphicApp) {
     storage.separators.forEach((separator) => {
       datas.push(new SeparatorData(separator));
     });
+    storage.sectionLinks.forEach((sectionLink) => {
+      datas.push(new SectionLinkData(sectionLink));
+    });
+    storage.axleCountingSections.forEach((axleCountingSection) => {
+      datas.push(new AxleCountingSectionData(axleCountingSection));
+    });
     app.loadGraphic(datas);
   } else {
     app.loadGraphic([]);

src/graphics/axleCounting/AxleCountingDrawAssistant.ts

@@ -115,10 +115,7 @@ export class AxleCountingDraw extends GraphicDrawAssistant<
       if (graphic.type == 'Turnout') {
         axleCounting.position.set(ps.x, ps.y);
       } else {
-        axleCounting.position.set(
+        axleCounting.position.set(ps.x, ps.y);
-          ps.x,
-          ps.y - AxleCountingConsts.offsetSection * direction
-        );
       }
       axleCounting.id = GraphicIdGenerator.next();
       axleCounting.datas.axleCountingRef = [refData2, refData1];
@@ -142,10 +139,7 @@ export class AxleCountingDraw extends GraphicDrawAssistant<
       if (graphic.type == 'Turnout') {
         axleCounting.position.set(ps.x, ps.y);
       } else {
-        axleCounting.position.set(
+        axleCounting.position.set(ps.x, ps.y);
-          ps.x,
-          ps.y - AxleCountingConsts.offsetSection * direction
-        );
       }
       axleCounting.id = GraphicIdGenerator.next();
       axleCounting.datas.axleCountingRef = [refData];

src/graphics/axleCountingSection/AxleCountingSection.ts

@@ -0,0 +1,122 @@
+import { Graphics, IPointData } from 'pixi.js';
+import {
+  GraphicData,
+  GraphicRelationParam,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+} from 'src/jl-graphic';
+import { IRelatedRefData, protoPort2Data } from '../CommonGraphics';
+import { SectionPort } from '../section/Section';
+
+export interface IAxleCountingSectionData extends GraphicData {
+  get code(): string; // 编号
+  set code(v: string);
+  get points(): IPointData[]; // 线坐标点
+  set points(points: IPointData[]);
+  get paRef(): IRelatedRefData | undefined;
+  set paRef(ref: IRelatedRefData | undefined);
+  get pbRef(): IRelatedRefData | undefined;
+  set pbRef(ref: IRelatedRefData | undefined);
+  clone(): IAxleCountingSectionData;
+  copyFrom(data: IAxleCountingSectionData): void;
+  eq(other: IAxleCountingSectionData): boolean;
+}
+
+export const AxleCountingSectionConsts = {
+  lineColor: '0xff0000',
+  lineWidth: 2,
+};
+
+export class AxleCountingSection extends JlGraphic {
+  static Type = 'AxleCountingSection';
+  lineGraphic: Graphics;
+  labelGraphic: VectorText;
+  constructor() {
+    super(AxleCountingSection.Type);
+    this.lineGraphic = new Graphics();
+    this.labelGraphic = new VectorText();
+    this.labelGraphic.setVectorFontSize(14);
+    this.labelGraphic.anchor.set(0.5);
+    this.labelGraphic.style.fill = '#0f0';
+    this.labelGraphic.transformSave = true;
+    this.labelGraphic.name = 'label';
+    this.transformSave = true;
+    this.addChild(this.lineGraphic);
+    this.addChild(this.labelGraphic);
+  }
+
+  get datas(): IAxleCountingSectionData {
+    return this.getDatas<IAxleCountingSectionData>();
+  }
+  doRepaint(): void {
+    if (this.datas.points.length < 2) {
+      throw new Error('AxleCountingSection坐标数据异常');
+    }
+    this.lineGraphic.clear();
+    this.lineGraphic.lineStyle(
+      AxleCountingSectionConsts.lineWidth,
+      AxleCountingSectionConsts.lineColor
+    );
+    this.datas.points.forEach((p, i) => {
+      if (i !== 0) {
+        this.lineGraphic.lineTo(p.x, p.y);
+      } else {
+        this.lineGraphic.moveTo(p.x, p.y);
+      }
+    });
+    this.labelGraphic.text = this.datas.code;
+    const labelPosition = this.datas.childTransforms?.find(
+      (t) => t.name === this.labelGraphic.name
+    )?.transform.position;
+    if (labelPosition) {
+      this.labelGraphic.position.set(labelPosition.x, labelPosition.y);
+    } else {
+      this.labelGraphic.position.set(
+        this.datas.points[0].x,
+        this.datas.points[0].y + 20
+      );
+    }
+  }
+  get linePoints(): IPointData[] {
+    return this.datas.points;
+  }
+  set linePoints(points: IPointData[]) {
+    const old = this.datas.clone();
+    old.points = points;
+    this.updateData(old);
+  }
+  loadRelations() {
+    if (this.datas?.paRef?.id) {
+      this.relationManage.addRelation(
+        new GraphicRelationParam(this, SectionPort.A),
+        new GraphicRelationParam(
+          this.queryStore.queryById(this.datas.paRef.id),
+          protoPort2Data(this.datas.paRef.devicePort)
+        )
+      );
+    }
+    if (this.datas?.pbRef?.id) {
+      this.relationManage.addRelation(
+        new GraphicRelationParam(this, SectionPort.B),
+        new GraphicRelationParam(
+          this.queryStore.queryById(this.datas.pbRef.id),
+          protoPort2Data(this.datas.pbRef.devicePort)
+        )
+      );
+    }
+  }
+}
+
+export class AxleCountingSectionTemplate extends JlGraphicTemplate<AxleCountingSection> {
+  constructor(dataTemplate: IAxleCountingSectionData) {
+    super(AxleCountingSection.Type, {
+      dataTemplate,
+    });
+  }
+  new(): AxleCountingSection {
+    const axleCountingSection = new AxleCountingSection();
+    axleCountingSection.loadData(this.datas);
+    return axleCountingSection;
+  }
+}

src/graphics/axleCountingSection/AxleCountingSectionAssistant.ts

@@ -0,0 +1,266 @@
+import {
+  FederatedPointerEvent,
+  IHitArea,
+  IPoint,
+  IPointData,
+  Point,
+} from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicIdGenerator,
+  GraphicInteractionPlugin,
+  JlDrawApp,
+  JlGraphic,
+  linePoint,
+} from 'src/jl-graphic';
+
+import {
+  IAxleCountingSectionData,
+  AxleCountingSection,
+  AxleCountingSectionTemplate,
+  AxleCountingSectionConsts,
+} from './AxleCountingSection';
+import { AxleCounting } from '../axleCounting/AxleCounting';
+import { Section } from '../section/Section';
+import { Turnout } from '../turnout/Turnout';
+import { createRelatedRefProto } from '../CommonGraphics';
+
+function hasCommonElements(arr1: string[], arr2: string[]): boolean {
+  for (let i = 0; i < arr1.length; i++) {
+    if (arr2.includes(arr1[i])) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function hasSamePosition(point1: IPointData, point2: IPointData): boolean {
+  if (
+    Math.abs(point1.x - point2.x) < 20 &&
+    Math.abs(point1.y - point2.y) < 20
+  ) {
+    return true;
+  }
+  return false;
+}
+
+export interface IAxleCountingSectionDrawOptions {
+  newData: () => IAxleCountingSectionData;
+}
+
+export class AxleCountingSectionDraw extends GraphicDrawAssistant<
+  AxleCountingSectionTemplate,
+  IAxleCountingSectionData
+> {
+  codeGraph: AxleCountingSection;
+  constructor(app: JlDrawApp, template: AxleCountingSectionTemplate) {
+    super(app, template, 'sym_o_circle', '不展示');
+    this.codeGraph = this.graphicTemplate.new();
+    this.container.addChild(this.codeGraph);
+    AxleCountingSectionInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    this.codeGraph.loadData(this.graphicTemplate.datas);
+    this.codeGraph.doRepaint();
+  }
+
+  clearCache(): void {
+    //this.codeGraph.destroy();
+  }
+  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: IAxleCountingSectionData): boolean {
+    data.transform = this.container.saveTransform();
+    return true;
+  }
+  draw(graphics: AxleCounting[]) {
+    /*     const paRefPs = this.app.queryStore.queryById(
+      graphics[0].datas.axleCountingRef[0].id
+    );
+    const RepbRefPs = this.app.queryStore.queryById(
+      graphics[1].datas.axleCountingRef[0].id
+    ); */
+    const axleCountingSection = new AxleCountingSection();
+    axleCountingSection.loadData(this.graphicTemplate.datas);
+    axleCountingSection.datas.points = [
+      graphics[0].position,
+      graphics[1].position,
+    ];
+    axleCountingSection.id = GraphicIdGenerator.next();
+    const paRef = createRelatedRefProto(graphics[0].type, graphics[0].id);
+    const pbRef = createRelatedRefProto(graphics[1].type, graphics[1].id);
+    axleCountingSection.datas.paRef = paRef;
+    axleCountingSection.datas.pbRef = pbRef;
+    this.storeGraphic(axleCountingSection);
+    axleCountingSection.loadRelations();
+  }
+
+  oneGenerates() {
+    const axleCountingSectionAll =
+      this.app.queryStore.queryByType<AxleCountingSection>(
+        AxleCountingSection.Type
+      );
+    this.app.deleteGraphics(...axleCountingSectionAll);
+    const axleCountings = this.app.queryStore.queryByType<AxleCounting>(
+      AxleCounting.Type
+    );
+    const hasfourTurnout: AxleCounting[][] = [];
+    axleCountings.forEach((axleCounting) => {
+      const refDeviceTarget = axleCounting.datas.axleCountingRef.map(
+        (ref) => ref.id
+      );
+      for (let i = 0; i < axleCountings.length - 1; i++) {
+        if (axleCountings[i].id == axleCounting.id) return;
+        const refDevice = axleCountings[i].datas.axleCountingRef.map(
+          (ref) => ref.id
+        );
+        if (hasCommonElements(refDeviceTarget, refDevice)) {
+          this.draw([axleCounting, axleCountings[i]]);
+        }
+        if (hasSamePosition(axleCounting, axleCountings[i])) {
+          hasfourTurnout.push([axleCounting, axleCountings[i]]);
+        }
+      }
+    });
+    const fourTurnout: Turnout[] = [];
+    hasfourTurnout.forEach((axleCountings) => {
+      const axleCountingRelations =
+        axleCountings[0].relationManage.getRelationsOfGraphicAndOtherType(
+          axleCountings[0],
+          Turnout.Type
+        );
+      axleCountingRelations.forEach((relation) => {
+        const refDevice = relation.getOtherGraphic<Section>(axleCountings[0]);
+        fourTurnout;
+      });
+    });
+
+    /* axleCountings.sort((a, b) => a.x - b.x);
+    const downAxleCountings = axleCountings.filter((point) => {
+      return point.y > 350;
+    });
+    for (let i = 0; i < downAxleCountings.length - 1; i++) {
+      const firstRef = downAxleCountings[i].datas.axleCountingRef.map(
+        (ref) => ref.id
+      );
+      const nextRef = downAxleCountings[i + 1].datas.axleCountingRef.map(
+        (ref) => ref.id
+      );
+      let nextNextRef: string[] = [];
+      if (i + 2 < downAxleCountings.length) {
+        nextNextRef = downAxleCountings[i + 2].datas.axleCountingRef.map(
+          (ref) => ref.id
+        );
+      }
+      if (hasCommonElements(firstRef, nextRef)) {
+        this.draw([downAxleCountings[i], downAxleCountings[i + 1]]);
+      } else if (
+        hasSamePosition(
+          downAxleCountings[i + 1].position,
+          downAxleCountings[i + 2].position
+        ) &&
+        hasCommonElements(firstRef, nextNextRef)
+      ) {
+        this.draw([downAxleCountings[i], downAxleCountings[i + 2]]);
+        i += 2;
+      }
+    } */
+  }
+}
+
+function buildAbsorbablePositions(
+  axleCountingSection: AxleCountingSection
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const axleCountingSections =
+    axleCountingSection.queryStore.queryByType<AxleCountingSection>(
+      AxleCountingSection.Type
+    );
+  const { width } = axleCountingSection.getGraphicApp().canvas;
+  axleCountingSections.forEach((other) => {
+    if (other.id == axleCountingSection.id) {
+      return;
+    }
+    const ps = other.datas.transform.position;
+    const xs = new AbsorbableLine({ x: 0, y: ps.y }, { x: width, y: ps.y });
+    aps.push(xs);
+  });
+  return aps;
+}
+
+class AxleCountingSectionGraphicHitArea implements IHitArea {
+  axleCountingSection: AxleCountingSection;
+  constructor(axleCountingSection: AxleCountingSection) {
+    this.axleCountingSection = axleCountingSection;
+  }
+  contains(x: number, y: number): boolean {
+    for (let i = 1; i < this.axleCountingSection.datas.points.length; i++) {
+      const p1 = this.axleCountingSection.datas.points[i - 1];
+      const p2 = this.axleCountingSection.datas.points[i];
+      if (linePoint(p1, p2, { x, y }, AxleCountingSectionConsts.lineWidth)) {
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+export class AxleCountingSectionInteraction extends GraphicInteractionPlugin<AxleCountingSection> {
+  static Name = 'AxleCountingSection_transform';
+  constructor(app: JlDrawApp) {
+    super(AxleCountingSectionInteraction.Name, app);
+  }
+  static init(app: JlDrawApp) {
+    return new AxleCountingSectionInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): AxleCountingSection[] | undefined {
+    return grahpics
+      .filter((g) => g.type === AxleCountingSection.Type)
+      .map((g) => g as AxleCountingSection);
+  }
+  bind(g: AxleCountingSection): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.transformSave = true;
+    g.lineGraphic.eventMode = 'static';
+    g.lineGraphic.cursor = 'pointer';
+    g.lineGraphic.hitArea = new AxleCountingSectionGraphicHitArea(g);
+    g.labelGraphic.eventMode = 'static';
+    g.labelGraphic.cursor = 'pointer';
+    g.labelGraphic.selectable = true;
+    g.labelGraphic.draggable = true;
+    g.on('selected', this.onSelected, this);
+  }
+  unbind(g: AxleCountingSection): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.lineGraphic.eventMode = 'none';
+    g.lineGraphic.draggable = false;
+    g.lineGraphic.selectable = false;
+    g.lineGraphic.transformSave = false;
+    g.labelGraphic.eventMode = 'none';
+    g.labelGraphic.draggable = false;
+    g.labelGraphic.selectable = false;
+    g.labelGraphic.transformSave = false;
+    g.off('selected', this.onSelected, this);
+  }
+  onSelected(): void {
+    const AxleCountingSection = this.app
+      .selectedGraphics[0] as AxleCountingSection;
+    this.app.setOptions({
+      absorbablePositions: buildAbsorbablePositions(AxleCountingSection),
+    });
+  }
+}

src/graphics/sectionLink/SectionLink.ts

@@ -0,0 +1,106 @@
+import { Graphics, IPointData } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+  IChildTransform,
+} from 'src/jl-graphic';
+import { ILineGraphic } from 'src/jl-graphic/plugins/GraphicEditPlugin';
+
+export interface ISectionLinkData extends GraphicData {
+  get code(): string; // 编号
+  set code(v: string);
+  get points(): IPointData[];
+  set points(points: IPointData[]);
+  get refDevice(): string;
+  set refDevice(v: string);
+  clone(): ISectionLinkData;
+  copyFrom(data: ISectionLinkData): void;
+  eq(other: ISectionLinkData): boolean;
+}
+
+export const SectionLinkConsts = {
+  lineColor: 0x5578b6,
+  lineWidth: 5,
+};
+
+export class SectionLink extends JlGraphic implements ILineGraphic {
+  static Type = 'SectionLink';
+  lineGraphic: Graphics;
+  labelGraphic: VectorText;
+
+  constructor() {
+    super(SectionLink.Type);
+    this.lineGraphic = new Graphics();
+    this.labelGraphic = new VectorText();
+    this.labelGraphic.setVectorFontSize(14);
+    this.labelGraphic.anchor.set(0.5);
+    this.labelGraphic.style.fill = '#0f0';
+    this.labelGraphic.transformSave = true;
+    this.labelGraphic.name = 'label';
+    this.transformSave = true;
+    this.addChild(this.lineGraphic);
+    this.addChild(this.labelGraphic);
+  }
+
+  doRepaint() {
+    if (this.datas.points.length < 2) {
+      throw new Error('SectionLink坐标数据异常');
+    }
+
+    this.lineGraphic.clear();
+    this.lineGraphic.lineStyle(
+      SectionLinkConsts.lineWidth,
+      SectionLinkConsts.lineColor
+    );
+    this.datas.points.forEach((p, i) => {
+      if (i !== 0) {
+        this.lineGraphic.lineTo(p.x, p.y);
+      } else {
+        this.lineGraphic.moveTo(p.x, p.y);
+      }
+    });
+    this.labelGraphic.text = this.datas.code;
+    const labelPosition = this.datas?.childTransforms?.find(
+      (item: IChildTransform) => item.name === this.labelGraphic.name
+    )?.transform.position;
+    if (labelPosition) {
+      this.labelGraphic.position.set(labelPosition.x, labelPosition.y);
+    } else {
+      this.labelGraphic.position.set(
+        this.datas.points[0].x,
+        this.datas.points[0].y + 20
+      );
+    }
+  }
+
+  getStartPoint() {
+    return this.datas.points[0];
+  }
+  getEndPoint(): IPointData {
+    return this.datas.points[this.datas.points.length - 1];
+  }
+
+  get datas(): ISectionLinkData {
+    return this.getDatas<ISectionLinkData>();
+  }
+
+  get linePoints(): IPointData[] {
+    return this.datas.points;
+  }
+  set linePoints(points: IPointData[]) {
+    const old = this.datas.clone();
+    old.points = points;
+    this.updateData(old);
+  }
+}
+
+export class SectionLinkTemplate extends JlGraphicTemplate<SectionLink> {
+  constructor(dataTemplate: ISectionLinkData) {
+    super(SectionLink.Type, { dataTemplate });
+  }
+  new() {
+    return new SectionLink();
+  }
+}

src/graphics/sectionLink/SectionLinkDrawAssistant.ts

@@ -0,0 +1,183 @@
+import {
+  GraphicApp,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  JlDrawApp,
+  JlGraphic,
+  linePoint,
+  GraphicIdGenerator,
+} from 'src/jl-graphic';
+import {
+  ISectionLinkData,
+  SectionLink,
+  SectionLinkConsts,
+  SectionLinkTemplate,
+} from './SectionLink';
+import {
+  DisplayObject,
+  FederatedMouseEvent,
+  Graphics,
+  IHitArea,
+  IPointData,
+  Point,
+} from 'pixi.js';
+import { Section } from '../section/Section';
+import { Turnout } from '../turnout/Turnout';
+
+export class SectionLinkDraw extends GraphicDrawAssistant<
+  SectionLinkTemplate,
+  ISectionLinkData
+> {
+  points: Point[] = [];
+  graphic = new Graphics();
+
+  constructor(app: JlDrawApp, template: SectionLinkTemplate) {
+    super(app, template, 'sym_o_timeline', '不展示');
+    this.container.addChild(this.graphic);
+
+    SectionLinkEditPlugin.init(app, this);
+  }
+
+  onRightClick(): void {
+    this.createAndStore(true);
+  }
+
+  redraw(cp: Point): void {
+    if (this.points.length < 1) return;
+    this.graphic.clear();
+    this.graphic.lineStyle(
+      SectionLinkConsts.lineWidth,
+      SectionLinkConsts.lineColor
+    );
+    this.points.forEach((p, i) => {
+      if (i !== 0) {
+        this.graphic.lineTo(p.x, p.y);
+      } else {
+        this.graphic.moveTo(p.x, p.y);
+      }
+    });
+    this.graphic.lineTo(cp.x, cp.y);
+    console.log(cp, '000');
+  }
+
+  prepareData(data: ISectionLinkData): boolean {
+    console.log(this.points, '000');
+    data.points = this.points;
+    return true;
+  }
+  oneGenerates() {
+    // localToCanvasPoints
+    const sectionList = this.app.queryStore.queryByType<Section>(Section.Type);
+    const turnoutList = this.app.queryStore.queryByType<Turnout>(Turnout.Type);
+    console.log(sectionList.length, turnoutList.length);
+    sectionList.forEach((section: Section) => {
+      const sectionLink = new SectionLink();
+      sectionLink.loadData(this.graphicTemplate.datas);
+      sectionLink.id = GraphicIdGenerator.next();
+      const points: IPointData[] = [];
+      section.datas.points.forEach((p) => {
+        points.push(section.localToCanvasPoint(p));
+      });
+      sectionLink.datas.points = points;
+      this.storeGraphic(sectionLink);
+    });
+    turnoutList.forEach((turnout: Turnout) => {
+      const sectionLinkA = new SectionLink();
+      const sectionLinkB = new SectionLink();
+      const sectionLinkC = new SectionLink();
+      sectionLinkA.loadData(this.graphicTemplate.datas);
+      sectionLinkB.loadData(this.graphicTemplate.datas);
+      sectionLinkC.loadData(this.graphicTemplate.datas);
+      const forkP = new Point(turnout.position.x, turnout.position.y);
+      const pointA = [forkP];
+      const pointB = [forkP];
+      const pointC = [forkP];
+      turnout.datas.pointA.forEach((p) => {
+        pointA.push(turnout.localToCanvasPoint(p));
+      });
+      turnout.datas.pointB.forEach((p) => {
+        pointB.push(turnout.localToCanvasPoint(p));
+      });
+      turnout.datas.pointC.forEach((p) => {
+        pointC.push(turnout.localToCanvasPoint(p));
+      });
+      sectionLinkA.id = GraphicIdGenerator.next();
+      sectionLinkB.id = GraphicIdGenerator.next();
+      sectionLinkC.id = GraphicIdGenerator.next();
+      sectionLinkA.datas.points = pointA;
+      sectionLinkB.datas.points = pointB;
+      sectionLinkC.datas.points = pointC;
+      this.storeGraphic(sectionLinkA);
+      this.storeGraphic(sectionLinkB);
+      this.storeGraphic(sectionLinkC);
+    });
+  }
+  clearCache(): void {
+    this.points = [];
+    this.graphic.clear();
+  }
+}
+
+class SectionLinkGraphicHitArea implements IHitArea {
+  section: SectionLink;
+  constructor(section: SectionLink) {
+    this.section = section;
+  }
+  contains(x: number, y: number): boolean {
+    for (let i = 1; i < this.section.datas.points.length; i++) {
+      const p1 = this.section.datas.points[i - 1];
+      const p2 = this.section.datas.points[i];
+      if (linePoint(p1, p2, { x, y }, SectionLinkConsts.lineWidth)) {
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+export class SectionLinkEditPlugin extends GraphicInteractionPlugin<SectionLink> {
+  static Name = 'SectionLinkDrag';
+  drawAssistant: SectionLinkDraw;
+
+  constructor(app: GraphicApp, da: SectionLinkDraw) {
+    super(SectionLinkEditPlugin.Name, app);
+    this.drawAssistant = da;
+  }
+  static init(app: GraphicApp, da: SectionLinkDraw) {
+    return new SectionLinkEditPlugin(app, da);
+  }
+  filter(...grahpics: JlGraphic[]): SectionLink[] | undefined {
+    return grahpics.filter((g) => g.type == SectionLink.Type) as SectionLink[];
+  }
+  bind(g: SectionLink): void {
+    g.lineGraphic.eventMode = 'static';
+    g.lineGraphic.cursor = 'pointer';
+    g.lineGraphic.hitArea = new SectionLinkGraphicHitArea(g);
+    // g.transformSave = true;
+    // g.labelGraphic.eventMode = 'static';
+    // g.labelGraphic.cursor = 'pointer';
+    // g.labelGraphic.selectable = true;
+    // g.labelGraphic.draggable = true;
+    // g.on('selected', this.onSelected, this);
+    // g.on('unselected', this.onUnselected, this);
+    // g.on('_rightclick', this.onContextMenu, this);
+  }
+  unbind(g: SectionLink): void {
+    // g.off('selected', this.onSelected, this);
+    // g.off('unselected', this.onUnselected, this);
+    // g.off('_rightclick', this.onContextMenu, this);
+  }
+
+  // onContextMenu(e: FederatedMouseEvent) {
+  //   const target = e.target as DisplayObject;
+  //   const section = target.getGraphic() as SectionLink;
+  //   this.app.updateSelected(section);
+  // }
+
+  // onSelected(g: DisplayObject): void {
+  //   const sectionLink = g as SectionLink;
+  // }
+  // onUnselected(g: DisplayObject): void {
+  //   const sectionLink = g as SectionLink;
+  // }
+}

src/layouts/DrawLayout.vue

@@ -24,6 +24,16 @@
                 <q-item clickable v-close-popup @click="oneClickAxleCounting">
                   <q-item-section>一键生成计轴</q-item-section>
                 </q-item>
+                <q-item clickable v-close-popup @click="oneClickLink">
+                  <q-item-section>一键生成Link</q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="oneClickAxleCountingSection"
+                >
+                  <q-item-section>一键生成计轴区段</q-item-section>
+                </q-item>
               </q-list>
             </q-menu>
           </q-btn>
@@ -186,6 +196,10 @@ import { ApiError } from 'src/boot/axios';
 import { OneClickGenerate } from 'src/graphics/trainWindow/oneClickDrawAssistant';
 import { Separator } from 'src/graphics/separator/Separator';
 import { SeparatorDraw } from 'src/graphics/separator/SeparatorDrawAssistant';
+import { SectionLink } from 'src/graphics/sectionLink/SectionLink';
+import { SectionLinkDraw } from 'src/graphics/sectionLink/SectionLinkDrawAssistant';
+import { AxleCountingSection } from 'src/graphics/axleCountingSection/AxleCountingSection';
+import { AxleCountingSectionDraw } from 'src/graphics/axleCountingSection/AxleCountingSectionAssistant';
 
 const route = useRoute();
 const router = useRouter();
@@ -328,6 +342,20 @@ function oneClickAxleCounting() {
   drawStore.oneClickType = 'AxleCounting';
   drawStore.getDrawApp().interactionPlugin(OneClickGenerate.Type).resume();
 }
+function oneClickAxleCountingSection() {
+  //一键生成计轴区段
+  const axleCountingSectionDraw = drawStore
+    .getDrawApp()
+    .getDrawAssistant(AxleCountingSection.Type) as AxleCountingSectionDraw;
+  axleCountingSectionDraw.oneGenerates();
+}
+function oneClickLink() {
+  drawStore.oneClickType = 'SectionLink';
+  const draw = drawStore
+    .getDrawApp()
+    .getDrawAssistant(SectionLink.Type) as SectionLinkDraw;
+  draw.oneGenerates();
+}
 
 function backConfirm() {
   router.go(-1);