358 lines
14 KiB
JavaScript
358 lines
14 KiB
JavaScript
import { JlGraphic, calculateMirrorPoint, JlGraphicTemplate, getRectangleCenter, VectorText } from 'jl-graphic';
|
|
import { Container, Graphics, Color, Point, Rectangle } from 'pixi.js';
|
|
import { CategoryType, platformConstsMap } from './PlatformConfig.js';
|
|
|
|
//子元素--矩形
|
|
class RectGraphic extends Container {
|
|
static Type = 'Rect';
|
|
rectGraphic;
|
|
constructor() {
|
|
super();
|
|
this.rectGraphic = new Graphics();
|
|
this.addChild(this.rectGraphic);
|
|
}
|
|
draw(categoryType, stateData, platformConsts) {
|
|
const rectGraphic = this.rectGraphic;
|
|
let fillColor = platformConsts.noTrainStop;
|
|
switch (categoryType) {
|
|
case CategoryType.XiAn:
|
|
const stateXiAn = stateData;
|
|
if (stateXiAn.trainberth) {
|
|
fillColor = platformConsts.trainStop;
|
|
}
|
|
if (stateXiAn.upSkipstop || stateXiAn.downSkipstop) {
|
|
fillColor = platformConsts.trainJump;
|
|
}
|
|
break;
|
|
}
|
|
rectGraphic
|
|
.clear()
|
|
.lineStyle(platformConsts.lineWidth, new Color(fillColor))
|
|
.beginFill(fillColor, 1)
|
|
.drawRect(0, 0, platformConsts.width, platformConsts.height).endFill;
|
|
rectGraphic.pivot = getRectangleCenter(new Rectangle(0, 0, platformConsts.width, platformConsts.height));
|
|
}
|
|
clear() {
|
|
this.rectGraphic.clear();
|
|
}
|
|
}
|
|
//子元素--门
|
|
class DoorGraphic extends Container {
|
|
static Type = 'Door';
|
|
doorGraphic;
|
|
doorCloseGraphic;
|
|
constructor() {
|
|
super();
|
|
this.doorGraphic = new Graphics();
|
|
this.doorCloseGraphic = new Graphics();
|
|
this.addChild(this.doorGraphic);
|
|
this.addChild(this.doorCloseGraphic);
|
|
}
|
|
draw(categoryType, stateData, platformConsts, ipRtuStusDown) {
|
|
const doorConsts = platformConsts.doorGraphic;
|
|
const doorGraphic = this.doorGraphic;
|
|
const doorCloseGraphic = this.doorCloseGraphic;
|
|
let lineColor = doorConsts.doorGreen;
|
|
switch (categoryType) {
|
|
case CategoryType.XiAn:
|
|
const stateXiAn = stateData;
|
|
if (ipRtuStusDown) {
|
|
lineColor = doorConsts.blueShowColor;
|
|
}
|
|
else if (stateXiAn.psdCut) {
|
|
lineColor = doorConsts.doorRed;
|
|
}
|
|
break;
|
|
}
|
|
doorGraphic.clear()
|
|
.lineStyle(platformConsts.lineWidth, new Color(lineColor))
|
|
.moveTo(-platformConsts.width / 2 - platformConsts.lineWidth / 2, 0)
|
|
.lineTo(-doorConsts.doorOpenSpacing, 0)
|
|
.moveTo(doorConsts.doorOpenSpacing, 0)
|
|
.lineTo(platformConsts.width / 2 + platformConsts.lineWidth / 2, 0);
|
|
//屏蔽门闭合
|
|
doorCloseGraphic.clear()
|
|
.lineStyle(platformConsts.lineWidth, new Color(lineColor))
|
|
.moveTo(-doorConsts.doorOpenSpacing, 0)
|
|
.lineTo(doorConsts.doorOpenSpacing, 0);
|
|
}
|
|
clear() {
|
|
this.doorGraphic.clear();
|
|
this.doorCloseGraphic.clear();
|
|
}
|
|
changeState(categoryType, stateData) {
|
|
switch (categoryType) {
|
|
case CategoryType.XiAn:
|
|
const stateXiAn = stateData;
|
|
if (stateXiAn.psdOpen) {
|
|
this.doorCloseGraphic.visible = false;
|
|
}
|
|
else {
|
|
this.doorCloseGraphic.visible = true;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
//子元素--字符
|
|
class CodeGraph extends Container {
|
|
static Type = 'Code';
|
|
character = new VectorText(''); //扣车H
|
|
runLevel = new VectorText(''); //运行等级
|
|
runTime = new VectorText(''); //运行时间
|
|
stopTime = new VectorText(''); //停站时间
|
|
circle = new Graphics();
|
|
constructor(platformConsts) {
|
|
super();
|
|
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);
|
|
}
|
|
draw(platformConsts) {
|
|
const codeConsts = platformConsts.codeGraphic;
|
|
//扣车
|
|
const character = this.character;
|
|
character.text = 'H';
|
|
character.anchor.set(0.5);
|
|
character.position.set(-platformConsts.width / 2 -
|
|
platformConsts.lineWidth / 2 -
|
|
(codeConsts.besideSpacing * 2) / 3, (platformConsts.height * 3) / 4);
|
|
character.style.fill = codeConsts.whiteNumbers;
|
|
const circle = this.circle;
|
|
circle.clear()
|
|
.lineStyle(0.5, codeConsts.whiteCircle)
|
|
.drawCircle(0, 0, codeConsts.circleRadius);
|
|
circle.position.set(-platformConsts.width / 2 -
|
|
platformConsts.lineWidth / 2 -
|
|
(codeConsts.besideSpacing * 4) / 3, (platformConsts.height * 3) / 5);
|
|
//区间运行等级状态
|
|
const runLevel = this.runLevel;
|
|
runLevel.anchor.set(0.5);
|
|
runLevel.position.set(platformConsts.width / 2 +
|
|
platformConsts.lineWidth / 2 +
|
|
3 * codeConsts.besideSpacing, -codeConsts.besideSpacing);
|
|
runLevel.style.fill = codeConsts.whiteNumbers;
|
|
//区间运行时间
|
|
const runTime = this.runTime;
|
|
runTime.anchor.set(0.5);
|
|
runTime.position.set(platformConsts.width / 2 +
|
|
platformConsts.lineWidth / 2 +
|
|
codeConsts.besideSpacing, -codeConsts.besideSpacing);
|
|
runTime.style.fill = codeConsts.whiteNumbers;
|
|
//停站时间
|
|
const stopTime = this.stopTime;
|
|
stopTime.anchor.set(0.5);
|
|
stopTime.position.set(platformConsts.width / 2 +
|
|
platformConsts.lineWidth / 2 +
|
|
codeConsts.besideSpacing, codeConsts.besideSpacing);
|
|
stopTime.style.fill = codeConsts.whiteNumbers;
|
|
character.visible = false;
|
|
circle.visible = false;
|
|
runLevel.visible = false;
|
|
stopTime.visible = false;
|
|
runTime.visible = false;
|
|
}
|
|
clear() {
|
|
this.character.destroy();
|
|
}
|
|
changeState(categoryType, stateData, platformConsts) {
|
|
const codeConsts = platformConsts.codeGraphic;
|
|
switch (categoryType) {
|
|
case CategoryType.XiAn:
|
|
const stateXiAn = stateData;
|
|
if (stateXiAn.upHold ||
|
|
stateXiAn.upOccHold ||
|
|
stateXiAn.downHold ||
|
|
stateXiAn.downOccHold) {
|
|
this.character.text = 'H';
|
|
this.character.visible = true;
|
|
this.circle.visible = true;
|
|
//上行扣车
|
|
if (stateXiAn.upHold) {
|
|
this.character.style.fill = codeConsts.HCharYellow;
|
|
}
|
|
if (stateXiAn.upOccHold) {
|
|
this.character.style.fill = codeConsts.HCharWhite;
|
|
}
|
|
if (stateXiAn.upHold && stateXiAn.upOccHold) {
|
|
this.character.style.fill = codeConsts.HCharRed;
|
|
}
|
|
//下行扣车
|
|
if (stateXiAn.downHold) {
|
|
this.character.style.fill = codeConsts.HCharYellow;
|
|
}
|
|
if (stateXiAn.downOccHold) {
|
|
this.character.style.fill = codeConsts.HCharWhite;
|
|
}
|
|
if (stateXiAn.downHold && stateXiAn.downOccHold) {
|
|
this.character.style.fill = codeConsts.HCharRed;
|
|
}
|
|
}
|
|
//运行等级
|
|
if (stateXiAn.nextSectionRunLevel) {
|
|
this.runLevel.visible = false;
|
|
this.runLevel.text = stateXiAn.nextSectionRunLevel;
|
|
}
|
|
//运行时间
|
|
if (stateXiAn.nextSectionRunTime) {
|
|
this.runTime.visible = true;
|
|
this.runTime.text = stateXiAn.nextSectionRunTime;
|
|
}
|
|
//停站时间
|
|
if (stateXiAn.stopTime) {
|
|
this.stopTime.visible = true;
|
|
this.stopTime.text = stateXiAn.stopTime;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
//子元素--站台旁菱形图标
|
|
class LozengeGraphic extends Container {
|
|
static Type = 'lozengeGraphic';
|
|
lozengeGraphic;
|
|
constructor() {
|
|
super();
|
|
this.lozengeGraphic = new Graphics();
|
|
this.addChild(this.lozengeGraphic);
|
|
}
|
|
draw(platformConsts) {
|
|
const LozengeConsts = platformConsts.lozengeGraphic;
|
|
const lozengeGraphic = this.lozengeGraphic;
|
|
lozengeGraphic.clear()
|
|
.lineStyle(1, new Color(LozengeConsts.lozengeRed))
|
|
.beginFill(LozengeConsts.lozengeRed, 1)
|
|
.drawRect(0, 0, platformConsts.height / 4, platformConsts.height / 4)
|
|
.endFill();
|
|
const rect = new Rectangle(0, 0, platformConsts.height / 4, platformConsts.height / 4);
|
|
lozengeGraphic.pivot = getRectangleCenter(rect);
|
|
lozengeGraphic.rotation = Math.PI / 4;
|
|
lozengeGraphic.visible = false;
|
|
}
|
|
clear() {
|
|
this.lozengeGraphic.clear();
|
|
}
|
|
changeState(categoryType, stateData) {
|
|
switch (categoryType) {
|
|
case CategoryType.XiAn:
|
|
const stateXiAn = stateData;
|
|
if (stateXiAn.emergstop) {
|
|
this.lozengeGraphic.visible = true;
|
|
}
|
|
else {
|
|
this.lozengeGraphic.visible = false;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
class Platform extends JlGraphic {
|
|
static Type = 'Platform';
|
|
categoryType;
|
|
rectGraphic = new RectGraphic();
|
|
doorGraphic;
|
|
lozengeGraphic;
|
|
codeGraph;
|
|
constructor(categoryType) {
|
|
super(Platform.Type);
|
|
this.categoryType = categoryType;
|
|
const platformConsts = platformConstsMap.get(this.categoryType);
|
|
this.addChild(this.rectGraphic);
|
|
if (platformConsts.doorGraphic) {
|
|
this.doorGraphic = new DoorGraphic();
|
|
this.addChild(this.doorGraphic);
|
|
}
|
|
if (platformConsts.lozengeGraphic) {
|
|
this.lozengeGraphic = new LozengeGraphic();
|
|
this.addChild(this.lozengeGraphic);
|
|
}
|
|
if (platformConsts.codeGraphic) {
|
|
this.codeGraph = new CodeGraph(platformConsts);
|
|
this.addChild(this.codeGraph);
|
|
}
|
|
}
|
|
get datas() {
|
|
return this.getDatas();
|
|
}
|
|
get states() {
|
|
return this.getStates();
|
|
}
|
|
doRepaint() {
|
|
this.doorGraphic?.clear();
|
|
const platformConsts = platformConstsMap.get(this.categoryType);
|
|
this.rectGraphic.draw(this.categoryType, this.states, platformConsts);
|
|
if (this.datas.hasdoor && this.doorGraphic) {
|
|
const doorConsts = platformConsts.doorGraphic;
|
|
/* const station = this.getGraphicApp().queryStore.queryByCodeAndType<Station>(
|
|
states.rtuId > 9 ? '' + states.rtuId : '0' + states.rtuId,
|
|
Station.Type
|
|
); */
|
|
this.doorGraphic.draw(this.categoryType, this.states, platformConsts, false);
|
|
this.doorGraphic.position.set(0, -platformConsts.height / 2 - doorConsts.doorPlatformSpacing);
|
|
if (this.datas.direction == 'down') {
|
|
this.doorGraphic.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.doorGraphic.position));
|
|
}
|
|
}
|
|
if (this.codeGraph) {
|
|
const codeConsts = platformConsts.codeGraphic;
|
|
this.codeGraph.draw(platformConsts);
|
|
this.codeGraph.position.set(0, 0);
|
|
if (this.datas.direction == 'down') {
|
|
const psChange = [
|
|
this.codeGraph?.character,
|
|
this.codeGraph?.runLevel,
|
|
this.codeGraph?.stopTime,
|
|
this.codeGraph?.circle,
|
|
];
|
|
psChange.forEach((g) => {
|
|
if (g) {
|
|
g.position.copyFrom(calculateMirrorPoint(new Point(0, 0), g.position));
|
|
}
|
|
});
|
|
this.codeGraph?.runTime.position.set(platformConsts.width / 2 +
|
|
platformConsts.lineWidth / 2 +
|
|
(codeConsts.besideSpacing * 4) / 3, (-platformConsts.height * 10) / 11);
|
|
}
|
|
}
|
|
if (this.lozengeGraphic) {
|
|
const LozengeConsts = platformConsts.lozengeGraphic;
|
|
this.lozengeGraphic.draw(platformConsts);
|
|
this.lozengeGraphic.position.set(0, -platformConsts.height / 2 -
|
|
LozengeConsts.doorPlatformSpacing -
|
|
platformConsts.height / 3);
|
|
if (this.datas.direction == 'down') {
|
|
this.lozengeGraphic.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.lozengeGraphic.position));
|
|
}
|
|
}
|
|
this.changeState();
|
|
}
|
|
changeState() {
|
|
const platformConsts = platformConstsMap.get(this.categoryType);
|
|
this.doorGraphic?.changeState(this.categoryType, this.states);
|
|
this.lozengeGraphic?.changeState(this.categoryType, this.states);
|
|
this.codeGraph?.changeState(this.categoryType, this.states, platformConsts);
|
|
}
|
|
}
|
|
class PlatformTemplate extends JlGraphicTemplate {
|
|
categoryType;
|
|
constructor(dataTemplate, stateTemplate, categoryType) {
|
|
super(Platform.Type, { dataTemplate, stateTemplate });
|
|
this.categoryType = categoryType;
|
|
}
|
|
new() {
|
|
const g = new Platform(this.categoryType);
|
|
g.loadData(this.datas);
|
|
g.loadState(this.states);
|
|
return g;
|
|
}
|
|
}
|
|
|
|
export { DoorGraphic, Platform, PlatformTemplate };
|