站台优化

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

@@ -1,19 +1,18 @@
 <template>
   <q-form>
-    <q-input outlined readonly v-model="stationModel.id" label="id" hint="" />
+    <q-input outlined readonly v-model="platformModel.id" label="id" hint="" />
     <q-input
       outlined
-      v-model.number="stationModel.lineWidth"
+      v-model.number="platformModel.lineWidth"
       type="number"
       @blur="onUpdate"
       label="线宽"
       lazy-rules
       :rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
     />
-
     <q-input
       outlined
-      v-model="stationModel.lineColor"
+      v-model="platformModel.lineColor"
       @blur="onUpdate"
       label="线色"
       lazy-rules
@@ -23,10 +22,10 @@
         <q-icon name="colorize" class="cursor-pointer">
           <q-popup-proxy cover transition-show="scale" transition-hide="scale">
             <q-color
-              v-model="stationModel.lineColor"
+              v-model="platformModel.lineColor"
               @change="
                 (val) => {
-                  stationModel.lineColor = val;
+                  platformModel.lineColor = val;
                   onUpdate();
                 }
               "
@@ -35,13 +34,20 @@
         </q-icon>
       </template>
     </q-input>
-
     <q-select
       outlined
-      v-model="stationModel.hasdoor"
-      :options="options"
+      @blur="onUpdate"
+      v-model="hasDoor"
+      :options="optionsDoor"
       label="是否有屏蔽门"
     />
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="trainDirection"
+      :options="optionsDirection"
+      label="行驶方向"
+    />
   </q-form>
 </template>
 
@@ -49,37 +55,44 @@
 import { PlatformData } from 'src/examples/app/graphics/PlatformInteraction';
 import { Platform } from 'src/graphics/platform/Platform';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 
 const drawStore = useDrawStore();
