Squashed commit of the following:

commit f73b171f15
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Mon Aug 12 18:00:50 2024 +0800

    计轴区段的显示和状态（待与后端测试）

src/components/line-app/StateProperties.vue

@@ -37,6 +37,9 @@
       <car-washing-state
         v-else-if="lineStore.selectedGraphicType === CarWashing.Type"
       ></car-washing-state>
+      <axleCountingSection-state
+        v-else-if="lineStore.selectedGraphicType === AxleCountingSection.Type"
+      ></axleCountingSection-state>
     </div>
   </q-scroll-area>
 </template>
@@ -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();
 </script>

src/components/line-app/states/AxleCountingSectionState.vue

@@ -0,0 +1,115 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section class="flex justify-between">
+      <div class="text-h6">计轴区段状态</div>
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section>
+      <q-list dense>
+        <q-item v-for="(item, index) in list" :key="index">
+          <q-item-section>
+            <q-item-label>{{ item.label }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-item-label caption>{{
+              item.formatFn
+                ? item.formatFn(sectionState[item.key])
+                : sectionState[item.key]
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useLineStore } from 'src/stores/line-store';
+import { ref, watch, onMounted, onUnmounted, toRaw } from 'vue';
+import { AxleCountingSectionStates } from 'src/drawApp/graphics/AxleCountingSectionInteraction';
+import { AxleCountingSection } from 'src/graphics/axleCountingSection/AxleCountingSection';
+
+const lineStore = useLineStore();
+const sectionState = ref({
+  id: 0,
+  code: '',
+  occupied: false,
+});
+let copySelectGraphic: AxleCountingSection | null = null;
+
+interface KeyType {
+  label: string;
+  key: keyof AxleCountingSectionStates;
+  formatFn?(
+    v: AxleCountingSectionStates[keyof AxleCountingSectionStates]
+  ): string;
+}
+
+const list: KeyType[] = [
+  { label: '计轴区段索引', key: 'id' },
+  { label: '计轴区段名称', key: 'code' },
+  { label: '是否占用', key: 'occupied', formatFn: getName },
+];
+
+watch(
+  () => lineStore.selectedGraphics,
+  (val, oldVal) => {
+    if (oldVal?.length == 1 && oldVal[0] instanceof AxleCountingSection) {
+      unSubscribeState(oldVal[0]);
+    }
+    if (val?.length == 1 && val[0] instanceof AxleCountingSection) {
+      copySelectGraphic = toRaw(val[0]);
+      initSectionState(val[0] as AxleCountingSection);
+    } else {
+      copySelectGraphic = null;
+      sectionState.value = {
+        id: 0,
+        code: '',
+        occupied: false,
+      };
+    }
+  }
+);
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    initSectionState(lineStore.selectedGraphics[0] as AxleCountingSection);
+  }
+});
+
+function getName(v: boolean) {
+  if (v) return '是';
+  return '否';
+}
+
+function initSectionState(section: AxleCountingSection) {
+  copySelectGraphic = toRaw(section);
+  sectionState.value = {
+    id: section.datas.id,
+    code: section.datas.code,
+    occupied: section.states.occupied ?? false,
+  };
+  subscribeState(section);
+}
+
+function updateState(newVal: AxleCountingSection) {
+  sectionState.value = {
+    id: newVal.id,
+    code: sectionState.value.code,
+    occupied: newVal.states.occupied ?? false,
+  };
+}
+
+function subscribeState(g: AxleCountingSection) {
+  g.on('stateupdate', updateState);
+}
+
+function unSubscribeState(g: AxleCountingSection) {
+  g.off('stateupdate', updateState);
+}
+
+onUnmounted(() => {
+  if (copySelectGraphic) {
+    unSubscribeState(copySelectGraphic);
+  }
+});
+</script>

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 },
 ];

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<state.AxleCountingSectionState>();
+  }
+  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<AxleCountingSection> {
+  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();
+  }
+}

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,

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

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',
+  lineColor: '#5578b6',
-  lineWidth: 2,
+  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<IAxleCountingSectionData>();
   }
+  get states(): IAxleCountingSectionState {
+    return this.getStates<IAxleCountingSectionState>();
+  }
   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<AxleCountingSection> {
-  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;
   }
 }

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;