站台优化

This commit is contained in:
joylink_zhaoerwei 2023-05-31 15:47:24 +08:00
parent 618752e037
commit bc443be9a7
6 changed files with 216 additions and 116 deletions

View File

@ -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>

View File

@ -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 {

View File

@ -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;
}

View File

@ -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);
}
}
}

View File

@ -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)
);
//屏蔽门打开
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(
doorCloseGraphic.moveTo(-platformConsts.doorOpenSpacing, 0);
doorCloseGraphic.lineTo(platformConsts.doorOpenSpacing, 0);
doorGraphic.position.set(
0,
height + platformConsts.doorPlatformSpacing * 2
); */
-height / 2 - platformConsts.doorPlatformSpacing
);
doorCloseGraphic.position.set(
0,
-height / 2 - platformConsts.doorPlatformSpacing
);
}
//站台
const platformGraphic = this.platformGraphic;
platformGraphic.clear();
@ -126,20 +124,14 @@ 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
);
besideGraphic.drawRect(0, 0, this.datas.height / 4, this.datas.height / 4);
const rect = new Rectangle(
0,
0,
@ -152,7 +144,6 @@ export class Platform extends JlGraphic {
-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;
}

View File

@ -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;