站台车站计轴
This commit is contained in:
joylink_zhaoerwei
parent
224f8975f8
commit
c4cb584853
@ -95,9 +95,9 @@ const stationName = computed(() => {
|
||||
});
|
||||
const sectionName = computed(() => {
|
||||
const platform = drawStore.selectedGraphic as Platform;
|
||||
if (platformModel.refSectionId) {
|
||||
if (platformModel.refSection) {
|
||||
const refSection = platform.queryStore.queryById<Section>(
|
||||
platformModel.refSectionId
|
||||
platformModel.refSection
|
||||
);
|
||||
return refSection.datas.code;
|
||||
}
|
||||
|
||||
@ -36,10 +36,12 @@ import { RectData } from './graphics/RectInteraction';
|
||||
import { Platform } from 'src/graphics/platform/Platform';
|
||||
import { PlatformTemplate } from 'rt-graphic-component/components/packages/Platform/PlatformTemplate';
|
||||
import { PlatformData, PlatformState } from './graphics/PlatformInteraction';
|
||||
import { PlatformDraw } from 'src/graphics/platform/PlatformDrawAssistant';
|
||||
import { Station, StationTemplate } from 'src/graphics/station/Station';
|
||||
import { StationDraw } from 'src/graphics/station/StationDrawAssistant';
|
||||
import { PlatformDraw } from 'rt-graphic-component/components/packages/Platform/PlatformDrawAssistant';
|
||||
import { Station } from 'src/graphics/station/Station';
|
||||
import { StationData, StationState } from './graphics/StationInteraction';
|
||||
import { StationTemplate } from 'rt-graphic-component/components/packages/Station/StationTemplate';
|
||||
import { CategoryType } from 'rt-graphic-component/components/packages/Platform/PlatformConfig';
|
||||
import { StationDraw } from 'rt-graphic-component/components/packages/Station/StationDrawAssistant';
|
||||
import {
|
||||
StationLine,
|
||||
StationLineTemplate,
|
||||
@ -235,11 +237,21 @@ export function initDrawApp(): IDrawApp {
|
||||
if (draftType === 'Line') {
|
||||
new PlatformDraw(
|
||||
app,
|
||||
new PlatformTemplate(new PlatformData(), new PlatformState())
|
||||
new PlatformTemplate(
|
||||
new PlatformData(),
|
||||
new PlatformState(),
|
||||
CategoryType.XiAn
|
||||
),
|
||||
'svguse:../../drawIcon.svg#icon-platform'
|
||||
),
|
||||
new StationDraw(
|
||||
app,
|
||||
new StationTemplate(new StationData(), new StationState())
|
||||
new StationTemplate(
|
||||
new StationData(),
|
||||
new StationState(),
|
||||
CategoryType.XiAn
|
||||
),
|
||||
'svguse:../../drawIcon.svg#icon-station'
|
||||
),
|
||||
new SignalDraw(
|
||||
app,
|
||||
|
||||
@ -30,7 +30,7 @@ import {
|
||||
StationOperateInteraction,
|
||||
StationState,
|
||||
} from './graphics/StationInteraction';
|
||||
import { Station, StationTemplate } from 'src/graphics/station/Station';
|
||||
import { Station } from 'src/graphics/station/Station';
|
||||
import {
|
||||
TurnoutData,
|
||||
TurnoutOperationPlugin,
|
||||
@ -75,6 +75,7 @@ import { Notify, QNotifyUpdateOptions } from 'quasar';
|
||||
import { useLineNetStore } from 'src/stores/line-net-store';
|
||||
import { alert } from 'src/protos/alertInfo';
|
||||
import { CategoryType } from 'rt-graphic-component/components/packages/Platform/PlatformConfig';
|
||||
import { StationTemplate } from 'rt-graphic-component/components/packages/Station/StationTemplate';
|
||||
|
||||
let lineApp: IGraphicApp | null = null;
|
||||
|
||||
@ -118,7 +119,11 @@ export function initLineApp(): IGraphicApp {
|
||||
new PlatformState(),
|
||||
CategoryType.XiAn
|
||||
),
|
||||
new StationTemplate(new StationData(), new StationState()),
|
||||
new StationTemplate(
|
||||
new StationData(),
|
||||
new StationState(),
|
||||
CategoryType.XiAn
|
||||
),
|
||||
new TurnoutTemplate(new TurnoutData(), new TurnoutStates()),
|
||||
new SectionTemplate(new SectionData()),
|
||||
new LogicSectionTemplate(new LogicSectionData(), new LogicSectionState()),
|
||||
|
||||
@ -2,10 +2,12 @@ import {
|
||||
LogicSection,
|
||||
LogicSectionTemplate,
|
||||
} from 'src/graphics/logicSection/LogicSection';
|
||||
import { Platform, PlatformTemplate } from 'src/graphics/platform/Platform';
|
||||
import { Platform } from 'src/graphics/platform/Platform';
|
||||
import { PlatformTemplate } from 'rt-graphic-component/components/packages/Platform/PlatformTemplate';
|
||||
import { SectionTemplate } from 'src/graphics/section/Section';
|
||||
import { Signal, SignalTemplate } from 'src/graphics/signal/Signal';
|
||||
import { Station, StationTemplate } from 'src/graphics/station/Station';
|
||||
import { Station } from 'src/graphics/station/Station';
|
||||
import { StationTemplate } from 'rt-graphic-component/components/packages/Station/StationTemplate';
|
||||
import { Turnout, TurnoutTemplate } from 'src/graphics/turnout/Turnout';
|
||||
import {
|
||||
IGraphicApp,
|
||||
@ -32,6 +34,7 @@ import { getPublishMapInfoByLineId } from 'src/api/PublishApi';
|
||||
import { useRangeConfigStore } from 'src/stores/range-config-store';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
import { toUint8Array } from 'js-base64';
|
||||
import { CategoryType } from 'rt-graphic-component/components/packages/Platform/PlatformConfig';
|
||||
|
||||
let rangeConfigApp: IGraphicApp;
|
||||
|
||||
@ -57,8 +60,16 @@ export function initRangeConfigApp(lineId: number) {
|
||||
});
|
||||
const graphicTemplate = [
|
||||
new SignalTemplate(new SignalData(), new SignalState()),
|
||||
new PlatformTemplate(new PlatformData(), new PlatformState()),
|
||||
new StationTemplate(new StationData(), new StationState()),
|
||||
new PlatformTemplate(
|
||||
new PlatformData(),
|
||||
new PlatformState(),
|
||||
CategoryType.XiAn
|
||||
),
|
||||
new StationTemplate(
|
||||
new StationData(),
|
||||
new StationState(),
|
||||
CategoryType.XiAn
|
||||
),
|
||||
new TurnoutTemplate(new TurnoutData(), new TurnoutStates()),
|
||||
new SectionTemplate(new SectionData()),
|
||||
new LogicSectionTemplate(new LogicSectionData(), new LogicSectionState()),
|
||||
|
||||
@ -1,116 +1,9 @@
|
||||
import { Color, Container, Graphics } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
GraphicRelationParam,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
} from 'jl-graphic';
|
||||
import { IRelatedRefData, protoPort2Data } from '../CommonGraphics';
|
||||
import { KilometerSystem } from '../signal/Signal';
|
||||
AxleCounting,
|
||||
IAxleCountingData,
|
||||
AxleCountingTemplate,
|
||||
AxleCountingConsts,
|
||||
} from 'rt-graphic-component/components/packages/AxleCounting/AxleCounting';
|
||||
|
||||
export interface IAxleCountingData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get kilometerSystem(): KilometerSystem;
|
||||
set kilometerSystem(v: KilometerSystem);
|
||||
get axleCountingRef(): IRelatedRefData[]; //关联的设备
|
||||
set axleCountingRef(ref: IRelatedRefData[]);
|
||||
clone(): IAxleCountingData;
|
||||
copyFrom(data: IAxleCountingData): void;
|
||||
eq(other: IAxleCountingData): boolean;
|
||||
}
|
||||
|
||||
export const AxleCountingConsts = {
|
||||
radius: 6,
|
||||
borderWidth: 1,
|
||||
circleColorBlue: '0x08F80D',
|
||||
codeColor: '0xF48815',
|
||||
codeFontSize: 22,
|
||||
codeOffsetY: 30,
|
||||
kilometerCodeColor: '0xFFFFFF',
|
||||
kilometerCodeFontSize: 14,
|
||||
kilometerCodeOffsetY: 95,
|
||||
offsetSection: 50,
|
||||
};
|
||||
class TwoCircleGraphic extends Container {
|
||||
circleA: Graphics = new Graphics();
|
||||
circleB: Graphics = new Graphics();
|
||||
line: Graphics = new Graphics();
|
||||
constructor() {
|
||||
super();
|
||||
this.addChild(this.circleA);
|
||||
this.addChild(this.circleB);
|
||||
this.addChild(this.line);
|
||||
}
|
||||
draw(): void {
|
||||
this.drawCircle(this.circleA);
|
||||
this.drawCircle(this.circleB);
|
||||
this.circleA.position.set(-12, 0);
|
||||
this.circleB.position.set(12, 0);
|
||||
this.line.clear();
|
||||
this.line.lineStyle(1, new Color(AxleCountingConsts.circleColorBlue));
|
||||
this.line.moveTo(-24, 0);
|
||||
this.line.lineTo(24, 0);
|
||||
}
|
||||
drawCircle(circle: Graphics): void {
|
||||
circle.clear();
|
||||
circle.lineStyle(
|
||||
AxleCountingConsts.borderWidth,
|
||||
new Color(AxleCountingConsts.circleColorBlue)
|
||||
);
|
||||
circle.beginFill(AxleCountingConsts.circleColorBlue, 1);
|
||||
circle.drawCircle(0, 0, AxleCountingConsts.radius);
|
||||
circle.endFill;
|
||||
}
|
||||
clear(): void {
|
||||
this.circleA.clear();
|
||||
this.circleB.clear();
|
||||
}
|
||||
}
|
||||
export class AxleCounting extends JlGraphic {
|
||||
static Type = 'AxleCounting';
|
||||
twoCircle: TwoCircleGraphic = new TwoCircleGraphic();
|
||||
kilometerGraph: VectorText = new VectorText(''); //公里标
|
||||
direction: number;
|
||||
constructor(direction: number) {
|
||||
super(AxleCounting.Type);
|
||||
this.addChild(this.twoCircle);
|
||||
this.addChild(this.kilometerGraph);
|
||||
this.kilometerGraph.name = 'kilometer';
|
||||
this.direction = direction;
|
||||
}
|
||||
|
||||
get datas(): IAxleCountingData {
|
||||
return this.getDatas<IAxleCountingData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
this.twoCircle.draw();
|
||||
}
|
||||
loadRelations(): void {
|
||||
if (this.datas.axleCountingRef.length) {
|
||||
this.datas.axleCountingRef.forEach((device) => {
|
||||
this.relationManage.addRelation(
|
||||
new GraphicRelationParam(this, 'A'),
|
||||
new GraphicRelationParam(
|
||||
this.queryStore.queryById(device.id),
|
||||
protoPort2Data(device.devicePort)
|
||||
)
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class AxleCountingTemplate extends JlGraphicTemplate<AxleCounting> {
|
||||
constructor(dataTemplate: IAxleCountingData) {
|
||||
super(AxleCounting.Type, {
|
||||
dataTemplate,
|
||||
});
|
||||
}
|
||||
new(): AxleCounting {
|
||||
const axleCounting = new AxleCounting(1);
|
||||
axleCounting.loadData(this.datas);
|
||||
return axleCounting;
|
||||
}
|
||||
}
|
||||
export { AxleCounting, AxleCountingTemplate, AxleCountingConsts };
|
||||
export type { IAxleCountingData };
|
||||
|
||||
@ -112,14 +112,7 @@ export class AxleCountingDraw extends GraphicDrawAssistant<
|
||||
const refData2 = createRelatedRefProto(graphic.type, graphic.id, port);
|
||||
const axleCounting = new AxleCounting(direction);
|
||||
axleCounting.loadData(this.graphicTemplate.datas);
|
||||
if (graphic.type == 'Turnout') {
|
||||
axleCounting.position.set(ps.x, ps.y);
|
||||
} else {
|
||||
axleCounting.position.set(
|
||||
ps.x,
|
||||
ps.y - AxleCountingConsts.offsetSection * direction
|
||||
);
|
||||
}
|
||||
axleCounting.position.set(ps.x, ps.y);
|
||||
axleCounting.id = GraphicIdGenerator.next();
|
||||
axleCounting.datas.axleCountingRef = [refData2, refData1];
|
||||
axleCounting.datas.code = `${graphic.datas.code}-${port}+${refGraphic.datas.code}-${refPort}`;
|
||||
@ -139,14 +132,7 @@ export class AxleCountingDraw extends GraphicDrawAssistant<
|
||||
const refData = createRelatedRefProto(graphic.type, graphic.id, port);
|
||||
const axleCounting = new AxleCounting(direction);
|
||||
axleCounting.loadData(this.graphicTemplate.datas);
|
||||
if (graphic.type == 'Turnout') {
|
||||
axleCounting.position.set(ps.x, ps.y);
|
||||
} else {
|
||||
axleCounting.position.set(
|
||||
ps.x,
|
||||
ps.y - AxleCountingConsts.offsetSection * direction
|
||||
);
|
||||
}
|
||||
axleCounting.position.set(ps.x, ps.y);
|
||||
axleCounting.id = GraphicIdGenerator.next();
|
||||
axleCounting.datas.axleCountingRef = [refData];
|
||||
axleCounting.datas.code = `${graphic.datas.code}-${port}`;
|
||||
@ -362,21 +348,12 @@ export class AxleCountingInteraction extends GraphicInteractionPlugin<AxleCounti
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.kilometerGraph.eventMode = 'static';
|
||||
g.kilometerGraph.cursor = 'pointer';
|
||||
g.kilometerGraph.draggable = true;
|
||||
g.kilometerGraph.selectable = true;
|
||||
g.kilometerGraph.transformSave = true;
|
||||
g.on('selected', this.onSelected, this);
|
||||
}
|
||||
unbind(g: AxleCounting): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
g.kilometerGraph.eventMode = 'none';
|
||||
g.kilometerGraph.draggable = false;
|
||||
g.kilometerGraph.selectable = false;
|
||||
g.kilometerGraph.transformSave = false;
|
||||
g.off('selected', this.onSelected, this);
|
||||
}
|
||||
onSelected(): void {
|
||||
|
||||
@ -1,109 +0,0 @@
|
||||
import { FederatedPointerEvent, Point } from 'pixi.js';
|
||||
import {
|
||||
AbsorbableLine,
|
||||
AbsorbablePosition,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
IDrawApp,
|
||||
JlGraphic,
|
||||
} from 'jl-graphic';
|
||||
|
||||
import { IPlatformData, Platform, PlatformTemplate } from './Platform';
|
||||
|
||||
export interface IPlatformDrawOptions {
|
||||
newData: () => IPlatformData;
|
||||
}
|
||||
|
||||
export class PlatformDraw extends GraphicDrawAssistant<
|
||||
PlatformTemplate,
|
||||
IPlatformData
|
||||
> {
|
||||
platformGraphic: Platform;
|
||||
constructor(app: IDrawApp, template: PlatformTemplate) {
|
||||
super(
|
||||
app,
|
||||
template,
|
||||
'svguse:../../drawIcon.svg#icon-platform',
|
||||
'站台Platform'
|
||||
);
|
||||
this.platformGraphic = this.graphicTemplate.new();
|
||||
this.container.addChild(this.platformGraphic);
|
||||
platformInteraction.init(app);
|
||||
}
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.platformGraphic.loadData(this.graphicTemplate.datas);
|
||||
this.platformGraphic.doRepaint();
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
//this.platformGraphic.clear();
|
||||
}
|
||||
onLeftDown(e: FederatedPointerEvent): void {
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.container.position.copyFrom(p);
|
||||
}
|
||||
|
||||
prepareData(data: IPlatformData): boolean {
|
||||
const template = this.graphicTemplate;
|
||||
data.hasdoor = template.hasdoor;
|
||||
data.direction = template.direction;
|
||||
data.transform = this.container.saveTransform();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function buildAbsorbablePositions(platform: Platform): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const platforms = platform.queryStore.queryByType<Platform>(Platform.Type);
|
||||
const { width, height } = platform.getGraphicApp().canvas;
|
||||
platforms.forEach((other) => {
|
||||
if (other.id == platform.id) {
|
||||
return;
|
||||
}
|
||||
const ps = other.datas.transform.position;
|
||||
const xs = new AbsorbableLine({ x: 0, y: ps.y }, { x: width, y: ps.y });
|
||||
const ys = new AbsorbableLine({ x: ps.x, y: 0 }, { x: ps.x, y: height });
|
||||
aps.push(xs, ys);
|
||||
});
|
||||
return aps;
|
||||
}
|
||||
|
||||
export class platformInteraction extends GraphicInteractionPlugin<Platform> {
|
||||
static Name = 'platform_transform';
|
||||
constructor(app: IDrawApp) {
|
||||
super(platformInteraction.Name, app);
|
||||
}
|
||||
static init(app: IDrawApp) {
|
||||
return new platformInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Platform[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === Platform.Type)
|
||||
.map((g) => g as Platform);
|
||||
}
|
||||
bind(g: Platform): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.on('selected', this.onSelected, this);
|
||||
}
|
||||
unbind(g: Platform): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
g.off('selected', this.onSelected, this);
|
||||
}
|
||||
onSelected(): void {
|
||||
const platform = this.app.selectedGraphics[0] as Platform;
|
||||
this.app.setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(platform),
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,280 +1,6 @@
|
||||
import { Color, Container, Graphics } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
GraphicState,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
} from 'jl-graphic';
|
||||
import { LogicSection } from '../logicSection/LogicSection';
|
||||
import { Platform } from '../platform/Platform';
|
||||
import { KilometerSystem, Signal } from '../signal/Signal';
|
||||
import { Train } from '../train/Train';
|
||||
import { Turnout } from '../turnout/Turnout';
|
||||
import { XiAnStation as Station } from 'rt-graphic-component/components/packages/Station/XiAnStation';
|
||||
import { IStationData } from 'rt-graphic-component/components/packages/Station/StationConfig';
|
||||
import { IXiAnStationState as IStationState } from 'rt-graphic-component/components/packages/Station/XiAnStation';
|
||||
|
||||
export interface IStationData extends GraphicData {
|
||||
get code(): string; // 车站索引
|
||||
set code(v: string);
|
||||
get kilometerSystem(): KilometerSystem;
|
||||
set kilometerSystem(v: KilometerSystem);
|
||||
get hasControl(): boolean; //是否有控制
|
||||
set hasControl(v: boolean);
|
||||
get concentrationStations(): boolean; //是否集中站
|
||||
set concentrationStations(v: boolean);
|
||||
get name(): string; //车站名称
|
||||
set name(v: string);
|
||||
get manageStations(): number[]; //集中站管理的车站
|
||||
set manageStations(v: number[]);
|
||||
get depots(): boolean; //是否车辆段
|
||||
set depots(v: boolean);
|
||||
clone(): IStationData;
|
||||
copyFrom(data: IStationData): void;
|
||||
eq(other: IStationData): boolean;
|
||||
}
|
||||
|
||||
export interface IStationState extends GraphicState {
|
||||
get ipRtuStusDown(): boolean; //通信终端---是否允许转到中控
|
||||
set ipRtuStusDown(v: boolean);
|
||||
get ipRtuStusInLocalCtrl(): boolean; //站控
|
||||
set ipRtuStusInLocalCtrl(v: boolean);
|
||||
get ipRtuStusInCentralCtrl(): boolean; //遥控
|
||||
set ipRtuStusInCentralCtrl(v: boolean);
|
||||
get ipRtuStusInEmergencyCtrl(): boolean; //紧急站控
|
||||
set ipRtuStusInEmergencyCtrl(v: boolean);
|
||||
get rtuId(): number; // 集中站站号
|
||||
set rtuId(v: number);
|
||||
}
|
||||
|
||||
const stationConsts = {
|
||||
radius: 3,
|
||||
borderWidth: 1,
|
||||
circleColorGrey: '0x808080',
|
||||
circleColorBlue: '0x08F80D',
|
||||
circleColorYellow: '0xFFFA0C',
|
||||
codeColor: '0xF48815',
|
||||
codeFontSize: 22,
|
||||
codeControlFontSize: 12,
|
||||
codeOffsetY: 30,
|
||||
circleOffsetY: 20,
|
||||
circleBetweenOffset: 40,
|
||||
kilometerCodeColor: '0xFFFFFF',
|
||||
kilometerCodeFontSize: 8,
|
||||
kilometerCodeOffsetY: -25,
|
||||
};
|
||||
class constrolGraphic extends Container {
|
||||
circleA: Graphics = new Graphics();
|
||||
codeGraphA: VectorText = new VectorText(''); //控制名--站控
|
||||
circleB: Graphics = new Graphics();
|
||||
codeGraphB: VectorText = new VectorText(''); //控制名--中控
|
||||
arrow: Graphics = new Graphics();
|
||||
inArrow: Graphics = new Graphics();
|
||||
constructor() {
|
||||
super();
|
||||
this.addChild(this.circleA);
|
||||
this.addChild(this.codeGraphA);
|
||||
this.addChild(this.circleB);
|
||||
this.addChild(this.codeGraphB);
|
||||
this.addChild(this.arrow);
|
||||
this.addChild(this.inArrow);
|
||||
this.codeGraphA.setVectorFontSize(stationConsts.codeFontSize);
|
||||
this.codeGraphB.setVectorFontSize(stationConsts.codeFontSize);
|
||||
}
|
||||
draw(states: IStationState): void {
|
||||
let StationControlFillColor = stationConsts.circleColorGrey;
|
||||
let centralControlFillColor = stationConsts.circleColorBlue;
|
||||
let inArrowFillColor = stationConsts.circleColorGrey;
|
||||
if (states.ipRtuStusInLocalCtrl) {
|
||||
StationControlFillColor = stationConsts.circleColorYellow;
|
||||
centralControlFillColor = stationConsts.circleColorGrey;
|
||||
if (!states.ipRtuStusDown) {
|
||||
inArrowFillColor = stationConsts.circleColorBlue;
|
||||
}
|
||||
}
|
||||
this.drawCircleCode(
|
||||
this.circleA,
|
||||
this.codeGraphA,
|
||||
'站控',
|
||||
StationControlFillColor
|
||||
);
|
||||
this.circleA.position.set(
|
||||
stationConsts.circleBetweenOffset / 2,
|
||||
stationConsts.circleOffsetY
|
||||
);
|
||||
this.codeGraphA.position.set(
|
||||
stationConsts.circleBetweenOffset / 2,
|
||||
stationConsts.codeOffsetY
|
||||
);
|
||||
this.drawCircleCode(
|
||||
this.circleB,
|
||||
this.codeGraphB,
|
||||
'中控',
|
||||
centralControlFillColor
|
||||
);
|
||||
this.circleB.position.set(
|
||||
-stationConsts.circleBetweenOffset / 2,
|
||||
stationConsts.circleOffsetY
|
||||
);
|
||||
this.codeGraphB.position.set(
|
||||
-stationConsts.circleBetweenOffset / 2,
|
||||
stationConsts.codeOffsetY
|
||||
);
|
||||
const arrow = this.arrow;
|
||||
arrow.clear();
|
||||
arrow.lineStyle(stationConsts.borderWidth, new Color('0xFFFFFF'));
|
||||
const points = [0, 0, 2, 2, 2, 1, 14, 1, 14, -1, 2, -1, 2, -2];
|
||||
arrow.beginFill('0xFFFFFF');
|
||||
arrow.drawPolygon(points);
|
||||
arrow.endFill();
|
||||
arrow.scale.set(1.1, 1.1);
|
||||
arrow.position.set(-7, stationConsts.circleOffsetY);
|
||||
const inArrow = this.inArrow;
|
||||
inArrow.beginFill(inArrowFillColor);
|
||||
inArrow.drawPolygon(points);
|
||||
inArrow.endFill();
|
||||
inArrow.position.set(-6.5, stationConsts.circleOffsetY);
|
||||
}
|
||||
drawCircleCode(
|
||||
circle: Graphics,
|
||||
codeGraph: VectorText,
|
||||
code: string,
|
||||
fillcolor: string
|
||||
): void {
|
||||
circle.clear();
|
||||
circle.lineStyle(stationConsts.borderWidth, new Color(fillcolor));
|
||||
circle.beginFill(fillcolor, 1);
|
||||
circle.drawCircle(0, 0, stationConsts.radius);
|
||||
circle.endFill;
|
||||
codeGraph.text = code;
|
||||
codeGraph.style.fill = fillcolor;
|
||||
codeGraph.setVectorFontSize(stationConsts.codeControlFontSize);
|
||||
codeGraph.anchor.set(0.5);
|
||||
}
|
||||
clear(): void {
|
||||
this.circleA.clear();
|
||||
this.circleB.clear();
|
||||
this.codeGraphA.text = '';
|
||||
this.codeGraphB.text = '';
|
||||
this.arrow.clear();
|
||||
this.inArrow.clear();
|
||||
}
|
||||
}
|
||||
export class Station extends JlGraphic {
|
||||
static Type = 'station';
|
||||
codeGraph: VectorText = new VectorText(''); //车站名
|
||||
kilometerGraph: VectorText = new VectorText(''); //公里标
|
||||
controlGraphic: constrolGraphic = new constrolGraphic();
|
||||
_ipRtuStusDown = false;
|
||||
constructor() {
|
||||
super(Station.Type);
|
||||
this.addChild(this.codeGraph);
|
||||
this.addChild(this.kilometerGraph);
|
||||
this.addChild(this.controlGraphic);
|
||||
this.kilometerGraph.name = 'kilometer';
|
||||
this.controlGraphic.name = 'trainControl';
|
||||
}
|
||||
|
||||
get datas(): IStationData {
|
||||
return this.getDatas<IStationData>();
|
||||
}
|
||||
get states(): IStationState {
|
||||
return this.getStates<IStationState>();
|
||||
}
|
||||
get code(): string {
|
||||
return this.datas.code;
|
||||
}
|
||||
doRepaint(): void {
|
||||
const codeGraph = this.codeGraph;
|
||||
const kilometerGraph = this.kilometerGraph;
|
||||
const controlGraphic = this.controlGraphic;
|
||||
controlGraphic.clear();
|
||||
codeGraph.text = this.datas?.code
|
||||
? `${this.datas?.name}(${this.datas?.code})`
|
||||
: `${this.datas?.name}`;
|
||||
codeGraph.style.fill = stationConsts.codeColor;
|
||||
codeGraph.setVectorFontSize(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 =
|
||||
'K' +
|
||||
kiloBit +
|
||||
'+' +
|
||||
(
|
||||
Number(kilometerCode.toString().substring(kiloBit.length)) / 1000
|
||||
).toFixed(3);
|
||||
} else {
|
||||
kilometerGraph.text = (kilometerCode * 1000).toFixed(3);
|
||||
}
|
||||
kilometerGraph.style.fill = stationConsts.kilometerCodeColor;
|
||||
kilometerGraph.setVectorFontSize(stationConsts.kilometerCodeFontSize);
|
||||
kilometerGraph.anchor.set(0.5);
|
||||
kilometerGraph.position.set(0, 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);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (this.datas.hasControl) {
|
||||
controlGraphic.draw(this.states);
|
||||
}
|
||||
if (this.states.ipRtuStusDown !== this._ipRtuStusDown) {
|
||||
this._ipRtuStusDown = this.states.ipRtuStusDown;
|
||||
this.handleBlueShow();
|
||||
}
|
||||
}
|
||||
handleBlueShow() {
|
||||
const signals = this.queryStore.queryByType<Signal>(Signal.Type);
|
||||
const logicSections = this.queryStore.queryByType<LogicSection>(
|
||||
LogicSection.Type
|
||||
);
|
||||
const turnouts = this.queryStore.queryByType<Turnout>(Turnout.Type);
|
||||
const platfroms = this.queryStore.queryByType<Platform>(Platform.Type);
|
||||
const trains = this.queryStore.queryByType<Train>(Train.Type);
|
||||
signals.forEach((signal) => {
|
||||
if (signal.states.rtuId === this.states.rtuId) {
|
||||
signal.doRepaint();
|
||||
}
|
||||
});
|
||||
logicSections.forEach((logicSection) => {
|
||||
if (logicSection.states.rtuId === this.states.rtuId) {
|
||||
logicSection.doRepaint();
|
||||
}
|
||||
});
|
||||
turnouts.forEach((turnout) => {
|
||||
if (turnout.states.rtuId === this.states.rtuId) {
|
||||
turnout.doRepaint();
|
||||
}
|
||||
});
|
||||
platfroms.forEach((platform) => {
|
||||
if (platform.states.rtuId === this.states.rtuId) {
|
||||
platform.doRepaint();
|
||||
}
|
||||
});
|
||||
trains.forEach((train) => {
|
||||
if (train.states.rtuId === this.states.rtuId) {
|
||||
train.doRepaint();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class StationTemplate extends JlGraphicTemplate<Station> {
|
||||
hasControl: boolean;
|
||||
constructor(dataTemplate: IStationData, stateTemplate: IStationState) {
|
||||
super(Station.Type, {
|
||||
dataTemplate,
|
||||
stateTemplate,
|
||||
});
|
||||
this.hasControl = true;
|
||||
}
|
||||
new(): Station {
|
||||
const station = new Station();
|
||||
station.loadData(this.datas);
|
||||
station.loadState(this.states);
|
||||
return station;
|
||||
}
|
||||
}
|
||||
export { Station };
|
||||
export type { IStationState, IStationData };
|
||||
|
||||
@ -1,123 +0,0 @@
|
||||
import { FederatedPointerEvent, Point } from 'pixi.js';
|
||||
import {
|
||||
AbsorbableLine,
|
||||
AbsorbablePosition,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
IDrawApp,
|
||||
JlGraphic,
|
||||
} from 'jl-graphic';
|
||||
|
||||
import { IStationData, Station, StationTemplate } from './Station';
|
||||
|
||||
export interface IStationDrawOptions {
|
||||
newData: () => IStationData;
|
||||
}
|
||||
|
||||
export class StationDraw extends GraphicDrawAssistant<
|
||||
StationTemplate,
|
||||
IStationData
|
||||
> {
|
||||
codeGraph: Station;
|
||||
constructor(app: IDrawApp, template: StationTemplate) {
|
||||
super(
|
||||
app,
|
||||
template,
|
||||
'svguse:../../drawIcon.svg#icon-station',
|
||||
'车站Station'
|
||||
);
|
||||
this.codeGraph = this.graphicTemplate.new();
|
||||
this.container.addChild(this.codeGraph);
|
||||
stationInteraction.init(app);
|
||||
}
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.codeGraph.loadData(this.graphicTemplate.datas);
|
||||
this.codeGraph.doRepaint();
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
//this.codeGraph.destroy();
|
||||
}
|
||||
onLeftDown(e: FederatedPointerEvent): void {
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.container.position.copyFrom(p);
|
||||
}
|
||||
prepareData(data: IStationData): boolean {
|
||||
data.transform = this.container.saveTransform();
|
||||
data.hasControl = this.graphicTemplate.hasControl;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function buildAbsorbablePositions(station: Station): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const stations = station.queryStore.queryByType<Station>(Station.Type);
|
||||
const { width } = station.getGraphicApp().canvas;
|
||||
stations.forEach((other) => {
|
||||
if (other.id == station.id) {
|
||||
return;
|
||||
}
|
||||
const ps = other.datas.transform.position;
|
||||
const xs = new AbsorbableLine({ x: 0, y: ps.y }, { x: width, y: ps.y });
|
||||
aps.push(xs);
|
||||
});
|
||||
return aps;
|
||||
}
|
||||
|
||||
export class stationInteraction extends GraphicInteractionPlugin<Station> {
|
||||
static Name = 'station_transform';
|
||||
constructor(app: IDrawApp) {
|
||||
super(stationInteraction.Name, app);
|
||||
}
|
||||
static init(app: IDrawApp) {
|
||||
return new stationInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Station[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === Station.Type)
|
||||
.map((g) => g as Station);
|
||||
}
|
||||
bind(g: Station): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.controlGraphic.eventMode = 'static';
|
||||
g.controlGraphic.cursor = 'pointer';
|
||||
g.controlGraphic.draggable = true;
|
||||
g.controlGraphic.selectable = true;
|
||||
g.controlGraphic.transformSave = true;
|
||||
g.kilometerGraph.eventMode = 'static';
|
||||
g.kilometerGraph.cursor = 'pointer';
|
||||
g.kilometerGraph.draggable = true;
|
||||
g.kilometerGraph.selectable = true;
|
||||
g.kilometerGraph.transformSave = true;
|
||||
g.on('selected', this.onSelected, this);
|
||||
}
|
||||
unbind(g: Station): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
g.controlGraphic.eventMode = 'none';
|
||||
g.controlGraphic.draggable = false;
|
||||
g.controlGraphic.selectable = false;
|
||||
g.controlGraphic.transformSave = false;
|
||||
g.kilometerGraph.eventMode = 'none';
|
||||
g.kilometerGraph.draggable = false;
|
||||
g.kilometerGraph.selectable = false;
|
||||
g.kilometerGraph.transformSave = false;
|
||||
g.off('selected', this.onSelected, this);
|
||||
}
|
||||
onSelected(): void {
|
||||
const station = this.app.selectedGraphics[0] as Station;
|
||||
this.app.setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(station),
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user