joylink/rt-graphic-component
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

测试

Browse Source
This commit is contained in:
joylink_zhaoerwei 2024-01-12 15:27:53 +08:00
parent 8f979a4a9c
commit ed9be45c6a
12 changed files with 143 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/packages/Platform/THPlatform.js
View File

@ -19,6 +19,7 @@ class THPlatform extends JlPlatform {
return this.getStates();
}
doRepaint() {
//站台状态
this.rectGraphic.stateFillColor = THConsts.noTrainStop;
if (this.states.trainberth) {
this.rectGraphic.stateFillColor = THConsts.trainStop;
@ -26,35 +27,35 @@ class THPlatform extends JlPlatform {
if (this.states.upSkipstop || this.states.downSkipstop) {
this.rectGraphic.stateFillColor = THConsts.trainJump;
}
//门的状态
const station = this.getGraphicApp().queryStore.queryByCodeAndType(this.states.rtuId > 9
? '' + this.states.rtuId
: '0' + this.states.rtuId, THStation.Type);
const doorGraphic = this.doorGraphic;
doorGraphic.stateFillColor = THConsts.doorGraphic.doorGreen;
this.doorGraphic.stateFillColor = THConsts.doorGraphic.doorGreen;
if (!!station?.states.ipRtuStusDown) {
doorGraphic.stateFillColor = THConsts.doorGraphic.doorBlue;
this.doorGraphic.stateFillColor = THConsts.doorGraphic.doorBlue;
}
else if (this.states.psdCut) {
doorGraphic.stateFillColor = THConsts.doorGraphic.doorRed;
this.doorGraphic.stateFillColor = THConsts.doorGraphic.doorRed;
}
super.draw();
this.doorGraphic.draw();
this.codeGraphic.draw();
this.lozengeGraphic.draw();
if (this.datas.direction == 'down') {
this.doorGraphic.changePosition();
this.codeGraphic.changePosition();
this.lozengeGraphic.changePosition();
}
//门的状态
//门的显示与隐藏
if (this.datas.hasdoor) {
if (this.states.psdOpen) {
doorGraphic.doorCloseGraphic.visible = false;
this.doorGraphic.doorCloseGraphic.visible = false;
}
else {
doorGraphic.doorCloseGraphic.visible = true;
this.doorGraphic.doorCloseGraphic.visible = true;
}
}
//紧急停车
if (this.states.emergstop) {
this.lozengeGraphic.lozenge.visible = true;
}
@ -67,7 +68,6 @@ class THPlatform extends JlPlatform {
this.states.upOccHold ||
this.states.downHold ||
this.states.downOccHold) {
codeGraphic.character.text = 'H';
codeGraphic.character.visible = true;
codeGraphic.circle.visible = true;
//上行扣车

8
components/packages/Platform/common/JlPlatform.d.ts vendored
View File

@ -1,5 +1,5 @@
import { JlGraphic, VectorText } from 'jl-graphic';
import { Container, Graphics, IPointData } from 'pixi.js';
import { Container, Graphics } from 'pixi.js';
import { IPlatformData, PlatformConstsConfig } from './PlatformConfig';
declare class RectGraphic extends Container {
platformConsts: PlatformConstsConfig;
@ -28,6 +28,8 @@ export declare class CodeGraphic extends Container {
circle: Graphics;
constructor(platformConsts: PlatformConstsConfig);
draw(): void;
drawNoChange(): void;
setPosition(): void;
changePosition(): void;
clear(): void;
}
@ -35,7 +37,7 @@ export declare class LozengeGraphic extends Container {
platformConsts: PlatformConstsConfig;
lozenge: Graphics;
constructor(platformConsts: PlatformConstsConfig);
draw(): void;
drawNoChange(): void;
changePosition(): void;
clear(): void;
}
@ -45,7 +47,7 @@ export declare class DoorCodeLozenge extends Container {
lozengeGraphic: LozengeGraphic;
codeGraphic: CodeGraphic;
constructor(platformConsts: PlatformConstsConfig);
draw(hasDoor: boolean, direction: string, platformPos: IPointData): void;
draw(hasDoor: boolean, direction: string): void;
}
export declare abstract class JlPlatform extends JlGraphic {
static Type: string;

95
components/packages/Platform/common/JlPlatform.js
View File

@ -79,52 +79,23 @@ class CodeGraphic extends Container {
constructor(platformConsts) {
super();
this.platformConsts = platformConsts;
this.addChild(this.character);
this.addChild(this.runLevel);
this.addChild(this.circle);
this.addChild(this.stopTime);
this.addChild(this.runTime);
const codeConsts = platformConsts.codeGraphic;
this.character.setVectorFontSize(codeConsts.besideFontSize);
this.runLevel.setVectorFontSize(codeConsts.besideFontSize);
this.stopTime.setVectorFontSize(codeConsts.besideFontSize);
this.runTime.setVectorFontSize(codeConsts.besideFontSize);
const childrenGraphics = [
this.character,
this.runLevel,
this.runTime,
this.stopTime,
];
childrenGraphics.forEach((child) => {
child.setVectorFontSize(codeConsts.besideFontSize);
child.anchor.set(0.5);
child.style.fill = codeConsts.whiteNumbers;
this.addChild(child);
});
this.addChild(this.circle);
this.drawNoChange();
}
draw() {
const platformConsts = this.platformConsts;
const codeConsts = this.platformConsts.codeGraphic;
//扣车
this.character.text = 'H';
this.character.anchor.set(0.5);
this.character.position.set(-platformConsts.width / 2 -
platformConsts.lineWidth / 2 -
(codeConsts.besideSpacing * 2) / 3, (platformConsts.height * 3) / 4);
this.character.style.fill = codeConsts.whiteNumbers;
this.circle
.clear()
.lineStyle(0.5, codeConsts.whiteCircle)
.drawCircle(0, 0, codeConsts.circleRadius);
this.circle.position.set(-platformConsts.width / 2 -
platformConsts.lineWidth / 2 -
(codeConsts.besideSpacing * 4) / 3, (platformConsts.height * 3) / 5);
//区间运行等级状态
this.runLevel.anchor.set(0.5);
this.runLevel.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
3 * codeConsts.besideSpacing, -codeConsts.besideSpacing);
this.runLevel.style.fill = codeConsts.whiteNumbers;
//区间运行时间
this.runTime.anchor.set(0.5);
this.runTime.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
codeConsts.besideSpacing, -codeConsts.besideSpacing);
this.runTime.style.fill = codeConsts.whiteNumbers;
//停站时间
this.stopTime.anchor.set(0.5);
this.stopTime.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
codeConsts.besideSpacing, codeConsts.besideSpacing);
this.stopTime.style.fill = codeConsts.whiteNumbers;
this.character.visible = false;
this.circle.visible = false;
this.runLevel.visible = false;
@ -132,6 +103,38 @@ class CodeGraphic extends Container {
this.runTime.visible = false;
this.position.set(0, 0);
}
drawNoChange() {
const codeConsts = this.platformConsts.codeGraphic;
this.circle
.clear()
.lineStyle(0.5, codeConsts.whiteCircle)
.drawCircle(0, 0, codeConsts.circleRadius);
this.character.text = 'H';
this.setPosition();
}
setPosition() {
//扣车
const platformConsts = this.platformConsts;
const codeConsts = this.platformConsts.codeGraphic;
this.character.position.set(-platformConsts.width / 2 -
platformConsts.lineWidth / 2 -
(codeConsts.besideSpacing * 2) / 3, (platformConsts.height * 3) / 4);
this.circle.position.set(-platformConsts.width / 2 -
platformConsts.lineWidth / 2 -
(codeConsts.besideSpacing * 4) / 3, (platformConsts.height * 3) / 5);
//区间运行等级状态
this.runLevel.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
3 * codeConsts.besideSpacing, -codeConsts.besideSpacing);
//区间运行时间
this.runTime.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
codeConsts.besideSpacing, -codeConsts.besideSpacing);
//停站时间
this.stopTime.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
codeConsts.besideSpacing, codeConsts.besideSpacing);
}
changePosition() {
const codeConsts = this.platformConsts.codeGraphic;
const psChange = [
@ -162,8 +165,9 @@ class LozengeGraphic extends Container {
this.platformConsts = platformConsts;
this.lozenge = new Graphics();
this.addChild(this.lozenge);
this.drawNoChange();
}
draw() {
drawNoChange() {
const LozengeConsts = this.platformConsts
.lozengeGraphic;
this.lozenge
@ -201,13 +205,12 @@ class DoorCodeLozenge extends Container {
this.codeGraphic = new CodeGraphic(this.platformConsts);
this.addChild(this.codeGraphic);
}
draw(hasDoor, direction, platformPos) {
draw(hasDoor, direction) {
this.doorGraphic.clear();
if (hasDoor) {
this.doorGraphic.draw();
}
this.codeGraphic.draw();
this.lozengeGraphic.draw();
if (direction == 'down') {
this.doorGraphic.changePosition();
this.codeGraphic.changePosition();

2
components/packages/Station/GPStation.js
View File

@ -9,7 +9,7 @@ class GPStation extends JlStation {
return this.getStates();
}
doRepaint() {
super.doRepaint();
super.draw();
}
}

2
components/packages/Station/THStation.js
View File

@ -36,7 +36,7 @@ class THStation extends JlStation {
}
this.controlGraphic.draw(THConsts);
}
super.doRepaint();
super.draw();
if (this.states.ipRtuStusDown !== this._ipRtuStusDown) {
this._ipRtuStusDown = this.states.ipRtuStusDown;
//this.handleBlueShow();

2
components/packages/Station/common/JlStation.d.ts vendored
View File

@ -22,5 +22,5 @@ export declare abstract class JlStation extends JlGraphic {
constructor(styleType: StyleType);
get datas(): IStationData;
get code(): string;
doRepaint(): void;
draw(): void;
}

36
components/packages/Station/common/JlStation.js
View File

@ -83,6 +83,12 @@ class JlStation extends JlGraphic {
super(JlStation.Type);
this.styleType = styleType;
this.stationConsts = stationConstsMap.get(this.styleType);
this.codeGraph.style.fill = this.stationConsts.codeColor;
this.codeGraph.setVectorFontSize(this.stationConsts.codeFontSize);
this.codeGraph.anchor.set(0.5);
this.kilometerGraph.style.fill = this.stationConsts.kilometerCodeColor;
this.kilometerGraph.setVectorFontSize(this.stationConsts.kilometerCodeFontSize);
this.kilometerGraph.anchor.set(0.5);
this.addChild(this.codeGraph);
this.addChild(this.kilometerGraph);
}
@ -92,46 +98,30 @@ class JlStation extends JlGraphic {
get code() {
return this.datas.code;
}
doRepaint() {
const codeGraph = this.codeGraph;
const kilometerGraph = this.kilometerGraph;
draw() {
switch (this.styleType) {
case StyleType.TH:
codeGraph.text = this.datas?.code
this.codeGraph.text = this.datas?.code
? `${this.datas?.name}(${this.datas?.code})`
: `${this.datas?.name}`;
break;
case StyleType.GP:
codeGraph.text = this.datas?.code || '车站Station';
default:
this.codeGraph.text = this.datas?.code || '车站Station';
break;
}
codeGraph.style.fill = this.stationConsts.codeColor;
codeGraph.setVectorFontSize(this.stationConsts.codeFontSize);
codeGraph.anchor.set(0.5);
const kilometerCode = this.datas.kilometerSystem?.kilometer || 12345678;
if (Math.floor(kilometerCode * 1000).toString().length > 3) {
const kiloBit = Math.floor(Number(kilometerCode) / 1000000).toString();
kilometerGraph.text =
this.kilometerGraph.text =
'K' +
kiloBit +
'+' +
(Number(kilometerCode.toString().substring(kiloBit.length)) / 1000).toFixed(3);
}
else {
kilometerGraph.text = (kilometerCode * 1000).toFixed(3);
}
kilometerGraph.style.fill = this.stationConsts.kilometerCodeColor;
kilometerGraph.setVectorFontSize(this.stationConsts.kilometerCodeFontSize);
kilometerGraph.anchor.set(0.5);
kilometerGraph.position.set(0, this.stationConsts.kilometerCodeOffsetY);
if (this.datas.childTransforms?.length) {
this.datas.childTransforms.forEach((child) => {
if (child.name == 'kilometer') {
const pos = child.transform.position;
kilometerGraph.position.set(pos.x, pos.y);
}
});
this.kilometerGraph.text = (kilometerCode * 1000).toFixed(3);
}
this.kilometerGraph.position.set(0, this.stationConsts.kilometerCodeOffsetY);
}
}

18
src/packages/Platform/THPlatform.ts
View File

@ -62,6 +62,7 @@ export class THPlatform extends JlPlatform {
return this.getStates<ITHPlatformState>();
}
doRepaint(): void {
//站台状态
this.rectGraphic.stateFillColor = THConsts.noTrainStop;
if (this.states.trainberth) {
this.rectGraphic.stateFillColor = THConsts.trainStop;
@ -69,6 +70,7 @@ export class THPlatform extends JlPlatform {
if (this.states.upSkipstop || this.states.downSkipstop) {
this.rectGraphic.stateFillColor = THConsts.trainJump;
}
//门的状态
const station =
this.getGraphicApp().queryStore.queryByCodeAndType<THStation>(
this.states.rtuId > 9
@ -76,30 +78,29 @@ export class THPlatform extends JlPlatform {
: '0' + this.states.rtuId,
THStation.Type,
);
const doorGraphic = this.doorGraphic;
doorGraphic.stateFillColor = THConsts.doorGraphic.doorGreen;
this.doorGraphic.stateFillColor = THConsts.doorGraphic.doorGreen;
if (!!station?.states.ipRtuStusDown) {
doorGraphic.stateFillColor = THConsts.doorGraphic.doorBlue;
this.doorGraphic.stateFillColor = THConsts.doorGraphic.doorBlue;
} else if (this.states.psdCut) {
doorGraphic.stateFillColor = THConsts.doorGraphic.doorRed;
this.doorGraphic.stateFillColor = THConsts.doorGraphic.doorRed;
}
super.draw();
this.doorGraphic.draw();
this.codeGraphic.draw();
this.lozengeGraphic.draw();
if (this.datas.direction == 'down') {
this.doorGraphic.changePosition();
this.codeGraphic.changePosition();
this.lozengeGraphic.changePosition();
}
//门的状态
//门的显示与隐藏
if (this.datas.hasdoor) {
if (this.states.psdOpen) {
doorGraphic.doorCloseGraphic.visible = false;
this.doorGraphic.doorCloseGraphic.visible = false;
} else {
doorGraphic.doorCloseGraphic.visible = true;
this.doorGraphic.doorCloseGraphic.visible = true;
}
}
//紧急停车
if (this.states.emergstop) {
this.lozengeGraphic.lozenge.visible = true;
} else {
@ -113,7 +114,6 @@ export class THPlatform extends JlPlatform {
this.states.downHold ||
this.states.downOccHold
) {
codeGraphic.character.text = 'H';
codeGraphic.character.visible = true;
codeGraphic.circle.visible = true;
//上行扣车

67
src/packages/Platform/common/JlPlatform.ts
View File

@ -117,34 +117,49 @@ export class CodeGraphic extends Container {
constructor(platformConsts: PlatformConstsConfig) {
super();
this.platformConsts = platformConsts;
this.addChild(this.character);
this.addChild(this.runLevel);
this.addChild(this.circle);
this.addChild(this.stopTime);
this.addChild(this.runTime);
const codeConsts = platformConsts.codeGraphic as CodeConstsConfig;
this.character.setVectorFontSize(codeConsts.besideFontSize);
this.runLevel.setVectorFontSize(codeConsts.besideFontSize);
this.stopTime.setVectorFontSize(codeConsts.besideFontSize);
this.runTime.setVectorFontSize(codeConsts.besideFontSize);
const childrenGraphics = [
this.character,
this.runLevel,
this.runTime,
this.stopTime,
];
childrenGraphics.forEach((child) => {
child.setVectorFontSize(codeConsts.besideFontSize);
child.anchor.set(0.5);
child.style.fill = codeConsts.whiteNumbers;
this.addChild(child);
});
this.addChild(this.circle);
this.drawNoChange();
}
draw(): void {
this.character.visible = false;
this.circle.visible = false;
this.runLevel.visible = false;
this.stopTime.visible = false;
this.runTime.visible = false;
this.position.set(0, 0);
}
drawNoChange() {
const codeConsts = this.platformConsts.codeGraphic as CodeConstsConfig;
this.circle
.clear()
.lineStyle(0.5, codeConsts.whiteCircle)
.drawCircle(0, 0, codeConsts.circleRadius);
this.character.text = 'H';
this.setPosition();
}
setPosition() {
//扣车
const platformConsts = this.platformConsts;
const codeConsts = this.platformConsts.codeGraphic as CodeConstsConfig;
//扣车
this.character.text = 'H';
this.character.anchor.set(0.5);
this.character.position.set(
-platformConsts.width / 2 -
platformConsts.lineWidth / 2 -
(codeConsts.besideSpacing * 2) / 3,
(platformConsts.height * 3) / 4,
);
this.character.style.fill = codeConsts.whiteNumbers;
this.circle
.clear()
.lineStyle(0.5, codeConsts.whiteCircle)
.drawCircle(0, 0, codeConsts.circleRadius);
this.circle.position.set(
-platformConsts.width / 2 -
platformConsts.lineWidth / 2 -
@ -152,38 +167,26 @@ export class CodeGraphic extends Container {
(platformConsts.height * 3) / 5,
);
//区间运行等级状态
this.runLevel.anchor.set(0.5);
this.runLevel.position.set(
platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
3 * codeConsts.besideSpacing,
-codeConsts.besideSpacing,
);
this.runLevel.style.fill = codeConsts.whiteNumbers;
//区间运行时间
this.runTime.anchor.set(0.5);
this.runTime.position.set(
platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
codeConsts.besideSpacing,
-codeConsts.besideSpacing,
);
this.runTime.style.fill = codeConsts.whiteNumbers;
//停站时间
this.stopTime.anchor.set(0.5);
this.stopTime.position.set(
platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
codeConsts.besideSpacing,
codeConsts.besideSpacing,
);
this.stopTime.style.fill = codeConsts.whiteNumbers;
this.character.visible = false;
this.circle.visible = false;
this.runLevel.visible = false;
this.stopTime.visible = false;
this.runTime.visible = false;
this.position.set(0, 0);
}
changePosition() {
const codeConsts = this.platformConsts.codeGraphic as CodeConstsConfig;
@ -218,8 +221,9 @@ export class LozengeGraphic extends Container {
this.platformConsts = platformConsts;
this.lozenge = new Graphics();
this.addChild(this.lozenge);
this.drawNoChange();
}
draw(): void {
drawNoChange(): void {
const LozengeConsts = this.platformConsts
.lozengeGraphic as LozengeConstsConfig;
this.lozenge
@ -275,13 +279,12 @@ export class DoorCodeLozenge extends Container {
this.codeGraphic = new CodeGraphic(this.platformConsts);
this.addChild(this.codeGraphic);
}
draw(hasDoor: boolean, direction: string, platformPos: IPointData) {
draw(hasDoor: boolean, direction: string) {
this.doorGraphic.clear();
if (hasDoor) {
this.doorGraphic.draw();
}
this.codeGraphic.draw();
this.lozengeGraphic.draw();
if (direction == 'down') {
this.doorGraphic.changePosition();
this.codeGraphic.changePosition();

2
src/packages/Station/GPStation.ts
View File

@ -14,6 +14,6 @@ export class GPStation extends JlStation {
return this.getStates<IGPStationState>();
}
doRepaint(): void {
super.doRepaint();
super.draw();
}
}

3
src/packages/Station/THStation.ts
View File

@ -49,8 +49,7 @@ export class THStation extends JlStation {
}
this.controlGraphic.draw(THConsts);
}
super.doRepaint();
super.draw();
if (this.states.ipRtuStusDown !== this._ipRtuStusDown) {
this._ipRtuStusDown = this.states.ipRtuStusDown;
//this.handleBlueShow();

41
src/packages/Station/common/JlStation.ts
View File

@ -105,6 +105,14 @@ export abstract class JlStation extends JlGraphic {
this.stationConsts = stationConstsMap.get(
this.styleType,
) as StationConstsConfig;
this.codeGraph.style.fill = this.stationConsts.codeColor;
this.codeGraph.setVectorFontSize(this.stationConsts.codeFontSize);
this.codeGraph.anchor.set(0.5);
this.kilometerGraph.style.fill = this.stationConsts.kilometerCodeColor;
this.kilometerGraph.setVectorFontSize(
this.stationConsts.kilometerCodeFontSize,
);
this.kilometerGraph.anchor.set(0.5);
this.addChild(this.codeGraph);
this.addChild(this.kilometerGraph);
}
@ -116,26 +124,21 @@ export abstract class JlStation extends JlGraphic {
return this.datas.code;
}
doRepaint(): void {
const codeGraph = this.codeGraph;
const kilometerGraph = this.kilometerGraph;
draw(): void {
switch (this.styleType) {
case StyleType.TH:
codeGraph.text = this.datas?.code
this.codeGraph.text = this.datas?.code
? `${this.datas?.name}(${this.datas?.code})`
: `${this.datas?.name}`;
break;
case StyleType.GP:
codeGraph.text = this.datas?.code || '车站Station';
default:
this.codeGraph.text = this.datas?.code || '车站Station';
break;
}
codeGraph.style.fill = this.stationConsts.codeColor;
codeGraph.setVectorFontSize(this.stationConsts.codeFontSize);
codeGraph.anchor.set(0.5);
const kilometerCode = this.datas.kilometerSystem?.kilometer || 12345678;
if (Math.floor(kilometerCode * 1000).toString().length > 3) {
const kiloBit = Math.floor(Number(kilometerCode) / 1000000).toString();
kilometerGraph.text =
this.kilometerGraph.text =
'K' +
kiloBit +
'+' +
@ -143,19 +146,11 @@ export abstract class JlStation extends JlGraphic {
Number(kilometerCode.toString().substring(kiloBit.length)) / 1000
).toFixed(3);
} else {
kilometerGraph.text = (kilometerCode * 1000).toFixed(3);
}
kilometerGraph.style.fill = this.stationConsts.kilometerCodeColor;
kilometerGraph.setVectorFontSize(this.stationConsts.kilometerCodeFontSize);
kilometerGraph.anchor.set(0.5);
kilometerGraph.position.set(0, this.stationConsts.kilometerCodeOffsetY);
if (this.datas.childTransforms?.length) {
this.datas.childTransforms.forEach((child) => {
if (child.name == 'kilometer') {
const pos = child.transform.position;
kilometerGraph.position.set(pos.x, pos.y);
}
});
this.kilometerGraph.text = (kilometerCode * 1000).toFixed(3);
}
this.kilometerGraph.position.set(
0,
this.stationConsts.kilometerCodeOffsetY,
);
}
}