-const stationModel = reactive(new PlatformData());
-const options = [true, false];
+const platformModel = reactive(new PlatformData());
+const hasDoor = ref('是');
+const optionsDoor = ['是', '否'];
+const trainDirection = ref('向左');
+const optionsDirection = ['向左', '向右'];
+enum showSelect {
+  是 = 'true',
+  否 = 'false',
+  向左 = 'left',
+  向右 = 'right',
+}
 
 drawStore.$subscribe;
 watch(
   () => drawStore.selectedGraphic,
   (val) => {
     if (val && val.type == Platform.Type) {
-      // console.log('station变更');
-      stationModel.copyFrom(val.saveData() as PlatformData);
+      platformModel.copyFrom(val.saveData() as PlatformData);
     }
   }
 );
 
 onMounted(() => {
-  //console.log('station 属性表单 mounted');
-  const station = drawStore.selectedGraphic as Platform;
-
-  if (station) {
-    stationModel.copyFrom(station.saveData());
+  const platform = drawStore.selectedGraphic as Platform;
+  if (platform) {
+    platformModel.copyFrom(platform.saveData());
   }
 });
 
 function onUpdate() {
-  //console.log(stationModel, 'station 属性更新');
-  const station = drawStore.selectedGraphic as Platform;
-  if (station) {
-    drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);
+  platformModel.hasdoor = JSON.parse((showSelect as never)[hasDoor.value]);
+  platformModel.trainDirection = (showSelect as never)[trainDirection.value];
+  const platform = drawStore.selectedGraphic as Platform;
+  if (platform) {
+    drawStore.getDrawApp().updateGraphicAndRecord(platform, platformModel);
   }
 }
 </script>

src/examples/app/app_message/protos/draw_data_storage.proto

@@ -68,13 +68,14 @@ message Platform {
   CommonInfo common = 1;
   string code = 2;
   bool hasdoor = 3; // 是否有屏蔽门
-  int32 lineWidth = 4; // 线宽
-  string lineColor = 5; // 站台线色
-  string lineColorDoor = 6; // 屏蔽门线色
-  Point point = 7; // 位置坐标
-  float width = 8;//宽度
-  float height = 9; //高度
-  repeated string orbitCode = 10;//站台轨
+  string trainDirection = 4; // 行驶方向--屏蔽门上下
+  int32 lineWidth = 5; // 线宽
+  string lineColor = 6; // 站台线色
+  string lineColorDoor = 7; // 屏蔽门线色
+  Point point = 8; // 位置坐标
+  float width = 9;//宽度
+  float height = 10; //高度
+  repeated string orbitCode = 11;//站台轨
 }
 
 message IscsFan {

src/examples/app/graphics/PlatformInteraction.ts

@@ -33,6 +33,12 @@ export class PlatformData extends GraphicDataBase implements IPlatformData {
   set hasdoor(v: boolean) {
     this.data.hasdoor = v;
   }
+  get trainDirection(): string {
+    return this.data.trainDirection;
+  }
+  set trainDirection(v: string) {
+    this.data.trainDirection = v;
+  }
   get lineWidth(): number {
     return this.data.lineWidth;
   }

src/examples/app/protos/draw_data_storage.ts

@@ -964,6 +964,7 @@ export namespace graphicData {
             common?: CommonInfo;
             code?: string;
             hasdoor?: boolean;
+            trainDirection?: string;
             lineWidth?: number;
             lineColor?: string;
             lineColorDoor?: string;
@@ -973,7 +974,7 @@ export namespace graphicData {
             orbitCode?: string[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [10], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [11], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("common" in data && data.common != undefined) {
                     this.common = data.common;
@@ -984,6 +985,9 @@ export namespace graphicData {
                 if ("hasdoor" in data && data.hasdoor != undefined) {
                     this.hasdoor = data.hasdoor;
                 }
+                if ("trainDirection" in data && data.trainDirection != undefined) {
+                    this.trainDirection = data.trainDirection;
+                }
                 if ("lineWidth" in data && data.lineWidth != undefined) {
                     this.lineWidth = data.lineWidth;
                 }
@@ -1028,55 +1032,62 @@ export namespace graphicData {
         set hasdoor(value: boolean) {
             pb_1.Message.setField(this, 3, value);
         }
-        get lineWidth() {
-            return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
+        get trainDirection() {
+            return pb_1.Message.getFieldWithDefault(this, 4, "") as string;
         }
-        set lineWidth(value: number) {
+        set trainDirection(value: string) {
             pb_1.Message.setField(this, 4, value);
         }
-        get lineColor() {
-            return pb_1.Message.getFieldWithDefault(this, 5, "") as string;
+        get lineWidth() {
+            return pb_1.Message.getFieldWithDefault(this, 5, 0) as number;
         }
-        set lineColor(value: string) {
+        set lineWidth(value: number) {
             pb_1.Message.setField(this, 5, value);
         }
-        get lineColorDoor() {
+        get lineColor() {
             return pb_1.Message.getFieldWithDefault(this, 6, "") as string;
         }
-        set lineColorDoor(value: string) {
+        set lineColor(value: string) {
             pb_1.Message.setField(this, 6, value);
         }
+        get lineColorDoor() {
+            return pb_1.Message.getFieldWithDefault(this, 7, "") as string;
+        }
+        set lineColorDoor(value: string) {
+            pb_1.Message.setField(this, 7, value);
+        }
         get point() {
-            return pb_1.Message.getWrapperField(this, Point, 7) as Point;
+            return pb_1.Message.getWrapperField(this, Point, 8) as Point;
         }
         set point(value: Point) {
-            pb_1.Message.setWrapperField(this, 7, value);
+            pb_1.Message.setWrapperField(this, 8, value);
         }
         get has_point() {
-            return pb_1.Message.getField(this, 7) != null;
+            return pb_1.Message.getField(this, 8) != null;
         }
         get width() {
-            return pb_1.Message.getFieldWithDefault(this, 8, 0) as number;
-        }
-        set width(value: number) {
-            pb_1.Message.setField(this, 8, value);
-        }
-        get height() {
             return pb_1.Message.getFieldWithDefault(this, 9, 0) as number;
         }
-        set height(value: number) {
+        set width(value: number) {
             pb_1.Message.setField(this, 9, value);
         }
+        get height() {
+            return pb_1.Message.getFieldWithDefault(this, 10, 0) as number;
+        }
+        set height(value: number) {
+            pb_1.Message.setField(this, 10, value);
+        }
         get orbitCode() {
-            return pb_1.Message.getFieldWithDefault(this, 10, []) as string[];
+            return pb_1.Message.getFieldWithDefault(this, 11, []) as string[];
         }
         set orbitCode(value: string[]) {
-            pb_1.Message.setField(this, 10, value);
+            pb_1.Message.setField(this, 11, value);
         }
         static fromObject(data: {
             common?: ReturnType<typeof CommonInfo.prototype.toObject>;
             code?: string;
             hasdoor?: boolean;
+            trainDirection?: string;
             lineWidth?: number;
             lineColor?: string;
             lineColorDoor?: string;
@@ -1095,6 +1106,9 @@ export namespace graphicData {
             if (data.hasdoor != null) {
                 message.hasdoor = data.hasdoor;
             }
+            if (data.trainDirection != null) {
+                message.trainDirection = data.trainDirection;
+            }
             if (data.lineWidth != null) {
                 message.lineWidth = data.lineWidth;
             }
@@ -1123,6 +1137,7 @@ export namespace graphicData {
                 common?: ReturnType<typeof CommonInfo.prototype.toObject>;
                 code?: string;
                 hasdoor?: boolean;
+                trainDirection?: string;
                 lineWidth?: number;
                 lineColor?: string;
                 lineColorDoor?: string;
@@ -1140,6 +1155,9 @@ export namespace graphicData {
             if (this.hasdoor != null) {
                 data.hasdoor = this.hasdoor;
             }
+            if (this.trainDirection != null) {
+                data.trainDirection = this.trainDirection;
+            }
             if (this.lineWidth != null) {
                 data.lineWidth = this.lineWidth;
             }
@@ -1173,20 +1191,22 @@ export namespace graphicData {
                 writer.writeString(2, this.code);
             if (this.hasdoor != false)
                 writer.writeBool(3, this.hasdoor);
+            if (this.trainDirection.length)
+                writer.writeString(4, this.trainDirection);
             if (this.lineWidth != 0)
-                writer.writeInt32(4, this.lineWidth);
+                writer.writeInt32(5, this.lineWidth);
             if (this.lineColor.length)
-                writer.writeString(5, this.lineColor);
+                writer.writeString(6, this.lineColor);
             if (this.lineColorDoor.length)
-                writer.writeString(6, this.lineColorDoor);
+                writer.writeString(7, this.lineColorDoor);
             if (this.has_point)
-                writer.writeMessage(7, this.point, () => this.point.serialize(writer));
+                writer.writeMessage(8, this.point, () => this.point.serialize(writer));
             if (this.width != 0)
-                writer.writeFloat(8, this.width);
+                writer.writeFloat(9, this.width);
             if (this.height != 0)
-                writer.writeFloat(9, this.height);
+                writer.writeFloat(10, this.height);
             if (this.orbitCode.length)
-                writer.writeRepeatedString(10, this.orbitCode);
+                writer.writeRepeatedString(11, this.orbitCode);
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -1206,25 +1226,28 @@ export namespace graphicData {
                         message.hasdoor = reader.readBool();
                         break;
                     case 4:
-                        message.lineWidth = reader.readInt32();
+                        message.trainDirection = reader.readString();
                         break;
                     case 5:
-                        message.lineColor = reader.readString();
+                        message.lineWidth = reader.readInt32();
                         break;
                     case 6:
-                        message.lineColorDoor = reader.readString();
+                        message.lineColor = reader.readString();
                         break;
                     case 7:
-                        reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
+                        message.lineColorDoor = reader.readString();
                         break;
                     case 8:
-                        message.width = reader.readFloat();
+                        reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
                         break;
                     case 9:
-                        message.height = reader.readFloat();
+                        message.width = reader.readFloat();
                         break;
                     case 10:
-                        pb_1.Message.addToRepeatedField(message, 10, reader.readString());
+                        message.height = reader.readFloat();
+                        break;
+                    case 11:
+                        pb_1.Message.addToRepeatedField(message, 11, reader.readString());
                         break;
                     default: reader.skipField();
                 }
@@ -1331,4 +1354,44 @@ export namespace graphicData {
             return IscsFan.deserialize(bytes);
         }
     }
+    export class Turnout extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {}) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") { }
+        }
+        static fromObject(data: {}): Turnout {
+            const message = new Turnout({});
+            return message;
+        }
+        toObject() {
+            const data: {} = {};
+            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 (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Turnout {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Turnout();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): Turnout {
+            return Turnout.deserialize(bytes);
+        }
+    }
 }

src/graphics/platform/Platform.ts

@@ -12,6 +12,8 @@ export interface IPlatformData extends GraphicData {
   set code(v: string);
   get hasdoor(): boolean; // 是否有屏蔽门
   set hasdoor(v: boolean);
+  get trainDirection(): string; // 行驶方向--屏蔽门上下
+  set trainDirection(v: string);
   get lineWidth(): number; // 线宽
   set lineWidth(v: number);
   get lineColor(): string; // 站台线色
@@ -59,15 +61,18 @@ export class Platform extends JlGraphic {
 
   platformGraphic: Graphics;
   doorGraphic: Graphics;
+  doorCloseGraphic: Graphics;
   besideGraphic: Graphics;
   codeGraph: VectorText = new VectorText(''); //站台旁数字、字符
   constructor() {
     super(Platform.Type);
     this.platformGraphic = new Graphics();
     this.doorGraphic = new Graphics();
+    this.doorCloseGraphic = new Graphics();
     this.besideGraphic = new Graphics();
     this.addChild(this.platformGraphic);
     this.addChild(this.doorGraphic);
+    this.addChild(this.doorCloseGraphic);
     this.addChild(this.besideGraphic);
     this.addChild(this.codeGraph);
     this.codeGraph.setVectorFontSize(platformConsts.besideFontSize);
@@ -81,41 +86,34 @@ export class Platform extends JlGraphic {
     const height = this.datas.height;
     //屏蔽门
     const doorGraphic = this.doorGraphic;
+    const doorCloseGraphic = this.doorCloseGraphic;
     doorGraphic.clear();
+    doorCloseGraphic.clear();
     if (this.datas.hasdoor) {
       doorGraphic.lineStyle(
         this.datas.lineWidth,
         new Color(this.datas.lineColorDoor)
       );
-      doorGraphic.moveTo(
-        -width / 2 - this.datas.lineWidth / 2,
-        -height / 2 - 10
+      doorGraphic.moveTo(-width / 2 - this.datas.lineWidth / 2, 0);
+      doorGraphic.lineTo(-platformConsts.doorOpenSpacing, 0);
+      doorGraphic.moveTo(platformConsts.doorOpenSpacing, 0);
+      doorGraphic.lineTo(width / 2 + this.datas.lineWidth / 2, 0);
+      //屏蔽门闭合
+      doorCloseGraphic.lineStyle(
+        this.datas.lineWidth,
+        new Color(this.datas.lineColorDoor)
+      );
+      doorCloseGraphic.moveTo(-platformConsts.doorOpenSpacing, 0);
+      doorCloseGraphic.lineTo(platformConsts.doorOpenSpacing, 0);
+      doorGraphic.position.set(
+        0,
+        -height / 2 - platformConsts.doorPlatformSpacing
+      );
+      doorCloseGraphic.position.set(
+        0,
+        -height / 2 - platformConsts.doorPlatformSpacing
       );
-      //屏蔽门打开
-      if (this.datas.hasdoor) {
-        doorGraphic.lineTo(
-          -platformConsts.doorOpenSpacing,
-          -height / 2 - platformConsts.doorPlatformSpacing
-        );
-        doorGraphic.moveTo(
-          platformConsts.doorOpenSpacing,
-          -height / 2 - platformConsts.doorPlatformSpacing
-        );
-        doorGraphic.lineTo(
-          width / 2 + this.datas.lineWidth / 2,
-          -height / 2 - platformConsts.doorPlatformSpacing
-        );
-      } else {
-        doorGraphic.lineTo(
-          width / 2 + this.datas.lineWidth / 2,
-          -height / 2 - platformConsts.doorPlatformSpacing
-        );
-      }
     }
-    /*   doorGraphic.position.set(
-      0,
-      height + platformConsts.doorPlatformSpacing * 2
-    ); */
     //站台
     const platformGraphic = this.platformGraphic;
     platformGraphic.clear();
@@ -126,33 +124,26 @@ export class Platform extends JlGraphic {
     platformGraphic.beginFill(this.datas.lineColor, 1);
     platformGraphic.drawRect(0, 0, this.datas.width, this.datas.height);
     platformGraphic.endFill;
-    const rect = new Rectangle(0, 0, this.datas.width, this.datas.height);
-    platformGraphic.pivot = getRectangleCenter(rect);
+    const rectP = new Rectangle(0, 0, this.datas.width, this.datas.height);
+    platformGraphic.pivot = getRectangleCenter(rectP);
     this.position.set(this.datas.point.x, this.datas.point.y);
     //站台旁菱形图标
     const besideGraphic = this.besideGraphic;
     besideGraphic.clear();
-    if (this.datas.hasdoor) {
-      besideGraphic.lineStyle(1, new Color(PlatformColorEnum.lozengeRed));
-      besideGraphic.drawRect(
-        0,
-        0,
-        this.datas.height / 4,
-        this.datas.height / 4
-      );
-      const rect = new Rectangle(
-        0,
-        0,
-        this.datas.height / 4,
-        this.datas.height / 4
-      );
-      besideGraphic.pivot = getRectangleCenter(rect);
-      besideGraphic.rotation = Math.PI / 4;
-      besideGraphic.position.set(
-        -width / 2 - this.datas.lineWidth / 2 - platformConsts.besideSpacing,
-        0
-      );
-    }
+    besideGraphic.lineStyle(1, new Color(PlatformColorEnum.lozengeRed));
+    besideGraphic.drawRect(0, 0, this.datas.height / 4, this.datas.height / 4);
+    const rect = new Rectangle(
+      0,
+      0,
+      this.datas.height / 4,
+      this.datas.height / 4
+    );
+    besideGraphic.pivot = getRectangleCenter(rect);
+    besideGraphic.rotation = Math.PI / 4;
+    besideGraphic.position.set(
+      -width / 2 - this.datas.lineWidth / 2 - platformConsts.besideSpacing,
+      0
+    );
     //站台旁的数字、字符
     const codeGraph = this.codeGraph;
     codeGraph.text = 'H';
@@ -162,11 +153,35 @@ export class Platform extends JlGraphic {
       0
     );
     codeGraph.style.fill = PlatformColorEnum.HCharYellow;
+    //站台方向
+    if (this.datas.trainDirection == 'right') {
+      doorGraphic.position.set(
+        0,
+        height / 2 + platformConsts.doorPlatformSpacing
+      );
+      doorCloseGraphic.position.set(
+        0,
+        height / 2 + platformConsts.doorPlatformSpacing
+      );
+      besideGraphic.position.set(
+        width / 2 + this.datas.lineWidth / 2 + platformConsts.besideSpacing,
+        0
+      );
+      codeGraph.position.set(
+        width / 2 + this.datas.lineWidth / 2 + platformConsts.besideSpacing,
+        0
+      );
+    }
+    //子元素显隐
+    doorCloseGraphic.visible = false;
+    /* besideGraphic.visible = false;
+    codeGraph.visible = false; */
   }
 }
 
 export class PlatformTemplate extends JlGraphicTemplate<Platform> {
   hasdoor: boolean;
+  trainDirection: string;
   lineWidth: number;
   lineColor: string;
   lineColorDoor: string;
@@ -174,10 +189,11 @@ export class PlatformTemplate extends JlGraphicTemplate<Platform> {
   height: number;
   constructor() {
     super(Platform.Type);
+    this.hasdoor = true;
+    this.trainDirection = 'left';
     this.lineWidth = platformConsts.lineWidth;
     this.lineColor = PlatformColorEnum.yellow;
     this.lineColorDoor = PlatformColorEnum.doorBlue;
-    this.hasdoor = true;
     this.width = platformConsts.width;
     this.height = platformConsts.height;
   }

src/graphics/platform/PlatformDrawAssistant.ts

@@ -103,6 +103,7 @@ export class PlatformDraw extends GraphicDrawAssistant<
   prepareData(data: IPlatformData): boolean {
     const template = this.graphicTemplate;
     data.hasdoor = template.hasdoor;
+    data.trainDirection=template.trainDirection;
     data.point = this.point;
     data.lineWidth = template.lineWidth;
     data.lineColor = template.lineColor;