From fbc12f12ee7fe83f0e174da80cb1c5330cb8c04c Mon Sep 17 00:00:00 2001 From: joylink_zhaoerwei Date: Mon, 12 Aug 2024 18:02:03 +0800 Subject: [PATCH] Squashed commit of the following: MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit commit f73b171f153cd170f3ff3236b4868d56f5622851 Author: joylink_zhaoerwei Date: Mon Aug 12 18:00:50 2024 +0800 计轴区段的显示和状态（待与后端测试） --- src/components/line-app/StateProperties.vue | 5 + .../states/AxleCountingSectionState.vue | 115 ++++++++++++++++++ .../line-app/states/SectionState.vue | 4 +- .../AxleCountingSectionInteraction.ts | 88 +++++++++++++- src/drawApp/jkApp.ts | 4 +- src/drawApp/lineScene.ts | 19 ++- .../AxleCountingSection.ts | 31 ++++- .../AxleCountingSectionAssistant.ts | 2 +- 8 files changed, 254 insertions(+), 14 deletions(-) create mode 100644 src/components/line-app/states/AxleCountingSectionState.vue diff --git a/src/components/line-app/StateProperties.vue b/src/components/line-app/StateProperties.vue index adb2b83..308d232 100644 --- a/src/components/line-app/StateProperties.vue +++ b/src/components/line-app/StateProperties.vue @@ -37,6 +37,9 @@ + @@ -71,6 +74,8 @@ import { FloodGate } from 'src/graphics/floodGate/FloodGate'; import FloodGateState from './states/FloodGateState.vue'; import CarWashingState from './states/CarWashingState.vue'; import { CarWashing } from 'src/graphics/carWashing/CarWashing'; +import AxleCountingSectionState from './states/AxleCountingSectionState.vue'; +import { AxleCountingSection } from 'src/graphics/axleCountingSection/AxleCountingSection'; const lineStore = useLineStore(); diff --git a/src/components/line-app/states/AxleCountingSectionState.vue b/src/components/line-app/states/AxleCountingSectionState.vue new file mode 100644 index 0000000..64be335 --- /dev/null +++ b/src/components/line-app/states/AxleCountingSectionState.vue @@ -0,0 +1,115 @@ + + diff --git a/src/components/line-app/states/SectionState.vue b/src/components/line-app/states/SectionState.vue index 6468f7a..8baf77c 100644 --- a/src/components/line-app/states/SectionState.vue +++ b/src/components/line-app/states/SectionState.vue @@ -68,8 +68,8 @@ interface KeyType { const list: KeyType[] = [ { label: '轨道索引', key: 'id' }, { label: '轨道名称', key: 'code' }, - { label: '是否占用', key: 'axleFault', formatFn: getName }, - { label: '是否计轴故障', key: 'occupied', formatFn: getName }, + { label: '是否占用', key: 'occupied', formatFn: getName }, + { label: '是否计轴故障', key: 'axleFault', formatFn: getName }, { label: '是否计轴复位', key: 'axleDrst', formatFn: getName }, { label: '是否计轴预复位', key: 'axlePdrst', formatFn: getName }, ]; diff --git a/src/drawApp/graphics/AxleCountingSectionInteraction.ts b/src/drawApp/graphics/AxleCountingSectionInteraction.ts index 4372843..60e5b4d 100644 --- a/src/drawApp/graphics/AxleCountingSectionInteraction.ts +++ b/src/drawApp/graphics/AxleCountingSectionInteraction.ts @@ -1,12 +1,17 @@ import * as pb_1 from 'google-protobuf'; -import { GraphicDataBase } from './GraphicDataBase'; +import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase'; import { IAxleCountingSectionData, AxleCountingSection, ITurnoutPosRefData, + IAxleCountingSectionState, } from 'src/graphics/axleCountingSection/AxleCountingSection'; import { graphicData } from 'src/protos/stationLayoutGraphics'; import { IPointData } from 'pixi.js'; +import { state } from 'src/protos/device_state'; +import { useLineStore } from 'src/stores/line-store'; +import { GraphicInteractionPlugin, IGraphicScene, JlGraphic } from 'jl-graphic'; +import { AxleCountingSectionGraphicHitArea } from 'src/graphics/axleCountingSection/AxleCountingSectionAssistant'; export class AxleCountingSectionData extends GraphicDataBase @@ -68,3 +73,84 @@ export class AxleCountingSectionData return pb_1.Message.equals(this.data, other.data); } } + +export class AxleCountingSectionStates + extends GraphicStateBase + implements IAxleCountingSectionState +{ + constructor(proto?: state.AxleCountingSectionState) { + let states; + if (proto) { + states = proto; + } else { + states = new state.AxleCountingSectionState(); + } + super(states, AxleCountingSection.Type); + } + get code(): string { + return this.states.id + ''; + } + get id(): number { + return this.states.id; + } + set id(id: number) { + this.states.id = id; + } + get occupied(): boolean { + return this.states.occupied; + } + set occupied(occupied: boolean) { + this.states.occupied = occupied; + } + get states(): state.AxleCountingSectionState { + return this.getState(); + } + clone(): AxleCountingSectionStates { + return new AxleCountingSectionStates(this.states.cloneMessage()); + } + copyFrom(data: GraphicStateBase): void { + pb_1.Message.copyInto(data._state, this._state); + } + eq(data: GraphicStateBase): boolean { + return pb_1.Message.equals(this._state, data._state); + } +} + +export class AxleCountingSectionOperateInteraction extends GraphicInteractionPlugin { + static Name = 'AxleCountingSection_operate_menu'; + constructor(app: IGraphicScene) { + super(AxleCountingSectionOperateInteraction.Name, app); + } + static init(app: IGraphicScene) { + return new AxleCountingSectionOperateInteraction(app); + } + filter(...grahpics: JlGraphic[]): AxleCountingSection[] | undefined { + return grahpics + .filter((g) => g.type === AxleCountingSection.Type) + .map((g) => g as AxleCountingSection); + } + bind(g: AxleCountingSection): void { + g.lineGraphic.eventMode = 'static'; + g.lineGraphic.cursor = 'pointer'; + g.lineGraphic.hitArea = new AxleCountingSectionGraphicHitArea(g); + g.lineGraphic.selectable = true; + g.selectable = true; + g.labelGraphic.eventMode = 'static'; + g.labelGraphic.cursor = 'pointer'; + g.labelGraphic.selectable = true; + g.on('_leftclick', this.onLeftClick, this); + } + + unbind(g: AxleCountingSection): void { + g.lineGraphic.eventMode = 'none'; + g.lineGraphic.scalable = false; + g.lineGraphic.selectable = false; + g.selectable = false; + g.labelGraphic.eventMode = 'none'; + g.labelGraphic.selectable = false; + g.off('_leftclick', this.onLeftClick, this); + } + onLeftClick() { + useLineStore().stateProCountIncrease(); + } +} diff --git a/src/drawApp/jkApp.ts b/src/drawApp/jkApp.ts index dcf3350..1f5837c 100644 --- a/src/drawApp/jkApp.ts +++ b/src/drawApp/jkApp.ts @@ -16,7 +16,7 @@ import { AxleCountingSectionTemplate, } from 'src/graphics/axleCountingSection/AxleCountingSection'; import { AxleCountingSectionDraw } from 'src/graphics/axleCountingSection/AxleCountingSectionAssistant'; -import { AxleCountingSectionData } from './graphics/AxleCountingSectionInteraction'; +import { AxleCountingSectionData, AxleCountingSectionStates } from './graphics/AxleCountingSectionInteraction'; import { SectionLink, SectionLinkTemplate, @@ -104,7 +104,7 @@ export function initJkDrawApp(): IDrawApp { new SectionLinkDraw(app, new SectionLinkTemplate(new SectionLinkData())); new AxleCountingSectionDraw( app, - new AxleCountingSectionTemplate(new AxleCountingSectionData()) + new AxleCountingSectionTemplate(new AxleCountingSectionData(), new AxleCountingSectionStates()) ); new EsbButtonDraw( app, diff --git a/src/drawApp/lineScene.ts b/src/drawApp/lineScene.ts index 9199b75..a6dff24 100644 --- a/src/drawApp/lineScene.ts +++ b/src/drawApp/lineScene.ts @@ -106,7 +106,11 @@ import { SectionLinkData, SectionLinkOperateInteraction, } from './graphics/SectionLinkInteraction'; -import { AxleCountingSectionData } from './graphics/AxleCountingSectionInteraction'; +import { + AxleCountingSectionData, + AxleCountingSectionOperateInteraction, + AxleCountingSectionStates, +} from './graphics/AxleCountingSectionInteraction'; import { LogicSectionData } from './graphics/LogicSectionInteraction'; import { Notify, QNotifyUpdateOptions, Dialog } from 'quasar'; import { @@ -308,7 +312,10 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) { new TrainWindowTemplate(new TrainWindowData()), new SeparatorTemplate(new SeparatorData()), new SectionLinkTemplate(new SectionLinkData()), - new AxleCountingSectionTemplate(new AxleCountingSectionData()), + new AxleCountingSectionTemplate( + new AxleCountingSectionData(), + new AxleCountingSectionStates() + ), new LogicSectionTemplate(new LogicSectionData()), new StopPositionTemplate(new StopPositionData()), new SpksSwitchTemplate(new SpksSwitchData()), @@ -353,6 +360,9 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) { if (categoryType === CategoryType.TH) { GatedBoxOperateInteraction.init(lineScene); } + if (categoryType === CategoryType.JK) { + AxleCountingSectionOperateInteraction.init(lineScene); + } // 画布右键菜单 lineScene.registerMenu(DefaultCanvasMenu); lineScene.canvas.on('_rightclick', (e) => { @@ -424,6 +434,11 @@ function handleSubscribe(lineScene: IGraphicScene) { states.push(new SectionStates(item)); } }); + storage.allStatus.axleCountingSection.forEach((item) => { + if (item.id) { + states.push(new AxleCountingSectionStates(item)); + } + }); storage.allStatus.psdState.forEach((item) => { if (item.id) { states.push(new ScreenDoorState(item)); diff --git a/src/graphics/axleCountingSection/AxleCountingSection.ts b/src/graphics/axleCountingSection/AxleCountingSection.ts index 806cba9..6cbb627 100644 --- a/src/graphics/axleCountingSection/AxleCountingSection.ts +++ b/src/graphics/axleCountingSection/AxleCountingSection.ts @@ -2,6 +2,7 @@ import { Graphics, IPointData } from 'pixi.js'; import { GraphicData, GraphicRelationParam, + GraphicState, JlGraphic, JlGraphicTemplate, VectorText, @@ -9,6 +10,7 @@ import { } from 'jl-graphic'; import { IRelatedRefData, protoPort2Data } from '../CommonGraphics'; import { DevicePort } from '../section/Section'; +import { state } from 'src/protos/device_state'; export interface ITurnoutPosRefData { get id(): number; //道岔的ID @@ -34,10 +36,17 @@ export interface IAxleCountingSectionData extends GraphicData { } export const AxleCountingSectionConsts = { - lineColor: '0xff0000', - lineWidth: 2, + lineColor: '#5578b6', + occupiedColor: '#f00', + lineWidth: 5, }; +export interface IAxleCountingSectionState extends GraphicState { + id: number; + type?: state.SectionType; + occupied?: boolean; //计轴区段占用 +} + export class AxleCountingSection extends JlGraphic { static Type = 'AxleCountingSection'; lineGraphic: Graphics; @@ -48,7 +57,7 @@ export class AxleCountingSection extends JlGraphic { this.labelGraphic = new VectorText(); this.labelGraphic.setVectorFontSize(14); this.labelGraphic.anchor.set(0.5); - this.labelGraphic.style.fill = '0xff0000'; + this.labelGraphic.style.fill = '0xffffff'; this.labelGraphic.transformSave = true; this.labelGraphic.name = 'label'; this.transformSave = true; @@ -61,6 +70,9 @@ export class AxleCountingSection extends JlGraphic { get datas(): IAxleCountingSectionData { return this.getDatas(); } + get states(): IAxleCountingSectionState { + return this.getStates(); + } doRepaint(): void { if (this.datas.points.length < 2) { throw new Error('AxleCountingSection坐标数据异常'); @@ -68,7 +80,9 @@ export class AxleCountingSection extends JlGraphic { this.lineGraphic.clear(); this.lineGraphic.lineStyle( AxleCountingSectionConsts.lineWidth, - AxleCountingSectionConsts.lineColor + this.states.occupied + ? AxleCountingSectionConsts.occupiedColor + : AxleCountingSectionConsts.lineColor ); this.datas.points.forEach((p, i) => { if (i !== 0) { @@ -77,7 +91,7 @@ export class AxleCountingSection extends JlGraphic { this.lineGraphic.moveTo(p.x, p.y); } }); - this.labelGraphic.text = this.datas.code; + this.labelGraphic.text = this.datas.code + '（计）'; const labelPosition = this.datas.childTransforms?.find( (t) => t.name === this.labelGraphic.name )?.transform.position; @@ -133,14 +147,19 @@ export class AxleCountingSection extends JlGraphic { } export class AxleCountingSectionTemplate extends JlGraphicTemplate { - constructor(dataTemplate: IAxleCountingSectionData) { + constructor( + dataTemplate: IAxleCountingSectionData, + stateTemplate?: IAxleCountingSectionState + ) { super(AxleCountingSection.Type, { dataTemplate, + stateTemplate, }); } new(): AxleCountingSection { const axleCountingSection = new AxleCountingSection(); axleCountingSection.loadData(this.datas); + axleCountingSection.loadState(this.states); return axleCountingSection; } } diff --git a/src/graphics/axleCountingSection/AxleCountingSectionAssistant.ts b/src/graphics/axleCountingSection/AxleCountingSectionAssistant.ts index 0c775b8..4f32ece 100644 --- a/src/graphics/axleCountingSection/AxleCountingSectionAssistant.ts +++ b/src/graphics/axleCountingSection/AxleCountingSectionAssistant.ts @@ -246,7 +246,7 @@ export class AxleCountingSectionDraw extends GraphicDrawAssistant< }); } } -class AxleCountingSectionGraphicHitArea implements IHitArea { +export class AxleCountingSectionGraphicHitArea implements IHitArea { axleCountingSection: AxleCountingSection; constructor(axleCountingSection: AxleCountingSection) { this.axleCountingSection = axleCountingSection;