update：移动拖拽节点

package-lock.json

@@ -8,10 +8,12 @@
       "name": "vue3-ts-gojs",
       "version": "0.0.0",
       "dependencies": {
+        "uuid": "^10.0.0",
         "vue": "^3.4.21"
       },
       "devDependencies": {
         "@types/jquery": "^3.5.30",
+        "@types/uuid": "^10.0.0",
         "@vitejs/plugin-vue": "^5.0.4",
         "gojs": "^3.0.3",
         "typescript": "^5.4.5",
@@ -632,6 +634,12 @@
       "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
       "dev": true
     },
+    "node_modules/@types/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/@types/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+      "dev": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.4",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
@@ -1053,6 +1061,18 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "5.2.12",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-5.2.12.tgz",

package.json

@@ -9,10 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "uuid": "^10.0.0",
     "vue": "^3.4.21"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.30",
+    "@types/uuid": "^10.0.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "gojs": "^3.0.3",
     "typescript": "^5.4.5",

src/App.vue

@@ -11,7 +11,8 @@
 <!-- <panel></panel> -->
 <!-- <contextMenu></contextMenu> -->
 <!-- <firstProject></firstProject> -->
-<port></port>
+<!-- <port></port> -->
+ <imageNode></imageNode>
 </template>
 
 <script setup lang="ts">
@@ -27,7 +28,8 @@
 // import panel from './components/panel.vue';
 // import contextMenu from './components/contextMenu.vue';
 // import firstProject from './stageAchievements/firstProject.vue';
-import port from './components/port.vue';
+// import port from './components/port.vue';
+import imageNode from './stageAchievements/imageNode.vue';
 </script>
 
 <style scoped>

src/stageAchievements/extensions/LinkLabelDraggingTools.ts

