计轴

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

@@ -25,14 +25,33 @@
       lazy-rules
       autogrow
     />
+    <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.id"
+              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 { AxleCountingData } from 'src/drawApp/graphics/AxleCountingInteraction';
 import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
+import { Section } from 'src/graphics/section/Section';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch } from 'vue';
+import { computed, onMounted, reactive, watch } from 'vue';
 
 const drawStore = useDrawStore();
 const axleCountingModel = reactive(new AxleCountingData());
@@ -62,4 +81,19 @@ function onUpdate() {
       .updateGraphicAndRecord(axleCounting, axleCountingModel);
   }
 }
+
+const sectionRelations = computed(() => {
+  const axleCounting = drawStore.selectedGraphic as AxleCounting;
+  const sectionRelations =
+    axleCounting?.relationManage.getRelationsOfGraphicAndOtherType(
+      axleCounting,
+      Section.Type
+    );
+  return sectionRelations.map(
+    (relation) =>
+      `${relation.getOtherGraphic<Section>(axleCounting).datas.code}(${
+        relation.getOtherRelationParam(axleCounting).param
+      })`
+  );
+});
 </script>

src/drawApp/graphics/AxleCountingInteraction.ts

@@ -37,11 +37,11 @@ export class AxleCountingData
   set kilometerCode(v: string) {
     this.data.kilometerCode = v;
   }
