diff --git a/src/api/Simulation.ts b/src/api/Simulation.ts
index ab15288..92bfcf3 100644
--- a/src/api/Simulation.ts
+++ b/src/api/Simulation.ts
@@ -184,6 +184,53 @@ export async function ibpKeyOperation(params: IbpKeyOperationParams) {
   return await api.post(`${UriBase}/ibp/key/operation`, params);
 }
 
+export interface TccButtonOperationParams {
+  buttonId: number;
+  down: boolean;
+  mapId: number;
+  simulationId: string;
+  tccId: number;
+}
+export async function tccButtonOperation(params: TccButtonOperationParams) {
+  return await api.post(`${UriBase}/tcc/btn/operation`, params);
+}
+
+export interface TccKeyOperationParams {
+  simulationId: string;
+  mapId: number;
+  tccId: number;
+  val: boolean;
+  keyId: number;
+}
+
+export async function tccKeyOperation(params: TccKeyOperationParams) {
+  return await api.post(`${UriBase}/tcc/key/operation`, params);
+}
+
+export interface TccKeyDirOperationParams {
+  simulationId: string;
+  mapId: number;
+  tccId: number;
+  val: number;
+  keyId: number;
+}
+
+export async function tccKeyDirOperation(params: TccKeyDirOperationParams) {
+  return await api.post(`${UriBase}/tcc/key/operation`, params);
+}
+
+export interface TccHandleOperationParams {
+  simulationId: string;
+  mapId: number;
+  tccId: number;
+  val: number;
+  handleId: number;
+}
+
+export async function tccHandleOperation(params: TccHandleOperationParams) {
+  return await api.post(`${UriBase}/tcc/handle/operation`, params);
+}
+
 export function checkMapData(data: { mapProto: string }) {
   return api.post(`${UriBase}/check/data`, data);
 }
diff --git a/src/drawApp/graphics/TccButtonInteraction.ts b/src/drawApp/graphics/TccButtonInteraction.ts
index a85f510..191ef9a 100644
--- a/src/drawApp/graphics/TccButtonInteraction.ts
+++ b/src/drawApp/graphics/TccButtonInteraction.ts
@@ -11,6 +11,8 @@ import {
   ITccButtonState,
   TccButton,
 } from 'src/graphics/tccButton/TccButton';
+import { tccButtonOperation } from 'src/api/Simulation';
+import { errorNotify } from 'src/utils/CommonNotify';
 
 export class TccButtonData extends GraphicDataBase implements ITccButtonData {
   constructor(data?: tccGraphicData.TccButton) {
@@ -112,11 +114,22 @@ export class TccButtonOperateInteraction extends GraphicInteractionPlugin<TccBut
   }
 
   onClick(e: FederatedMouseEvent): void {
+    const simulationId = useLineStore().simulationId;
+    const mapId = useLineStore().mapId;
+    const tccId = useTccStore().tccId;
     const target = e.target as DisplayObject;
     const tccButton = target.getGraphic<TccButton>();
-    if (!tccButton) return;
+    if (!tccButton || !simulationId || !mapId) return;
     tccButton.states.down = !tccButton.states.down;
     tccButton.doRepaint();
-    console.log(tccButton.states.down);
+    /* tccButtonOperation({
+      simulationId,
+      mapId,
+      buttonId: tccButton.id,
+      tccId,
+      down: !tccButton.states.down,
+    }).catch((err) => {
+      errorNotify('操作失败', { message: err.origin.response.data.title });
+    }); */
   }
 }
diff --git a/src/drawApp/graphics/TccHandleInteraction.ts b/src/drawApp/graphics/TccHandleInteraction.ts
index 0b7dc02..9f60ad3 100644
--- a/src/drawApp/graphics/TccHandleInteraction.ts
+++ b/src/drawApp/graphics/TccHandleInteraction.ts
@@ -10,6 +10,9 @@ import { state } from 'src/protos/device_state';
 import { GraphicInteractionPlugin, IGraphicScene, JlGraphic } from 'jl-graphic';
 import { type FederatedMouseEvent, DisplayObject } from 'pixi.js';
 import { useTccStore } from 'src/stores/tcc-store';