+/*
+ *  Copyright (C) 1998-2024 by Northwoods Software Corporation. All Rights Reserved.
+ */
+
+/*
+ * This is an extension and not part of the main GoJS library.
+ * Note that the API for this class may change with any version, even point releases.
+ * If you intend to use an extension in production, you should copy the code to your own source directory.
+ * Extensions can be found in the GoJS kit under the extensions or extensionsJSM folders.
+ * See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
+ */
+
+import * as go from 'gojs';
+
+/**
+ * The LinkLabelDraggingTool class lets the user move a label on a {@link go.Link}.
+ *
+ * This tool only works when the Link has a label
+ * that is positioned at the {@link go.Link.midPoint} plus some offset.
+ * It does not work for labels that have a particular {@link go.GraphObject.segmentIndex}.
+ *
+ * If you want to experiment with this extension, try the <a href="../../samples/LinkLabelDragging.html">Link Label Dragging</a> sample.
+ * @category Tool Extension
+ */
+export class LinkLabelDraggingTool extends go.Tool {
+  /**
+   * The label being dragged.
+   */
+  label: go.GraphObject | null;
+  private _offset: go.Point; // of the mouse relative to the center of the label object
+  private _originalOffset: go.Point | null;
+
+  /**
+   * Constructs a LinkLabelDraggingTool and sets the name for the tool.
+   */
+  constructor(init?: Partial<LinkLabelDraggingTool>) {
+    super();
+    this.name = 'LinkLabelDragging';
+    this.label = null;
+    this._offset = new go.Point();
+    this._originalOffset = null;
+    if (init) Object.assign(this, init);
+  }
+
+  /**
+   * From the GraphObject at the mouse point, search up the visual tree until we get to
+   * an object that is a label of a Link.
+   * @returns This returns null if no such label is at the mouse down point.
+   */
+  findLabel(): go.GraphObject | null {
+    const diagram = this.diagram;
+    const e = diagram.lastInput;
+    let elt = diagram.findObjectAt(e.documentPoint, null, null);
+
+    if (elt === null || !(elt.part instanceof go.Link)) return null;
+    while (elt !== null && elt.panel !== elt.part) {
+      elt = elt.panel;
+    }
+    // If it's at an arrowhead segment index, don't consider it a label:
+    if (elt !== null && (elt.segmentIndex === 0 || elt.segmentIndex === -1)) return null;
+    return elt;
+  }
+
+  /**
+   * This tool can only start if the mouse has moved enough so that it is not a click,
+   * and if the mouse down point is on a GraphObject "label" in a Link Panel,
+   * as determined by {@link findLabel}.
+   */
+  override canStart(): boolean {
+    if (!super.canStart()) return false;
+    const diagram = this.diagram;
+    // require left button & that it has moved far enough away from the mouse down point, so it isn't a click
+    const e = diagram.lastInput;
+    if (!e.left) return false;
+    if (!this.isBeyondDragSize()) return false;
+
+    return this.findLabel() !== null;
+  }
+
+  /**
+   * Start a transaction, call {@link findLabel} and remember it as the "label" property,
+   * and remember the original value for the label's {@link go.GraphObject.segmentOffset} property.
+   */
+  override doActivate(): void {
+    this.startTransaction('Shifted Label');
+    this.label = this.findLabel();
+    if (this.label !== null) {
+      // compute the offset of the mouse-down point relative to the center of the label
+      this._offset = this.diagram.firstInput.documentPoint
+        .copy()
+        .subtract(this.label.getDocumentPoint(go.Spot.Center));
+      this._originalOffset = this.label.segmentOffset.copy();
+    }
+    super.doActivate();
+  }
+
+  /**
+   * Stop any ongoing transaction.
+   */
+  override doDeactivate(): void {
+    super.doDeactivate();
+    this.stopTransaction();
+  }
+
+  /**
+   * Clear any reference to a label element.
+   */
+  override doStop(): void {
+    this.label = null;
+    super.doStop();
+  }
+
+  /**
+   * Restore the label's original value for {@link go.GraphObject.segmentOffset}.
+   */
+  override doCancel(): void {
+    if (this.label !== null && this._originalOffset !== null) {
+      this.label.segmentOffset = this._originalOffset;
+    }
+    super.doCancel();
+  }
+
+  /**
+   * During the drag, call {@link updateSegmentOffset} in order to set
+   * the {@link go.GraphObject.segmentOffset} of the label.
+   */
+  override doMouseMove(): void {
+    if (!this.isActive) return;
+    this.updateSegmentOffset();
+  }
+
+  /**
+   * At the end of the drag, update the segment offset of the label and finish the tool,
+   * completing a transaction.
+   */
+  override doMouseUp(): void {
+    if (!this.isActive) return;
+    this.updateSegmentOffset();
+    this.transactionResult = 'Shifted Label';
+    this.stopTool();
+  }
+
+  /**
+   * Save the label's {@link go.GraphObject.segmentOffset} as a rotated offset from the midpoint of the
+   * Link that the label is in.
+   */
+  updateSegmentOffset(): void {
+    const lab = this.label;
+    if (lab === null) return;
+    const link = lab.part;
+    if (!(link instanceof go.Link)) return;
+
+    const last = this.diagram.lastInput.documentPoint;
+    const idx = lab.segmentIndex;
+    const numpts = link.pointsCount;
+    if (isNaN(idx) && link.path) {
+      // handle fractions along the whole path
+      const labpt = link.path.getDocumentPoint(
+        link.geometry.getPointAlongPath(lab.segmentFraction)
+      );
+      const angle = link.geometry.getAngleAlongPath(lab.segmentFraction);
+      const p = new go.Point(last.x - this._offset.x - labpt.x, last.y - this._offset.y - labpt.y);
+      lab.segmentOffset = p.rotate(-angle);
+    } else if (idx < -numpts || idx >= numpts) {
+      // if the label is a "mid" label, assume it is positioned differently from a label at a particular segment
+      const mid = link.midPoint;
+      // need to rotate this point to account for the angle of the link segment at the mid-point
+      const p = new go.Point(last.x - this._offset.x - mid.x, last.y - this._offset.y - mid.y);
+      lab.segmentOffset = p.rotate(-link.midAngle);
+    } else {
+      // handle the label point being on a partiular segment with a given fraction
+      const frac = lab.segmentFraction;
+      let a: go.Point;
+      let b: go.Point;
+      if (idx >= 0) {
+        // indexing forwards
+        a = link.getPoint(idx);
+        b = idx < numpts - 1 ? link.getPoint(idx + 1) : a;
+      } else {
+        // or backwards if segmentIndex is negative
+        const i = numpts + idx;
+        a = link.getPoint(i);
+        b = i > 0 ? link.getPoint(i - 1) : a;
+      }
+      const labx = a.x + (b.x - a.x) * frac;
+      const laby = a.y + (b.y - a.y) * frac;
+      const p = new go.Point(last.x - this._offset.x - labx, last.y - this._offset.y - laby);
+      const segangle = idx >= 0 ? a.directionPoint(b) : b.directionPoint(a);
+      lab.segmentOffset = p.rotate(-segangle);
+    }
+  }
+}

