手柄操作请求频率+显示位置百分比

src/drawApp/graphics/TccHandleInteraction.ts

@@ -3,6 +3,7 @@ import {
   ITccHandleData,
   ITccHandleState,
   TccHandle,
+  zeroOffset,
 } from 'src/graphics/tccHandle/TccHandle';
 import { tccGraphicData } from 'src/protos/tccGraphics';
 import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
@@ -105,7 +106,7 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
     };
     g._tccHandle.onmouseup = (e) => {
       e.stopPropagation();
-      this.onMouseUp();
+      this.onMouseUp(e);
     };
     g.onmousemove = (e) => {
       e.stopPropagation();
@@ -123,6 +124,7 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
     const target = e.target as DisplayObject;
     const tccHandle = target.getGraphic<TccHandle>();
     if (!tccHandle) return;
+    tccHandle.canDoRepaint = false;
     useTccStore().tccHandleId = tccHandle.id;
     useTccStore().mouseDownOnTccHandle = true;
     this.isMouseDown = true;
@@ -146,13 +148,35 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
       } else if (tccHandle._tccHandle.y <= -145) {
         tccHandle._tccHandle.y = -144;
       }
-      clearTimeout(this.timeout);
+      let transFormHandleVal = 0;
-      this.timeout = setTimeout(() => {
+      if (
-        useTccStore().onMouseUpFromTccHandle();
+        tccHandle._tccHandle.y >= -zeroOffset &&
-      }, 100);
+        tccHandle._tccHandle.y <= zeroOffset
+      ) {
+        tccHandle._tccHandle.y = 0;
+      } else if (tccHandle._tccHandle.y < -zeroOffset) {
+        transFormHandleVal = tccHandle._tccHandle.y + zeroOffset;
+      } else {
+        transFormHandleVal = tccHandle._tccHandle.y - zeroOffset;
+      }
+      tccHandle._stateVal = Number(
+        (-(transFormHandleVal / (144 - zeroOffset)) * 100).toFixed()
+      );
+      tccHandle.labelGraphic.text = Math.abs(tccHandle._stateVal) + '%';
+      tccHandle.labelGraphic.y = tccHandle._tccHandle.y;
+      if (this.timeout == undefined) {
+        this.timeout = setTimeout(() => {
+          useTccStore().onMouseUpFromTccHandle();
+          this.timeout = undefined;
+        }, 100);
+      }
     }
   }
-  onMouseUp() {
+  onMouseUp(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const tccHandle = target.getGraphic<TccHandle>();
+    if (!tccHandle) return;
+    tccHandle.canDoRepaint = true;
     this.isMouseDown = false;
     useTccStore().mouseDownOnTccHandle = false;
   }

src/graphics/tccHandle/TccHandle.ts

@@ -3,6 +3,7 @@ import {
   GraphicState,
   JlGraphic,
   JlGraphicTemplate,
+  VectorText,
 } from 'jl-graphic';
 import Tcc_Handle_Assets from './tcc-handle-spritesheet.png';
 import Tcc_Handle_JSON from './tcc-handle-data.json';
@@ -30,7 +31,9 @@ export class TccHandle extends JlGraphic {
   _tccHandle: Sprite;
   _tccHandleBackground: Sprite;
   tccHandleTextures: TccHandleTextures;
-  __state = 0;
+  labelGraphic = new VectorText();
+  _stateVal = 0;
+  canDoRepaint = true;
 
   constructor(tccHandleTextures: TccHandleTextures) {
     super(TccHandle.Type);
@@ -44,6 +47,8 @@ export class TccHandle extends JlGraphic {
     this._tccHandleBackground.position.x = -20;
     this.addChild(this._tccHandleBackground);
     this.addChild(this._tccHandle);
+    this.setTextGraphic(this.labelGraphic);
+    this.addChild(this.labelGraphic);
   }
   get code(): string {
     return this.datas.code;
@@ -55,6 +60,7 @@ export class TccHandle extends JlGraphic {
     return this.getStates<ITccHandleState>();
   }
   doRepaint(): void {
+    if (!this.canDoRepaint) return;
     const pos = -(this.state.gear * (144 - zeroOffset)) / 100;
     if (pos > 0) {
       this._tccHandle.y = pos + zeroOffset;
@@ -63,8 +69,16 @@ export class TccHandle extends JlGraphic {
     } else {
       this._tccHandle.y = 0;
     }
+    this.labelGraphic.y = this._tccHandle.y;
+    this.labelGraphic.text = Math.abs(this.state.gear) + '%';
     this._tccHandle.texture = this.tccHandleTextures.tccHandle;
   }
+  setTextGraphic(g: VectorText) {
+    g.position.x = 50;
+    g.setVectorFontSize(15);
+    g.anchor.set(0.5);
+    g.style.fill = '0xff0000';
+  }
 }
 
 export class TccHandleTemplate extends JlGraphicTemplate<TccHandle> {

src/stores/tcc-store.ts

@@ -5,7 +5,7 @@ import { useLineStore } from './line-store';
 import { tccOperation } from 'src/api/Simulation';
 import { errorNotify } from 'src/utils/CommonNotify';
 import { request } from 'src/protos/request';
-import { TccHandle, zeroOffset } from 'src/graphics/tccHandle/TccHandle';
+import { TccHandle } from 'src/graphics/tccHandle/TccHandle';
 import { TccKey } from 'src/graphics/tccKey/TccKey';
 import { IGraphicApp } from 'jl-graphic';
 
@@ -47,27 +47,13 @@ export const useTccStore = defineStore('tcc', {
         .getScene(`tcc${this.tccId}`)
         .queryStore.queryById<TccHandle>(this.tccHandleId);
       if (!simulationId) return;
-      let transFormHandleVal = 0;
-      if (
-        tccHandle._tccHandle.y >= -zeroOffset &&
-        tccHandle._tccHandle.y <= zeroOffset
-      ) {
-        tccHandle._tccHandle.y = 0;
-      } else if (tccHandle._tccHandle.y < -zeroOffset) {
-        transFormHandleVal = tccHandle._tccHandle.y + zeroOffset;
-      } else {
-        transFormHandleVal = tccHandle._tccHandle.y - zeroOffset;
-      }
-      const handleVal = Number(
-        (-(transFormHandleVal / (144 - zeroOffset)) * 100).toFixed()
-      );
       tccOperation({
         simulationId,
         trainId: this.tccId + '',
         deviceId: this.tccHandleId,
         controlType: request.TrainControl.TrainControlType.HANDLER,
         handler: {
-          val: handleVal,
+          val: tccHandle._stateVal,
         },
       }).catch((err) => {
         errorNotify('操作失败', { message: err.origin.response.data.title });