站台30个屏蔽门

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

@@ -1,5 +1,5 @@
 <template>
-  <q-form>
+  <q-form class="q-gutter-sm">
     <q-input outlined readonly v-model="platformModel.id" label="id" hint="" />
     <q-input
       outlined

src/graphics/platform/Platform.ts

@@ -85,9 +85,10 @@ const platformConsts = {
   lineWidth: 3,
   besideFontSize: 12,
   doorOpenSpacing: 15,
-  doorPlatformSpacing: 10,
+  doorPlatformSpacing: 17,
   besideSpacing: 10,
   circleRadius: 9,
+  smallDoorWidth: 10,
 };
 
 //子元素--矩形
@@ -126,45 +127,58 @@ export class rectGraphic extends Container {
   }
 }
 //子元素--门
-export class doorGraphic extends Container {
-  static Type = 'Door';
-  doorGraphic: Graphics;
-  doorCloseGraphic: Graphics;
+class smallDoorGraphic extends Container {
+  smallDoorGraphic: Graphics;
+  labelGraphic: VectorText;
   constructor() {
     super();
-    this.doorGraphic = new Graphics();
-    this.doorCloseGraphic = new Graphics();
-    this.addChild(this.doorGraphic);
-    this.addChild(this.doorCloseGraphic);
+    this.smallDoorGraphic = new Graphics();
+    this.labelGraphic = new VectorText();
+    this.labelGraphic.setVectorFontSize(12);
+    this.labelGraphic.anchor.set(0.5);
+    this.addChild(this.smallDoorGraphic);
+    this.addChild(this.labelGraphic);
   }
-  draw(stateData: IPlatformState): void {
-    const doorGraphic = this.doorGraphic;
-    const doorCloseGraphic = this.doorCloseGraphic;
-    doorGraphic.clear();
-    doorCloseGraphic.clear();
+  draw(direction: string, stateData: IPlatformState, i): void {
+    const start =
+      -platformConsts.smallDoorWidth * 15 + platformConsts.smallDoorWidth * i;
+    const smallDoorGraphic = this.smallDoorGraphic;
     const lineColor = PlatformColorEnum.doorGreen;
     // if (stateData.psdCut) {
     //   lineColor = PlatformColorEnum.doorRed;
     // }
-    doorGraphic.lineStyle(platformConsts.lineWidth, new Color(lineColor));
-    doorGraphic.moveTo(
-      -platformConsts.width / 2 - platformConsts.lineWidth / 2,
-      0
-    );
-    doorGraphic.lineTo(-platformConsts.doorOpenSpacing, 0);
-    doorGraphic.moveTo(platformConsts.doorOpenSpacing, 0);
-    doorGraphic.lineTo(
-      platformConsts.width / 2 + platformConsts.lineWidth / 2,
-      0
-    );
-    //屏蔽门闭合
-    doorCloseGraphic.lineStyle(platformConsts.lineWidth, new Color(lineColor));
-    doorCloseGraphic.moveTo(-platformConsts.doorOpenSpacing, 0);
-    doorCloseGraphic.lineTo(platformConsts.doorOpenSpacing, 0);
+    smallDoorGraphic.lineStyle(platformConsts.lineWidth, new Color(lineColor));
+    smallDoorGraphic.moveTo(start, 0);
+    smallDoorGraphic.lineTo(start + platformConsts.smallDoorWidth - 3, 0);
+    if (direction == 'down') {
+      this.labelGraphic.text = 30 - i;
+    } else {
+      this.labelGraphic.text = i + 1;
+    }
+    this.labelGraphic.style.fill = 'red';
+    if (i % 2 == 0) {
+      this.labelGraphic.position.set(start + 4, 7);
+    } else {
+      this.labelGraphic.position.set(start + 4, -7);
+    }
+  }
+}
+export class doorGraphic extends Container {
+  constructor() {
+    super();
+  }
+  draw(direction: string, stateData: IPlatformState): void {
+    for (let i = 0; i < 30; i++) {
+      const smallDoor = new smallDoorGraphic();
+      smallDoor.draw(direction, stateData, i);
+      this.addChild(smallDoor);
+    }
   }
   clear(): void {
-    this.doorGraphic.clear();
-    this.doorCloseGraphic.clear();
+    this.children.forEach((smallDoorGraphic) => {
+      smallDoorGraphic.children[0].clear();
+      smallDoorGraphic.children[1].text = '';
+    });
   }
   // changeState(stateData: IPlatformState): void {
   //   // if (stateData.psdOpen) {
@@ -409,7 +423,7 @@ export class Platform extends JlGraphic {
   doRepaint(): void {
     this.doorGraphic.clear();
     if (this.datas.hasdoor) {
-      this.doorGraphic.draw(this.states);
+      this.doorGraphic.draw(this.datas.direction, this.states);
     }
     this.platformGraphic.draw(this.states);
     this.emergClose.draw();