src/stageAchievements/extensions/NodeLabelDraggingTool.ts

+/*
+ *  Copyright (C) 1998-2024 by Northwoods Software Corporation. All Rights Reserved.
+ */
+
+/*
+ * This is an extension and not part of the main GoJS library.
+ * Note that the API for this class may change with any version, even point releases.
+ * If you intend to use an extension in production, you should copy the code to your own source directory.
+ * Extensions can be found in the GoJS kit under the extensions or extensionsJSM folders.
+ * See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
+ */
+
+import * as go from 'gojs';
+
+/**
+ * The NodeLabelDraggingTool class lets the user move a label on a Node.
+ *
+ * This tool only works when the Node has a label (any GraphObject) marked with
+ * `{ _isNodeLabel: true }` that is positioned in a Spot Panel.
+ * It works by modifying that label's {@link go.GraphObject.alignment} property to have an
+ * offset from the center of the panel.
+ *
+ * If you want to experiment with this extension, try the <a href="../../samples/NodeLabelDragging.html">Node Label Dragging</a> sample.
+ * @category Tool Extension
+ */
+export class NodeLabelDraggingTool extends go.Tool {
+  /**
+   * The label being dragged.
+   */
+  label: go.GraphObject | null;
+  private _offset: go.Point; // of the mouse relative to the center of the label object
+  private _originalAlignment: go.Spot;
+  private _originalCenter: go.Point;
+
+  /**
+   * Constructs a NodeLabelDraggingTool and sets the name for the tool.
+   */
+  constructor(init?: Partial<NodeLabelDraggingTool>) {
+    super();
+    this.name = 'NodeLabelDragging';
+    this.label = null;
+    this._offset = new go.Point();
+    this._originalAlignment = go.Spot.Default;
+    this._originalCenter = new go.Point();
+    if (init) Object.assign(this, init);
+  }
+
+  /**
+   * From the GraphObject at the mouse point, search up the visual tree until we get to
+   * an object that has the "_isNodeLabel" property set to true, that is in a Spot Panel,
+   * and that is not the first element of that Panel (i.e. not the main element of the panel).
+   * @returns This returns null if no such label is at the mouse down point.
+   */
+  findLabel(): go.GraphObject | null {
+    const diagram = this.diagram;
+    const e = diagram.firstInput;
+    let elt = diagram.findObjectAt(e.documentPoint, null, null);
+
+    if (elt === null || !(elt.part instanceof go.Node)) return null;
+    while (elt.panel !== null) {
+      if ((elt as any)['_isNodeLabel'] &&
+          elt.panel.type === go.Panel.Spot &&
+          elt.panel.findMainElement() !== elt) return elt;
+      elt = elt.panel;
+    }
+    return null;
+  }
+
+  /**
+   * This tool can only start if the mouse has moved enough so that it is not a click,
+   * and if the mouse down point is on a GraphObject "label" in a Spot Panel,
+   * as determined by findLabel().
+   */
+  override canStart(): boolean {
+    if (!super.canStart()) return false;
+    const diagram = this.diagram;
+    // require left button & that it has moved far enough away from the mouse down point, so it isn't a click
+    const e = diagram.lastInput;
+    if (!e.left) return false;
+    if (!this.isBeyondDragSize()) return false;
+
+    return this.findLabel() !== null;
+  }
+
+  /**
+   * Start a transaction, call {@link findLabel} and remember it as the "label" property,
+   * and remember the original value for the label's {@link go.GraphObject.alignment} property.
+   */
+  override doActivate(): void {
+    this.startTransaction('Shifted Label');
+    this.label = this.findLabel();
+    if (this.label !== null) {
+      // compute the offset of the mouse-down point relative to the center of the label
+      this._offset = this.diagram.firstInput.documentPoint
+        .copy()
+        .subtract(this.label.getDocumentPoint(go.Spot.Center));
+      this._originalAlignment = this.label.alignment.copy();
+      const panel = this.label.panel;
+      if (panel !== null) {
+        const main = panel.findMainElement();
+        if (main !== null) this._originalCenter = main.getDocumentPoint(go.Spot.Center);
+      }
+    }
+    super.doActivate();
+  }
+
+  /**
+   * Stop any ongoing transaction.
+   */
+  override doDeactivate(): void {
+    super.doDeactivate();
+    this.stopTransaction();
+  }
+
+  /**
+   * Clear any reference to a label element.
+   */
+  override doStop(): void {
+    this.label = null;
+    super.doStop();
+  }
+
+  /**
+   * Restore the label's original value for GraphObject.alignment.
+   */
+  override doCancel(): void {
+    if (this.label !== null) {
+      this.label.alignment = this._originalAlignment;
+    }
+    super.doCancel();
+  }
+
+  /**
+   * During the drag, call updateAlignment in order to set the {@link go.GraphObject.alignment} of the label.
+   */
+  override doMouseMove(): void {
+    if (!this.isActive) return;
+    this.updateAlignment();
+  }
+
+  /**
+   * At the end of the drag, update the alignment of the label and finish the tool,
+   * completing a transaction.
+   */
+  override doMouseUp(): void {
+    if (!this.isActive) return;
+    this.updateAlignment();
+    this.transactionResult = 'Shifted Label';
+    this.stopTool();
+  }
+
+  /**
+   * Save the label's {@link go.GraphObject.alignment} as an absolute offset from the center of the Spot Panel
+   * that the label is in.
+   */
+  updateAlignment(): void {
+    if (this.label === null) return;
+    const last = this.diagram.lastInput.documentPoint;
+    const cntr = this._originalCenter;
+    this.label.alignment = new go.Spot(
+      0.5,
+      0.5,
+      last.x - this._offset.x - cntr.x,
+      last.y - this._offset.y - cntr.y
+    );
+  }
+}

