diff --git a/package-lock.json b/package-lock.json
index 9e14ef8..a1aff0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@quasar/extras": "^1.16.4",
         "axios": "^1.2.1",
+        "google-protobuf": "^3.21.2",
         "jl-graphic": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#v0.1.15",
         "js-base64": "^3.7.5",
         "pinia": "^2.0.11",
@@ -3990,6 +3991,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/google-protobuf": {
+      "version": "3.21.4",
+      "resolved": "https://registry.npmmirror.com/google-protobuf/-/google-protobuf-3.21.4.tgz",
+      "integrity": "sha512-MnG7N936zcKTco4Jd2PX2U96Kf9PxygAPKBug+74LHzmHXmceN16MmRcdgZv+DGef/S9YvQAfRsNCn4cjf9yyQ=="
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
diff --git a/package.json b/package.json
index 187a4a0..f283802 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "axios": "^1.2.1",
     "pinia": "^2.0.11",
     "js-base64": "^3.7.5",
+    "google-protobuf": "^3.21.2",
     "jl-graphic": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#v0.1.15"
   },
   "devDependencies": {
diff --git a/scripts/proto.cjs b/scripts/proto.cjs
index 12d7e9a..46b6799 100644
--- a/scripts/proto.cjs
+++ b/scripts/proto.cjs
@@ -47,11 +47,11 @@ function buildGenerateCmd(name, path = []) {
 }
 
 function main() {
-  const protocDir = resolve(messageDir, 'protoc-27.4');
-  const protocBin = resolve(
-    protocDir,
-    `bin/${isLinux ? 'linux-x86_64' : 'win64'}`
+  const protocDir = resolve(
+    messageDir,
+    `protoc/protoc-27.4-${isLinux ? 'linux-x86_64' : 'win64'}`
   );
+  const protocBin = resolve(protocDir, 'bin');
   const prepareCmds = [];
   const setPathCmd = isLinux
     ? ['export', `PATH=${protocBin}:${protocDir}:"$PATH"`].join(' ')
diff --git a/src/drawApp/drawApp.ts b/src/drawApp/drawApp.ts
index a1c7d94..8d74b20 100644
--- a/src/drawApp/drawApp.ts
+++ b/src/drawApp/drawApp.ts
@@ -10,6 +10,9 @@ import {
   newDrawApp,
 } from 'jl-graphic';
 import { useDrawStore } from 'src/stores/draw-store';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+import { toStorageTransform } from './graphics/GraphicDataBase';
+import { fromUint8Array } from 'js-base64';
 
 // import { Notify } from 'quasar';
 
@@ -124,9 +127,18 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
 }
 
 export function saveDrawDatas(app: IDrawApp) {
-  const storage = '';
-  console.log(storage, '保存数据', app);
-  return storage;
+  const storage = new iscsGraphicData.IscsGraphicStorage();
+  const canvasData = app.canvas.saveData();
+  storage.canvas = new iscsGraphicData.Canvas({
+    width: canvasData.width,
+    height: canvasData.height,
+    backgroundColor: canvasData.backgroundColor,
+    viewportTransform: toStorageTransform(canvasData.viewportTransform),
+  });
+  const graphics = app.queryStore.getAllGraphics();
+  console.log(storage, '保存数据', graphics);
+  const base64 = fromUint8Array(storage.serialize());
+  return base64;
 }
 
 export function loadCommonDrawDatas(storage: any): any[] {
@@ -144,3 +156,14 @@ export function saveDrawToServer(base64: string) {
   }
   console.log('save' + base64);
 }
+
+let UniqueIdPrefix = new iscsGraphicData.UniqueIdOfStationLayout();
+export function loadUniqueIdPrefix() {
+  return UniqueIdPrefix;
+}
+
+export function setUniqueIdPrefix(
+  newUniqueIdPrefix: iscsGraphicData.UniqueIdOfStationLayout
+) {
+  UniqueIdPrefix = newUniqueIdPrefix;
+}
diff --git a/src/drawApp/graphics/GraphicDataBase.ts b/src/drawApp/graphics/GraphicDataBase.ts
new file mode 100644
index 0000000..f96c3a2
--- /dev/null
+++ b/src/drawApp/graphics/GraphicDataBase.ts
@@ -0,0 +1,152 @@
+import * as pb_1 from 'google-protobuf';
+import {
+  ChildTransform,
+  GraphicData,
+  GraphicState,
+  GraphicTransform,
+  IChildTransform,
+  IGraphicTransform,
+} from 'jl-graphic';
+// import { toStorageTransform } from '..';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+import { IPointData, Point } from 'pixi.js';
+
+export interface ICommonInfo {
+  id: number;
+  graphicType: string;
+  transform: IGraphicTransform;
+  childTransforms: IChildTransform[];
+}
+export function fromStoragePoint(p: iscsGraphicData.Point): Point {
+  return new Point(p.x, p.y);
+}
+
+export function toStoragePoint(p: IPointData): iscsGraphicData.Point {
+  return new iscsGraphicData.Point({ x: p.x, y: p.y });
+}
+export function fromStorageTransfrom(
+  transfrom: iscsGraphicData.Transform
+): GraphicTransform {
+  return new GraphicTransform(
+    fromStoragePoint(transfrom.position),
+    fromStoragePoint(transfrom.scale),
+    transfrom.rotation,
+    fromStoragePoint(transfrom.skew)
+  );
+}
+
+export function toStorageTransform(
+  transform: GraphicTransform
+): iscsGraphicData.Transform {
+  return new iscsGraphicData.Transform({
+    position: toStoragePoint(transform.position),
+    scale: toStoragePoint(transform.scale),
+    rotation: transform.rotation,
+    skew: toStoragePoint(transform.skew),
+  });
+}
+
+export interface IProtoGraphicData extends pb_1.Message {
+  common: ICommonInfo;
+  code?: string;
+}
+
+export abstract class GraphicDataBase implements GraphicData {
+  _data: IProtoGraphicData;
+  constructor(data: IProtoGraphicData) {
+    this._data = data;
+  }
+
+  static defaultCommonInfo(graphicType: string): iscsGraphicData.CommonInfo {
+    return new iscsGraphicData.CommonInfo({
+      id: 0,
+      graphicType: graphicType,
+      transform: new iscsGraphicData.Transform({
+        position: new iscsGraphicData.Point({ x: 0, y: 0 }),
+        scale: new iscsGraphicData.Point({ x: 1, y: 1 }),
+        rotation: 0,
+        skew: new iscsGraphicData.Point({ x: 0, y: 0 }),
+      }),
+      childTransforms: [],
+    });
+  }
+
+  getData<D extends IProtoGraphicData>(): D {
+    return this._data as D;
+  }
+
+  get id(): number {
+    return this._data.common.id;
+  }
+  set id(v: number) {
+    this._data.common.id = v;
+  }
+  get graphicType(): string {
+    return this._data.common.graphicType;
+  }
+  set graphicType(v: string) {
+    this._data.common.graphicType = v;
+  }
+  get transform(): GraphicTransform {
+    return GraphicTransform.from(this._data.common.transform);
+  }
+  set transform(v: GraphicTransform) {
+    this._data.common.transform = toStorageTransform(v);
+  }
+  get childTransforms(): ChildTransform[] | undefined {
+    const cts: ChildTransform[] = [];
+    if (this._data.common.childTransforms) {
+      this._data.common.childTransforms.forEach((ct) => {
+        cts.push(ChildTransform.from(ct));
+      });
+    }
+    return cts;
+  }
+  set childTransforms(v: ChildTransform[] | undefined) {
+    if (v) {
+      const cts: iscsGraphicData.ChildTransform[] = [];
+      v.forEach((ct) =>
+        cts.push(
+          new iscsGraphicData.ChildTransform({
+            ...ct,
+            transform: toStorageTransform(ct.transform),
+          })
+        )
+      );
+      this._data.common.childTransforms = cts;
+    } else {
+      this._data.common.childTransforms = [];
+    }
+  }
+
+  clone(): GraphicData {
+    throw new Error('Method not implemented.');
+  }
+  copyFrom(gd: GraphicDataBase): void {
+    pb_1.Message.copyInto(gd._data, this._data);
+  }
+  eq(other: GraphicDataBase): boolean {
+    return pb_1.Message.equals(this._data, other._data);
+  }
+}
+
+export abstract class GraphicStateBase implements GraphicState {
+  _graphicType: string;
+  _state: pb_1.Message;
+  constructor(state: pb_1.Message, graphicType: string) {
+    this._state = state;
+    this._graphicType = graphicType;
+  }
+  abstract get code(): string;
+  abstract copyFrom(data: GraphicState): void;
+  abstract eq(data: GraphicState): boolean;
+  getState<S extends pb_1.Message>(): S {
+    return this._state as S;
+  }
+  get graphicType(): string {
+    return this._graphicType;
+  }
+  clone(): GraphicState {
+    throw new Error('Method not implemented.');
+  }
+}