-  get sectionId(): string[] {
+  get axleCountingRef(): graphicData.RelatedRef[] {
-    return this.data.sectionId;
+    return this.data.axleCountingRef;
   }
-  set sectionId(sectionIds: string[]) {
+  set axleCountingRef(points: graphicData.RelatedRef[]) {
-    this.data.sectionId = sectionIds;
+    this.data.axleCountingRef=points
   }
   clone(): AxleCountingData {
     return new AxleCountingData(this.data.cloneMessage());

src/drawApp/index.ts

@@ -57,6 +57,12 @@ import {
 } from 'src/graphics/trainWindow/TrainWindow';
 import { TrainWindowDraw } from 'src/graphics/trainWindow/TrainWindowDrawAssistant';
 import { TrainWindowData } from './graphics/TrainWindowInteraction';
+import {
+  AxleCounting,
+  AxleCountingTemplate,
+} from 'src/graphics/axleCounting/AxleCounting';
+import { AxleCountingDraw } from 'src/graphics/axleCounting/AxleCountingDrawAssistant';
+import { AxleCountingData } from './graphics/AxleCountingInteraction';
 import { Turnout, TurnoutTemplate } from 'src/graphics/turnout/Turnout';
 import { TurnoutDraw } from 'src/graphics/turnout/TurnoutDrawAssistant';
 import { TurnoutData } from './graphics/TurnoutInteraction';
@@ -158,6 +164,7 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
     | TrainWindowDraw
     | TrainDraw
     | OneClickGenerateDraw
+    | AxleCountingDraw
   )[] = [];
   if (draftType === 'Line') {
     drawAssistants = [
@@ -178,6 +185,10 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
       new TurnoutDraw(app, new TurnoutTemplate(new TurnoutData())),
       new TrainWindowDraw(app, new TrainWindowTemplate(new TrainWindowData())),
       new OneClickGenerateDraw(app, new OneClickGenerateTemplate()),
+      new AxleCountingDraw(
+        app,
+        new AxleCountingTemplate(new AxleCountingData())
+      ),
     ];
     DrawSignalInteraction.init(app);
   } else {
@@ -291,6 +302,9 @@ export function saveDrawDatas(app: JlDrawApp) {
     } else if (TrainWindow.Type === g.type) {
       const trainWindowData = (g as TrainWindow).saveData();
       storage.trainWindows.push((trainWindowData as TrainWindowData).data);
+    } else if (AxleCounting.Type === g.type) {
+      const axleCountingData = (g as AxleCounting).saveData();
+      storage.axleCountings.push((axleCountingData as AxleCountingData).data);
     }
   });
   const base64 = fromUint8Array(storage.serialize());
@@ -358,6 +372,9 @@ export async function loadDrawDatas(app: GraphicApp) {
     storage.trainWindows.forEach((trainWindow) => {
       datas.push(new TrainWindowData(trainWindow));
     });
+    storage.axleCountings.forEach((axleCounting) => {
+      datas.push(new AxleCountingData(axleCounting));
+    });
     app.loadGraphic(datas);
   } else {
     app.loadGraphic([]);

src/graphics/CommonGraphics.ts

@@ -4,6 +4,7 @@ import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { Turnout, TurnoutPort } from './turnout/Turnout';
 import { Section, SectionPort } from './section/Section';
 import { TrainWindow } from './trainWindow/TrainWindow';
+import { AxleCounting } from './axleCounting/AxleCounting';
 /**
  *
  * @param polygon
@@ -83,6 +84,7 @@ export function createRelatedRefProto(
     [Section.Type, graphicData.RelatedRef.DeviceType.Section],
     [Turnout.Type, graphicData.RelatedRef.DeviceType.Turnout],
     [TrainWindow.Type, graphicData.RelatedRef.DeviceType.TrainWindow],
+    [AxleCounting.Type, graphicData.RelatedRef.DeviceType.AxleCounting],
   ]);
   const protoDeviceType = typeMap.get(type);
   if (protoDeviceType === undefined) throw Error(`输入的type有误: ${type}`);

src/graphics/axleCounting/AxleCounting.ts

@@ -1,24 +1,32 @@
 import { Color, Container, Graphics } from 'pixi.js';
 import {
   GraphicData,
+  GraphicRelationParam,
   JlGraphic,
   JlGraphicTemplate,
   VectorText,
 } from 'src/jl-graphic';
+import { Section, SectionPort } from '../section/Section';
+import {
+  IRelatedRefData,
+  createRelatedRefProto,
+  protoPort2Data,
+} from '../CommonGraphics';
+import { Turnout } from '../turnout/Turnout';
 
 export interface IAxleCountingData extends GraphicData {
   get code(): string; // 编号
   set code(v: string);
   get kilometerCode(): string; // 公里标
   set kilometerCode(v: string);
-  get sectionId(): string[]; // 计轴两端的区段
+  get axleCountingRef(): IRelatedRefData[]; //关联的设备
-  set sectionId(points: string[]);
+  set axleCountingRef(ref: IRelatedRefData[]);
   clone(): IAxleCountingData;
   copyFrom(data: IAxleCountingData): void;
   eq(other: IAxleCountingData): boolean;
 }
 
-const AxleCountingConsts = {
+export const AxleCountingConsts = {
   radius: 6,
   borderWidth: 1,
   circleColorBlue: '0x08F80D',
@@ -28,6 +36,7 @@ const AxleCountingConsts = {
   kilometerCodeColor: '0xFFFFFF',
   kilometerCodeFontSize: 14,
   kilometerCodeOffsetY: 95,
+  offsetSection: 50,
 };
 class TwoCircleGraphic extends Container {
   circleA: Graphics = new Graphics();
@@ -68,11 +77,13 @@ export class AxleCounting extends JlGraphic {
   static Type = 'AxleCounting';
   twoCircle: TwoCircleGraphic = new TwoCircleGraphic();
   kilometerGraph: VectorText = new VectorText(''); //公里标
-  constructor() {
+  direction: number;
+  constructor(direction: number) {
     super(AxleCounting.Type);
     this.addChild(this.twoCircle);
     this.addChild(this.kilometerGraph);
     this.kilometerGraph.name = 'kilometer';
+    this.direction = direction;
   }
 
   get datas(): IAxleCountingData {
@@ -80,29 +91,59 @@ export class AxleCounting extends JlGraphic {
   }
   doRepaint(): void {
     this.twoCircle.draw();
-    const kilometerGraph = this.kilometerGraph;
-    const kilometerCode = this.datas?.kilometerCode || 12345.6789;
-    if (Math.floor(Number(kilometerCode)).toString().length > 3) {
-      const kiloBit = Math.floor(Number(kilometerCode) / 1000).toString();
-      kilometerGraph.text =
-        'K' +
-        kiloBit +
-        '+' +
-        kilometerCode.toString().substring(kiloBit.length);
-    } else {
-      kilometerGraph.text = kilometerCode;
   }
-    kilometerGraph.style.fill = AxleCountingConsts.kilometerCodeColor;
+  buildRelation() {
-    kilometerGraph.setVectorFontSize(AxleCountingConsts.kilometerCodeFontSize);
+    this.queryStore.queryByType<Section>(Section.Type).forEach((section) => {
-    kilometerGraph.anchor.set(0.5);
+      const ps = section.localToCanvasPoint(section.getStartPoint());
-    kilometerGraph.position.set(0, AxleCountingConsts.kilometerCodeOffsetY);
+      const pe = section.localToCanvasPoint(section.getEndPoint());
-    kilometerGraph.rotation = -Math.PI / 2;
+      let param = '';
-    if (this.datas.childTransforms?.length) {
+      if (
-      this.datas.childTransforms.forEach((child) => {
+        ps.x == this.x &&
-        if (child.name == 'kilometer') {
+        ps.y == this.y + AxleCountingConsts.offsetSection * this.direction
-          const pos = child.transform.position;
+      ) {
-          kilometerGraph.position.set(pos.x, pos.y);
+        param = SectionPort.A;
       }
+      if (
+        pe.x == this.x &&
+        pe.y == this.y + AxleCountingConsts.offsetSection * this.direction
+      ) {
+        param = SectionPort.B;
+      }
+
+      if (param !== '') {
+        this.relationManage.addRelation(
+          this,
+          new GraphicRelationParam(section, param)
+        );
+      }
+    });
+  }
+  saveRelations() {
+    const sectionRelations =
+      this.relationManage.getRelationsOfGraphicAndOtherType(this, Section.Type);
+    const datas: IRelatedRefData[] = [];
+    sectionRelations.forEach((ref) => {
+      const paDevice = ref.getOtherGraphic<Section | Turnout>(this);
+      const data = createRelatedRefProto(
+        paDevice.type,
+        paDevice.id,
+        ref.getOtherRelationParam(this).param
+      );
+
+      datas.push(data);
+    });
+    this.datas.axleCountingRef = datas;
+  }
+  loadRelations(): void {
+    if (this.datas.axleCountingRef.length) {
+      this.datas.axleCountingRef.forEach((device) => {
+        this.relationManage.addRelation(
+          this,
+          new GraphicRelationParam(
+            this.queryStore.queryById(device.id),
+            protoPort2Data(device.devicePort)
+          )
+        );
       });
     }
   }
@@ -115,7 +156,7 @@ export class AxleCountingTemplate extends JlGraphicTemplate<AxleCounting> {
     });
   }
   new(): AxleCounting {
-    const axleCounting = new AxleCounting();
+    const axleCounting = new AxleCounting(1);
     axleCounting.loadData(this.datas);
     return axleCounting;
   }

src/graphics/axleCounting/AxleCountingDrawAssistant.ts

@@ -1,8 +1,9 @@
-import { FederatedPointerEvent, Point } from 'pixi.js';
+import { FederatedPointerEvent, IPointData, Point } from 'pixi.js';
 import {
   AbsorbableLine,
   AbsorbablePosition,
   GraphicDrawAssistant,
+  GraphicIdGenerator,
   GraphicInteractionPlugin,
   JlDrawApp,
   JlGraphic,
@@ -12,7 +13,10 @@ import {
   IAxleCountingData,
   AxleCounting,
   AxleCountingTemplate,
+  AxleCountingConsts,
 } from './AxleCounting';
+import { Section } from '../section/Section';
+import { Turnout } from '../turnout/Turnout';
 
 export interface IAxleCountingDrawOptions {
   newData: () => IAxleCountingData;
@@ -24,7 +28,7 @@ export class AxleCountingDraw extends GraphicDrawAssistant<
 > {
   codeGraph: AxleCounting;
   constructor(app: JlDrawApp, template: AxleCountingTemplate) {
-    super(app, template, 'sym_o_circle', '计轴AxleCounting');
+    super(app, template, 'sym_o_circle', '不展示');
     this.codeGraph = this.graphicTemplate.new();
     this.container.addChild(this.codeGraph);
     AxleCountingInteraction.init(app);
@@ -51,6 +55,42 @@ export class AxleCountingDraw extends GraphicDrawAssistant<
     data.transform = this.container.saveTransform();
     return true;
   }
+  oneGenerates(height: Point) {
+    const sections = this.app.queryStore.queryByType<Section>(Section.Type);
+    const turnouts = this.app.queryStore.queryByType<Turnout>(Turnout.Type);
+    const axleCounting = this.app.queryStore.queryByType<AxleCounting>(
+      AxleCounting.Type
+    );
+    this.app.deleteGraphics(...axleCounting);
+    sections.forEach((section) => {
+      const ps = section.localToCanvasPoint(section.getStartPoint());
+      let direction = 1;
+      if (ps.y > height.y) {
+        direction = -1;
+      }
+      const axleCounting = new AxleCounting(direction);
+      axleCounting.loadData(this.graphicTemplate.datas);
+      axleCounting.position.set(
+        ps.x,
+        ps.y - AxleCountingConsts.offsetSection * direction
+      );
+      axleCounting.id = GraphicIdGenerator.next();
+      this.storeGraphic(axleCounting);
+    });
+    turnouts.forEach((turnout) => {
+      const points = turnout.datas.pointA;
+      const transPos = turnout.datas.transform.position;
+      const ps: IPointData[] = [];
+      points.forEach((point: IPointData) => {
+        ps.push(new Point(point.x + transPos.x, point.y + transPos.y));
+      });
+      const axleCounting = new AxleCounting(1);
+      axleCounting.loadData(this.graphicTemplate.datas);
+      axleCounting.position.set(ps[0].x, ps[0].y);
+      axleCounting.id = GraphicIdGenerator.next();
+      this.storeGraphic(axleCounting);
+    });
+  }
 }
 
 function buildAbsorbablePositions(

src/graphics/trainWindow/oneClickDrawAssistant.ts

@@ -8,6 +8,8 @@ import {
 } from 'src/jl-graphic';
 import { TrainWindow } from './TrainWindow';
 import { TrainWindowDraw } from './TrainWindowDrawAssistant';
+import { AxleCounting } from '../axleCounting/AxleCounting';
+import { AxleCountingDraw } from '../axleCounting/AxleCountingDrawAssistant';
 
 interface IOneClickData extends GraphicData {
   get code(): string; // 编号
@@ -54,11 +56,14 @@ OneClickGenerateTemplate,
     this.lineGraph.doRepaint();
   }
   onLeftDown(e: FederatedPointerEvent): void {
-    this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
     const trainWindowDraw = this.app.getDrawAssistant(
       TrainWindow.Type
     ) as TrainWindowDraw;
     trainWindowDraw.oneGenerates(this.toCanvasCoordinates(e.global));
+    const axleCountingDraw = this.app.getDrawAssistant(
+      AxleCounting.Type
+    ) as AxleCountingDraw;
+    axleCountingDraw.oneGenerates(this.toCanvasCoordinates(e.global));
     this.finish();
   }
 

src/protos/stationLayoutGraphics.ts

@@ -2192,7 +2192,7 @@ export namespace graphicData {
             common?: CommonInfo;
             code?: string;
             kilometerCode?: string;
-            sectionId?: string[];
+            axleCountingRef?: RelatedRef[];
         }) {
             super();
             pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [4], this.#one_of_decls);
@@ -2206,8 +2206,8 @@ export namespace graphicData {
                 if ("kilometerCode" in data && data.kilometerCode != undefined) {
                     this.kilometerCode = data.kilometerCode;
                 }
-                if ("sectionId" in data && data.sectionId != undefined) {
+                if ("axleCountingRef" in data && data.axleCountingRef != undefined) {
-                    this.sectionId = data.sectionId;
+                    this.axleCountingRef = data.axleCountingRef;
                 }
             }
         }
@@ -2232,17 +2232,17 @@ export namespace graphicData {
         set kilometerCode(value: string) {
             pb_1.Message.setField(this, 3, value);
         }
-        get sectionId() {
+        get axleCountingRef() {
-            return pb_1.Message.getFieldWithDefault(this, 4, []) as string[];
+            return pb_1.Message.getRepeatedWrapperField(this, RelatedRef, 4) as RelatedRef[];
         }
-        set sectionId(value: string[]) {
+        set axleCountingRef(value: RelatedRef[]) {
-            pb_1.Message.setField(this, 4, value);
+            pb_1.Message.setRepeatedWrapperField(this, 4, value);
         }
         static fromObject(data: {
             common?: ReturnType<typeof CommonInfo.prototype.toObject>;
             code?: string;
             kilometerCode?: string;
-            sectionId?: string[];
+            axleCountingRef?: ReturnType<typeof RelatedRef.prototype.toObject>[];
         }): AxleCounting {
             const message = new AxleCounting({});
             if (data.common != null) {
@@ -2254,8 +2254,8 @@ export namespace graphicData {
             if (data.kilometerCode != null) {
                 message.kilometerCode = data.kilometerCode;
             }
-            if (data.sectionId != null) {
+            if (data.axleCountingRef != null) {
-                message.sectionId = data.sectionId;
+                message.axleCountingRef = data.axleCountingRef.map(item => RelatedRef.fromObject(item));
             }
             return message;
         }
@@ -2264,7 +2264,7 @@ export namespace graphicData {
                 common?: ReturnType<typeof CommonInfo.prototype.toObject>;
                 code?: string;
                 kilometerCode?: string;
-                sectionId?: string[];
+                axleCountingRef?: ReturnType<typeof RelatedRef.prototype.toObject>[];
             } = {};
             if (this.common != null) {
                 data.common = this.common.toObject();
@@ -2275,8 +2275,8 @@ export namespace graphicData {
             if (this.kilometerCode != null) {
                 data.kilometerCode = this.kilometerCode;
             }
-            if (this.sectionId != null) {
+            if (this.axleCountingRef != null) {
-                data.sectionId = this.sectionId;
+                data.axleCountingRef = this.axleCountingRef.map((item: RelatedRef) => item.toObject());
             }
             return data;
         }
@@ -2290,8 +2290,8 @@ export namespace graphicData {
                 writer.writeString(2, this.code);
             if (this.kilometerCode.length)
                 writer.writeString(3, this.kilometerCode);
-            if (this.sectionId.length)
+            if (this.axleCountingRef.length)
-                writer.writeRepeatedString(4, this.sectionId);
+                writer.writeRepeatedMessage(4, this.axleCountingRef, (item: RelatedRef) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -2311,7 +2311,7 @@ export namespace graphicData {
                         message.kilometerCode = reader.readString();
                         break;
                     case 4:
-                        pb_1.Message.addToRepeatedField(message, 4, reader.readString());
+                        reader.readMessage(message.axleCountingRef, () => pb_1.Message.addToRepeatedWrapperField(message, 4, RelatedRef.deserialize(reader), RelatedRef));
                         break;
                     default: reader.skipField();
                 }
@@ -3784,7 +3784,8 @@ export namespace graphicData {
         export enum DeviceType {
             Section = 0,
             Turnout = 1,
-            TrainWindow = 2
+            TrainWindow = 2,
+            AxleCounting = 3
         }
         export enum DevicePort {
             A = 0,