src/stageAchievements/extensions/PortShiftingTool.ts

+/*
+ *  Copyright (C) 1998-2024 by Northwoods Software Corporation. All Rights Reserved.
+ */
+
+/*
+ * This is an extension and not part of the main GoJS library.
+ * Note that the API for this class may change with any version, even point releases.
+ * If you intend to use an extension in production, you should copy the code to your own source directory.
+ * Extensions can be found in the GoJS kit under the extensions or extensionsJSM folders.
+ * See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
+ */
+
+import * as go from 'gojs';
+
+/**
+ * The PortShiftingTool class lets a user move a port on a {@link go.Node}.
+ *
+ * This tool only works when the Node has a port (any GraphObject) marked with
+ * a non-null and non-empty portId that is positioned in a Spot Panel,
+ * and the user holds down the Shift key.
+ * It works by modifying that port's {@link go.GraphObject.alignment} property.
+ *
+ * If you want to experiment with this extension, try the <a href="../../samples/PortShifting.html">Port Shifting</a> sample.
+ * @category Tool Extension
+ */
+export class PortShiftingTool extends go.Tool {
+  /**
+   * The port being shifted.
+   */
+  port: go.GraphObject | null;
+  private _originalAlignment: go.Spot;
+
+  /**
+   * Constructs a PortShiftingTool and sets the name for the tool.
+   */
+  constructor(init?: Partial<PortShiftingTool>) {
+    super();
+    this.name = 'PortShifting';
+    this.port = null;
+    this._originalAlignment = go.Spot.Default;
+    if (init) Object.assign(this, init);
+  }
+
+  /**
+   * This tool can only start if the mouse has moved enough so that it is not a click,
+   * and if the mouse down point is on a GraphObject "port" in a Spot Panel,
+   * as determined by {@link findPort}.
+   */
+  override canStart(): boolean {
+    const diagram = this.diagram;
+    if (!super.canStart()) return false;
+    // require left button & that it has moved far enough away from the mouse down point, so it isn't a click
+    const e = diagram.lastInput;
+    if (!e.left || !e.shift) return false;
+    if (!this.isBeyondDragSize()) return false;
+
+    return this.findPort() !== null;
+  }
+
+  /**
+   * From the {@link go.GraphObject} at the mouse point, search up the visual tree until we get to
+   * an object that has the {@link go.GraphObject.portId} property set to a non-empty string, that is in a Spot Panel,
+   * and that is not the main element of the panel (typically the first element).
+   * @returns This returns null if no such port is at the mouse down point.
+   */
+  findPort(): go.GraphObject | null {
+    const diagram = this.diagram;
+    const e = diagram.firstInput;
+    let elt = diagram.findObjectAt(e.documentPoint, null, null);
+    if (elt === null || !(elt.part instanceof go.Node)) return null;
+
+    while (elt !== null && elt.panel !== null) {
+      if (elt.panel.type === go.Panel.Spot &&
+          elt.panel.findMainElement() !== elt &&
+          elt.portId !== null &&
+          elt.portId !== '') return elt;
+      elt = elt.panel;
+    }
+    return null;
+  }
+
+  /**
+   * Start a transaction, call {@link findPort} and remember it as the "port" property,
+   * and remember the original value for the port's {@link go.GraphObject.alignment} property.
+   */
+  override doActivate(): void {
+    this.startTransaction('Shifted Label');
+    this.port = this.findPort();
+    if (this.port !== null) {
+      this._originalAlignment = this.port.alignment.copy();
+    }
+    super.doActivate();
+  }
+
+  /**
+   * Stop any ongoing transaction.
+   */
+  override doDeactivate(): void {
+    super.doDeactivate();
+    this.stopTransaction();
+  }
+
+  /**
+   * Clear any reference to a port element.
+   */
+  override doStop(): void {
+    this.port = null;
+    super.doStop();
+  }
+
+  /**
+   * Restore the port's original value for GraphObject.alignment.
+   */
+  override doCancel(): void {
+    if (this.port !== null) {
+      this.port.alignment = this._originalAlignment;
+    }
+    super.doCancel();
+  }
+
+  /**
+   * During the drag, call {@link updateAlignment} in order to set the {@link go.GraphObject.alignment} of the port.
+   */
+  override doMouseMove(): void {
+    if (!this.isActive) return;
+    this.updateAlignment();
+  }
+
+  /**
+   * At the end of the drag, update the alignment of the port and finish the tool,
+   * completing a transaction.
+   */
+  override doMouseUp(): void {
+    if (!this.isActive) return;
+    this.updateAlignment();
+    this.transactionResult = 'Shifted Label';
+    this.stopTool();
+  }
+
+  /**
+   * Save the port's {@link go.GraphObject.alignment} as a fractional Spot in the Spot Panel
+   * that the port is in. Thus if the main element changes size, the relative positions
+   * of the ports will be maintained. But that does assume that the port must remain
+   * inside the main element -- it cannot wander away from the node.
+   * This does not modify the port's {@link go.GraphObject.alignmentFocus} property.
+   */
+  updateAlignment(): void {
+    if (this.port === null || this.port.panel === null) return;
+    const last = this.diagram.lastInput.documentPoint;
+    const main = this.port.panel.findMainElement();
+    if (main === null) return;
+    const tl = main.getDocumentPoint(go.Spot.TopLeft);
+    const br = main.getDocumentPoint(go.Spot.BottomRight);
+    const x = Math.max(0, Math.min((last.x - tl.x) / (br.x - tl.x), 1));
+    const y = Math.max(0, Math.min((last.y - tl.y) / (br.y - tl.y), 1));
+    this.port.alignment = new go.Spot(x, y);
+  }
+}