+import { useLineStore } from 'src/stores/line-store';
+import { tccHandleOperation } from 'src/api/Simulation';
+import { errorNotify } from 'src/utils/CommonNotify';
 
 export class TccHandleData extends GraphicDataBase implements ITccHandleData {
   constructor(data?: tccGraphicData.TccHandle) {
@@ -101,14 +104,14 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
     g._tccHandle.onmousedown = (e) => {
       this.onMouseDown(e);
     };
-    g._tccHandle.onmouseup = () => {
-      this.isMouseDown = false;
+    g._tccHandle.onmouseup = (e) => {
+      this.onMouseUp(e);
     };
     g.onmousemove = (e) => {
       this.onMouseMove(e);
     };
-    g.onmouseleave = () => {
-      this.isMouseDown = false;
+    g.onmouseleave = (e) => {
+      this.onMouseMove(e);
     };
   }
   unbind(g: TccHandle): void {
@@ -132,6 +135,7 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
     if (!tccHandle) return;
     if (
       this.isMouseDown &&
+      useTccStore().canvasMouseDown &&
       tccHandle._tccHandle.y > -145 &&
       tccHandle._tccHandle.y < 145
     ) {
@@ -144,4 +148,23 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
       }
     }
   }
+  onMouseUp(e: FederatedMouseEvent) {
+    this.isMouseDown = false;
+    const simulationId = useLineStore().simulationId;
+    const mapId = useLineStore().mapId;
+    const tccId = useTccStore().tccId;
+    const target = e.target as DisplayObject;
+    const tccHandle = target.getGraphic<TccHandle>();
+    if (!tccHandle || !simulationId || !mapId) return;
+    tccHandle.doRepaint();
+    /* tccHandleOperation({
+      simulationId,
+      mapId,
+      handleId: tccHandle.id,
+      tccId,
+      val: tccHandle._tccHandle.y,
+    }).catch((err) => {
+      errorNotify('操作失败', { message: err.origin.response.data.title });
+    }); */
+  }
 }
diff --git a/src/drawApp/graphics/TccKeyInteraction.ts b/src/drawApp/graphics/TccKeyInteraction.ts
index 292c6fa..75a16aa 100644
--- a/src/drawApp/graphics/TccKeyInteraction.ts
+++ b/src/drawApp/graphics/TccKeyInteraction.ts
@@ -4,8 +4,17 @@ import { tccGraphicData } from 'src/protos/tccGraphics';
 import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
 import { state } from 'src/protos/device_state';
 import { GraphicInteractionPlugin, IGraphicScene, JlGraphic } from 'jl-graphic';
-import { type FederatedMouseEvent, DisplayObject, Point } from 'pixi.js';
+import {
+  type FederatedMouseEvent,
+  DisplayObject,
+  Point,
+  Sprite,
+} from 'pixi.js';
 import { useTccStore } from 'src/stores/tcc-store';
+import { threadId } from 'worker_threads';
+import { useLineStore } from 'src/stores/line-store';
+import { tccKeyDirOperation, tccKeyOperation } from 'src/api/Simulation';
+import { errorNotify } from 'src/utils/CommonNotify';
 
 export class TccKeyData extends GraphicDataBase implements ITccKeyData {
   constructor(data?: tccGraphicData.TccKey) {
@@ -80,13 +89,144 @@ export class TccKeyState extends GraphicStateBase implements ITccKeyState {
   }
 }
 
-export class TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
-  static Name = 'TccKeyInteraction';
+export enum KeyRotationMethod {
+  jumpChange,
+  gradientChange,
+}
+export interface IKeyInteractionConfig {
+  gearPositionAmount?: number;
+  keyRotationMethod: KeyRotationMethod;
+  doAfterChangeRotation: (g: JlGraphic, rotation: number) => void;
+  doFinish: () => void;
+}
+export abstract class KeyInteraction<
+  G extends JlGraphic
+> extends GraphicInteractionPlugin<G> {
   isMouseDown = false;
-  changeOnce = false;
+  ratatingSprite: Sprite = new Sprite();
   mouseDownBeginPos = new Point();
+  mouseDownBeginRotation = 0;
+  keyInteractionConfig: IKeyInteractionConfig;
+  constructor(
+    name: string,
+    app: IGraphicScene,
+    keyInteractionConfig: IKeyInteractionConfig
+  ) {
+    super(name, app);
+    this.keyInteractionConfig = keyInteractionConfig;
+  }
+  totalBind(g: G): void {
+    g.onmousemove = (e) => {
+      this.onMousemove(e);
+    };
+    g.onmouseup = (e) => {
+      e.stopPropagation();
+      this.isMouseDown = false;
+      this.keyInteractionConfig.doFinish();
+    };
+  }
+  totalUnbind(g: G): void {
+    g.onmousemove = null;
+    g.onmouseup = null;
+  }
+  keyBind(g: Sprite): void {
+    this.ratatingSprite = g;
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.onmousedown = (e) => {
+      this.onMouseDown(e);
+    };
+  }
+  keyUnbind(g: Sprite): void {
+    g.eventMode = 'none';
+    g.onmousedown = null;
+  }
+  onMouseDown(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const g = target.getGraphic<G>();
+    if (!g) return;
+    this.isMouseDown = true;
+    this.mouseDownBeginPos = this.app.toCanvasCoordinates(e.global);
+    this.mouseDownBeginRotation = this.ratatingSprite.rotation;
+  }
+  onMousemove(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const g = target.getGraphic<G>();
+    if (!g) return;
+    if (this.isMouseDown && useTccStore().canvasMouseDown) {
+      const mouseEndPos = this.app.toCanvasCoordinates(e.global);
+      const { angle, direction } = calculateAngleAndDirection(
+        this.mouseDownBeginPos,
+        g.position,
+        mouseEndPos
+      );
+      if (
+        this.keyInteractionConfig.keyRotationMethod ==
+        KeyRotationMethod.jumpChange
+      ) {
+        if (direction == 'ssz') {
+          if (angle < 45) {
+            this.ratatingSprite.rotation = this.mouseDownBeginRotation;
+          }
+          if (angle >= 45 && angle < 90) {
+            this.ratatingSprite.rotation =
+              this.mouseDownBeginRotation + Math.PI / 4;
+          } else if (
+            angle >= 90 &&
+            this.mouseDownBeginRotation == -Math.PI / 4
+          ) {
+            this.ratatingSprite.rotation =
+              this.mouseDownBeginRotation + Math.PI / 2;
+          }
+          this.keyInteractionConfig.doAfterChangeRotation(
+            g,
+            this.ratatingSprite.rotation
+          );
+        }
+        if (direction == 'nsz') {
+          if (angle < 45) {
+            this.ratatingSprite.rotation = this.mouseDownBeginRotation;
+          } else if (angle >= 45 && angle < 90) {
+            this.ratatingSprite.rotation =
+              this.mouseDownBeginRotation - Math.PI / 4;
+          } else if (
+            angle >= 90 &&
+            this.mouseDownBeginRotation == Math.PI / 4
+          ) {
+            this.ratatingSprite.rotation =
+              this.mouseDownBeginRotation - Math.PI / 2;
+          }
+          this.keyInteractionConfig.doAfterChangeRotation(
+            g,
+            this.ratatingSprite.rotation
+          );
+        }
+      } else {
+        if (direction == 'ssz') {
+          this.ratatingSprite.rotation =
+            this.mouseDownBeginRotation + (angle / 180) * Math.PI;
+        } else {
+          this.ratatingSprite.rotation =
+            this.mouseDownBeginRotation - (angle / 180) * Math.PI;
+        }
+      }
+    }
+  }
+}
+
+export class TccKeyInteraction extends KeyInteraction<TccKey> {
+  static Name = 'TccKeyInteraction';
   constructor(app: IGraphicScene) {
-    super(TccKeyInteraction.Name, app);
+    super(TccKeyInteraction.Name, app, {
+      gearPositionAmount: 3,
+      keyRotationMethod: KeyRotationMethod.jumpChange,
+      doAfterChangeRotation: (g: JlGraphic, rotation: number) => {
+        this.changeState(g, rotation);
+      },
+      doFinish: () => {
+        this.onFinish();
+      },
+    });
   }
   static init(app: IGraphicScene) {
     return new TccKeyInteraction(app);
@@ -103,20 +243,8 @@ export class TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
     ) {
       g._tccKey.on('_leftclick', this.onClick);
     } else {
-      g._tccKey.onmousedown = (e) => {
-        this.onMouseDown(e);
-      };
-      g._tccKey.onmouseup = () => {
-        this.isMouseDown = false;
-        this.changeOnce = false;
-      };
-      g.onmousemove = (e) => {
-        this.onMousemove(e);
-      };
-      g.onmouseleave = () => {
-        this.isMouseDown = false;
-        this.changeOnce = false;
-      };
+      super.totalBind(g);
+      super.keyBind(g._tccKey);
     }
   }
   unbind(g: TccKey): void {
@@ -127,61 +255,59 @@ export class TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
     ) {
       g._tccKey.off('_leftclick', this.onClick);
     } else {
-      g._tccKey.onmousedown = null;
-      g._tccKey.onmouseup = null;
-      g.onmousemove = null;
-      g.onmouseleave = null;
+      super.totalUnbind(g);
+      super.keyUnbind(g._tccKey);
     }
   }
   onClick(e: FederatedMouseEvent): void {
+    const simulationId = useLineStore().simulationId;
+    const mapId = useLineStore().mapId;
+    const tccId = useTccStore().tccId;
     const target = e.target as DisplayObject;
     const tccKey = target.getGraphic<TccKey>();
-    if (!tccKey) return;
+    if (!tccKey || !simulationId || !mapId) return;
     tccKey.state.position = tccKey?.state.position == 0 ? 1 : 0;
     tccKey.doRepaint();
+    /*  tccKeyOperation({
+      simulationId,
+      mapId,
+      keyId: tccKey.id,
+      tccId,
+      val: !tccKey.state.position,
+    }).catch((err) => {
+      errorNotify('操作失败', { message: err.origin.response.data.title });
+    }); */
   }
-  onMouseDown(e: FederatedMouseEvent) {
-    const target = e.target as DisplayObject;
-    const tccKey = target.getGraphic<TccKey>();
-    if (!tccKey) return;
-    this.isMouseDown = true;
-    this.mouseDownBeginPos = tccKey
-      .getGraphicApp()
-      .getScene('tcc')
-      .toCanvasCoordinates(e.global);
-  }
-  onMousemove(e: FederatedMouseEvent) {
-    const target = e.target as DisplayObject;
-    const tccKey = target.getGraphic<TccKey>();
-    if (!tccKey) return;
-    if (this.isMouseDown) {
-      const mouseEndPos = tccKey
-        .getGraphicApp()
-        .getScene('tcc')
-        .toCanvasCoordinates(e.global);
-      const { angle, direction } = calculateAngleAndDirection(
-        this.mouseDownBeginPos,
-        tccKey.position,
-        mouseEndPos
-      );
-      if (
-        direction == 'ssz' &&
-        ((angle > 45 && !this.changeOnce) || (angle > 90 && this.changeOnce)) &&
-        (tccKey._tccKey.rotation == -Math.PI / 4 ||
-          tccKey._tccKey.rotation == 0)
-      ) {
-        this.changeOnce = true;
-        tccKey._tccKey.rotation += Math.PI / 4;
-      }
-      if (
-        direction == 'nsz' &&
-        ((angle > 45 && !this.changeOnce) || (angle > 90 && this.changeOnce)) &&
-        (tccKey._tccKey.rotation == Math.PI / 4 || tccKey._tccKey.rotation == 0)
-      ) {
-        this.changeOnce = true;
-        tccKey._tccKey.rotation -= Math.PI / 4;
-      }
+  changeState(g: JlGraphic, rotation: number) {
+    let position = 0;
+    switch (rotation) {
+      case Math.PI / 4:
+        position = 0;
+        break;
+      case -Math.PI / 4:
+        position = 1;
+        break;
+      default:
+        position = 2;
+        break;
     }
+    (g as TccKey).state.position = position;
+    g.doRepaint();
+  }
+  onFinish() {
+    const simulationId = useLineStore().simulationId;
+    const mapId = useLineStore().mapId;
+    const tccId = useTccStore().tccId;
+    if (!simulationId || !mapId) return;
+    /*  tccKeyDirOperation({
+      simulationId,
+      mapId,
+      keyId: g.id,
+      tccId,
+      val: (g as TccKey).state.position,
+    }).catch((err) => {
+      errorNotify('操作失败', { message: err.origin.response.data.title });
+    }); */
   }
 }
 
diff --git a/src/drawApp/tccScene.ts b/src/drawApp/tccScene.ts
index c949bfb..c007eb9 100644
--- a/src/drawApp/tccScene.ts
+++ b/src/drawApp/tccScene.ts
@@ -53,6 +53,17 @@ export function initTccScene(lineApp: IGraphicApp, sceneName: string) {
   tccScene.on('postdataloaded', () => {
     handleSubscribe(tccScene);
   });
+  const tccStore = useTccStore();
+  tccScene.canvas.onmousedown = () => {
+    tccStore.canvasMouseDown = true;
+  };
+  tccScene.canvas.onmouseup = () => {
+    tccStore.canvasMouseDown = false;
+  };
+  lineApp.on('destroy', () => {
+    tccScene.canvas.onmousedown = null;
+    tccScene.canvas.onmouseup = null;
+  });
   return tccScene;
 }
 
diff --git a/src/graphics/tccKey/TccKey.ts b/src/graphics/tccKey/TccKey.ts
index a87adbf..8a9a7d3 100644
--- a/src/graphics/tccKey/TccKey.ts
+++ b/src/graphics/tccKey/TccKey.ts
@@ -66,6 +66,17 @@ export class TccKey extends JlGraphic {
       this._tccKey.rotation =
         this.state.position == 0 ? Math.PI / 4 : -Math.PI / 4;
     } else {
+      switch (this.state.position) {
+        case 0:
+          this._tccKey.rotation = Math.PI / 4;
+          break;
+        case 1:
+          this._tccKey.rotation = -Math.PI / 4;
+          break;
+        default:
+          this._tccKey.rotation = 0;
+          break;
+      }
       this._tccKey.texture = this.tccKeyTextures.tccKnob;
       this._tccKey.scale.set(0.6);
     }
diff --git a/src/stores/tcc-store.ts b/src/stores/tcc-store.ts
index f28f759..1b7c1de 100644
--- a/src/stores/tcc-store.ts
+++ b/src/stores/tcc-store.ts
@@ -7,6 +7,7 @@ export const useTccStore = defineStore('tcc', {
     trainControlMapId: 0,
     tccId: 0,
     isTccDialogOpen: false,
+    canvasMouseDown: false,
   }),
   actions: {
     getTccScene() {