src/stageAchievements/extensions/ResizeMultipleTool.ts

+/*
+ *  Copyright (C) 1998-2024 by Northwoods Software Corporation. All Rights Reserved.
+ */
+
+/*
+ * This is an extension and not part of the main GoJS library.
+ * Note that the API for this class may change with any version, even point releases.
+ * If you intend to use an extension in production, you should copy the code to your own source directory.
+ * Extensions can be found in the GoJS kit under the extensions or extensionsJSM folders.
+ * See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
+ */
+
+import * as go from 'gojs';
+
+/**
+ * The ResizeMultipleTool class lets the user resize multiple objects at once.
+ *
+ * If you want to experiment with this extension, try the <a href="../../samples/ResizeMultiple.html">Resize Multiple</a> sample.
+ * @category Tool Extension
+ */
+export class ResizeMultipleTool extends go.ResizingTool {
+  /**
+   * Constructs a ResizeMultipleTool and sets the name for the tool.
+   */
+  constructor(init?: Partial<ResizeMultipleTool>) {
+    super();
+    this.name = 'ResizeMultiple';
+    if (init) Object.assign(this, init);
+  }
+
+  /**
+   * Overrides {@link go.ResizingTool.resize} to resize all selected objects to the same size.
+   * @param newr - the intended new rectangular bounds for each Part's {@link go.Part.resizeObject}.
+   */
+  override resize(newr: go.Rect): void {
+    const diagram = this.diagram;
+    diagram.selection.each((part) => {
+      if (part instanceof go.Link) return; // only Nodes and simple Parts
+      const obj = part.resizeObject;
+
+      // calculate new location
+      const pos = part.position.copy();
+      const angle = obj.getDocumentAngle();
+      const sc = obj.getDocumentScale();
+
+      const radAngle = (Math.PI * angle) / 180;
+      const angleCos = Math.cos(radAngle);
+      const angleSin = Math.sin(radAngle);
+
+      const deltaWidth = newr.width - obj.naturalBounds.width;
+      const deltaHeight = newr.height - obj.naturalBounds.height;
+
+      const angleBottom = angle > 0 && angle < 180 ? 1 : 0;
+      const angleLeft = angle > 90 && angle < 270 ? 1 : 0;
+      const angleTop = angle > 180 && angle < 360 ? 1 : 0;
+
+      pos.x +=
+        sc *
+        ((newr.x + deltaWidth * angleLeft) * angleCos -
+          (newr.y + deltaHeight * angleBottom) * angleSin);
+      pos.y +=
+        sc *
+        ((newr.x + deltaWidth * angleTop) * angleSin +
+          (newr.y + deltaHeight * angleLeft) * angleCos);
+
+      obj.desiredSize = newr.size;
+      part.move(pos);
+    });
+  }
+}

src/stageAchievements/pid_node/渣池.svg

+<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 190 90" style="enable-background:new 0 0 190 90;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#333333;stroke-width:2;}
+	.st1{fill:none;stroke:#333333;stroke-width:2;}
+</style>
+<g id="页面-1">
+	<g id="渣池">
+		<g id="编组" transform="translate(4.000000, 6.000000)">
+			<polygon id="路径" class="st0" points="88,77.8 0,77.8 0,53.8 88,53.8 136.6,0 181.4,0 181.4,35.3 157.5,35.3 157.5,24.5 
+				136.6,24.5 			"/>
+			<circle id="椭圆形" class="st1" cx="139" cy="8.8" r="3"/>
+			<circle id="椭圆形备份" class="st1" cx="84" cy="68.8" r="3"/>
+			<line id="路径-24" class="st1" x1="86.8" y1="70.1" x2="141.7" y2="10.2"/>
+			<line id="路径-24备份" class="st1" x1="82.8" y1="66.1" x2="137.1" y2="6.4"/>
+		</g>
+	</g>
+</g>
+</svg>