editer:fex>还原度

package.json

@@ -2,10 +2,10 @@
   "name": "persagy_topo_editer",
   "version": "0.1.4",
   "remote": {
-    "host": "39.102.40.239",
-    "path": "/opt/apps/web/persagyTopo",
-    "user": "publish",
-    "password": "1qaz2wsx",
+    "host": "60.205.177.43",
+    "path": "/root/apps/web/persagyTopo",
+    "user": "root",
+    "password": "cGVyc2FneV8yMDIwbGFic2wlIyQ=",
     "local": "persagyTopo"
   },
   "scripts": {
@@ -56,4 +56,4 @@
     "typescript": "~3.9.3",
     "vue-template-compiler": "^2.6.11"
   }
-}
+}

publish.js

@@ -30,7 +30,7 @@ const ssh = new Client();
 
 ssh.connect({
     host: process.env.npm_package_remote_host,
-    port: "2020",
+    port: "22",
     username: process.env.npm_package_remote_user,
     password: process.env.npm_package_remote_password
 }).then(() => {

src/assets/font/demo_index.html

@@ -31,6 +31,72 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe664;</span>
+                <div class="name">三通_n</div>
+                <div class="code-name">&amp;#xe664;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe665;</span>
+                <div class="name">四通_n</div>
+                <div class="code-name">&amp;#xe665;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe666;</span>
+                <div class="name">弯头_n</div>
+                <div class="code-name">&amp;#xe666;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe674;</span>
+                <div class="name">划线_n</div>
+                <div class="code-name">&amp;#xe674;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe676;</span>
+                <div class="name">矩形_n</div>
+                <div class="code-name">&amp;#xe676;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe677;</span>
+                <div class="name">圆形_n</div>
+                <div class="code-name">&amp;#xe677;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe678;</span>
+                <div class="name">多边形_n</div>
+                <div class="code-name">&amp;#xe678;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe679;</span>
+                <div class="name">图片_n</div>
+                <div class="code-name">&amp;#xe679;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67a;</span>
+                <div class="name">公式_n</div>
+                <div class="code-name">&amp;#xe67a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67b;</span>
+                <div class="name">文字_n</div>
+                <div class="code-name">&amp;#xe67b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67c;</span>
+                <div class="name">信息点_n</div>
+                <div class="code-name">&amp;#xe67c;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe663;</span>
                 <div class="name">更多</div>
                 <div class="code-name">&amp;#xe663;</div>
@@ -255,6 +321,105 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-santong_n"></span>
+            <div class="name">
+              三通_n
+            </div>
+            <div class="code-name">.icon-santong_n
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-sitong_n"></span>
+            <div class="name">
+              四通_n
+            </div>
+            <div class="code-name">.icon-sitong_n
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wantou_n"></span>
+            <div class="name">
+              弯头_n
+            </div>
+            <div class="code-name">.icon-wantou_n
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huaxian_n"></span>
+            <div class="name">
+              划线_n
+            </div>
+            <div class="code-name">.icon-huaxian_n
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-juxing_n"></span>
+            <div class="name">
+              矩形_n
+            </div>
+            <div class="code-name">.icon-juxing_n
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yuanxing_n"></span>
+            <div class="name">
+              圆形_n
+            </div>
+            <div class="code-name">.icon-yuanxing_n
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-duobianxing_n"></span>
+            <div class="name">
+              多边形_n
+            </div>
+            <div class="code-name">.icon-duobianxing_n
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tupian_n"></span>
+            <div class="name">
+              图片_n
+            </div>
+            <div class="code-name">.icon-tupian_n
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gongshi_n"></span>
+            <div class="name">
+              公式_n
+            </div>
+            <div class="code-name">.icon-gongshi_n
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wenzi_n"></span>
+            <div class="name">
+              文字_n
+            </div>
+            <div class="code-name">.icon-wenzi_n
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xinxidian_n"></span>
+            <div class="name">
+              信息点_n
+            </div>
+            <div class="code-name">.icon-xinxidian_n
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-gengduo1"></span>
             <div class="name">
               更多
@@ -546,6 +711,94 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-santong_n"></use>
+                </svg>
+                <div class="name">三通_n</div>
+                <div class="code-name">#icon-santong_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-sitong_n"></use>
+                </svg>
+                <div class="name">四通_n</div>
+                <div class="code-name">#icon-sitong_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wantou_n"></use>
+                </svg>
+                <div class="name">弯头_n</div>
+                <div class="code-name">#icon-wantou_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huaxian_n"></use>
+                </svg>
+                <div class="name">划线_n</div>
+                <div class="code-name">#icon-huaxian_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-juxing_n"></use>
+                </svg>
+                <div class="name">矩形_n</div>
+                <div class="code-name">#icon-juxing_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yuanxing_n"></use>
+                </svg>
+                <div class="name">圆形_n</div>
+                <div class="code-name">#icon-yuanxing_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-duobianxing_n"></use>
+                </svg>
+                <div class="name">多边形_n</div>
+                <div class="code-name">#icon-duobianxing_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tupian_n"></use>
+                </svg>
+                <div class="name">图片_n</div>
+                <div class="code-name">#icon-tupian_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gongshi_n"></use>
+                </svg>
+                <div class="name">公式_n</div>
+                <div class="code-name">#icon-gongshi_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wenzi_n"></use>
+                </svg>
+                <div class="name">文字_n</div>
+                <div class="code-name">#icon-wenzi_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xinxidian_n"></use>
+                </svg>
+                <div class="name">信息点_n</div>
+                <div class="code-name">#icon-xinxidian_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-gengduo1"></use>
                 </svg>
                 <div class="name">更多</div>

src/assets/font/iconfont.json

@@ -6,6 +6,83 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "17559866",
+      "name": "三通_n",
+      "font_class": "santong_n",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "17559867",
+      "name": "四通_n",
+      "font_class": "sitong_n",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "17559868",
+      "name": "弯头_n",
+      "font_class": "wantou_n",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
+    {
+      "icon_id": "17559869",
+      "name": "划线_n",
+      "font_class": "huaxian_n",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "17559870",
+      "name": "矩形_n",
+      "font_class": "juxing_n",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "17559871",
+      "name": "圆形_n",
+      "font_class": "yuanxing_n",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
+    {
+      "icon_id": "17559872",
+      "name": "多边形_n",
+      "font_class": "duobianxing_n",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
+    {
+      "icon_id": "17559873",
+      "name": "图片_n",
+      "font_class": "tupian_n",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
+      "icon_id": "17559874",
+      "name": "公式_n",
+      "font_class": "gongshi_n",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "17559875",
+      "name": "文字_n",
+      "font_class": "wenzi_n",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "17559876",
+      "name": "信息点_n",
+      "font_class": "xinxidian_n",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
       "icon_id": "17487441",
       "name": "更多",
       "font_class": "gengduo1",

src/components/editClass/big-edit/BigEditFactory.ts

@@ -46,77 +46,77 @@ export class BigEditFactory extends SItemFactory {
      */
     constructor() {
         super()
-    } // Constructor
+    }
 
     /**
      * 创建基础直线
      *
      * @param data  数据
-     * @return  线
+     * @return 线
      */
     createBaseLineEdit(data: Marker): SBaseLineEdit {
         return new SBaseLineEdit(null, data);
-    } // Function createBaseLineEdit()
+    }
 
     /**
      * 创建基础文本
      *
      * @param data  数据
-     * @return  文本
+     * @return 文本
      */
     createBaseTextEdit(data: Marker): SBaseTextEdit {
         return new SBaseTextEdit(null, data);
-    } // Function createBaseTextEdit()
+    }
 
     /**
      * 创建基础图片
      *
      * @param data  数据
-     * @return  图片
+     * @return 图片
      */
     createBaseImageEdit(data: Marker): SBaseImageEdit {
         return new SBaseImageEdit(null, data);
-    } // Function createBaseImageEdit()
+    }
 
     /**
      * 创建基础矩形
      *
      * @param data  数据
-     * @return  矩形
+     * @return 矩形
      */
     createBaseRectEdit(data: Marker): SBaseRectEdit {
         return new SBaseRectEdit(null, data);
-    } // Function createBaseRectEdit()
+    }
 
     /**
      * 创建基础圆
      *
      * @param data  数据
-     * @return  圆
+     * @return 圆
      */
     createBaseCircleEdit(data: Marker): SBaseCircleEdit {
         return new SBaseCircleEdit(null, data);
-    } // Function createBaseRectEdit()
+    }
 
     /**
      * 创建基础注释
      *
      * @param data     数据
-     * @return  注释
+     * @return 注释
      */
     createBaseExpainEdit(data: Marker): SBaseExpainEdit {
         return new SBaseExpainEdit(null, data);
-    } // Function createBaseExpainEdit()
+    }
 
     /**
      * 创建基础多边形
      *
      * @param data     数据
-     * @return  注释
+     * @return 注释
      */
     createBasePolygonEdit(data: Marker): SBasePolygonEdit {
         return new SBasePolygonEdit(null, data);
-    } // Function createBasePolygonEdit()
+    }
 
     /**
      * 创建基础基础箭头（折线）
@@ -126,7 +126,7 @@ export class BigEditFactory extends SItemFactory {
      */
     createBaseArrow(data: Marker): SBaseArrow {
         return new SBaseArrow(null, data);
-    } // Function createBasePolygonEdit()
+    }
 
     /**
      * 创建基础基础箭头（折线）
@@ -136,27 +136,25 @@ export class BigEditFactory extends SItemFactory {
      */
     createBasePolygonArrowEdit(data: Marker): SBaseArrowPolyEdit {
         return new SBaseArrowPolyEdit(null, data);
-    } // Function SBaseArrowPolyEdit()
+    }
 
     /*
     * 创建基础设备
     *
     * @param data     数据
-    * @return  注释
+    * @return 注释
     */
     createBaseEquipment(data: Legend): SBaseEquipment {
         return new SBaseEquipment(null, data);
-    } // Function createBaseEquipment()
+    }
 
     /*
      * 创建基础管道
      *
      * @param data     数据
-     * @return  注释
+     * @return 注释
      */
     createBasePipe(data: Relation): SBasePipe {
         return new SBasePipe(null, data);
-    } // Function createBaseEquipment()
-
-
-} // Class BigEditFactory
+    }
+}

src/components/editClass/big-edit/SBaseEditScene.ts

@@ -86,6 +86,7 @@ export class SBaseEditScene extends SGraphEditScene {
                 }
             }
         };
+
         const item = new SBaseExpainEdit(null, data);
         item.moveTo(event.x, event.y);
         item.selectable = true;
@@ -94,7 +95,7 @@ export class SBaseEditScene extends SGraphEditScene {
         this.grabItem = null;
         item.connect("onContextMenu", this, this.getItem);
         this.finishCreated(item);
-    } // Function addExplainItem()
+    }
 
     /**
      * 新增基础箭头（折线）
@@ -117,6 +118,7 @@ export class SBaseEditScene extends SGraphEditScene {
                 default: {}
             }
         };
+
         const item = new SBaseArrow(null, data);
         item.status = SItemStatus.Create;
         item.selectable = true;
@@ -127,7 +129,7 @@ export class SBaseEditScene extends SGraphEditScene {
         if (this.view) {
             this.view.update();
         }
-    } // Function addPolyLineArrow()
+    }
 
     /**
      * 新增基础箭头（多边形）
@@ -161,14 +163,12 @@ export class SBaseEditScene extends SGraphEditScene {
         item.selectable = true;
         this.addItem(item);
         this.grabItem = item;
-        console.log(this.grabItem);
-
         item.connect("finishCreated", this, this.finishCreated);
         item.connect("onContextMenu", this, this.getItem);
         if (this.view) {
             this.view.update();
         }
-    } // Function addPolygonArrow()
+    }
 
     /**
      * 添加基本设备 item
@@ -177,7 +177,6 @@ export class SBaseEditScene extends SGraphEditScene {
      * @param legendObj 图例样式
      */
     addEuqipment(event: SMouseEvent, legendObj: any): void {
-
         const data = {
             nodeId: uuid(),
             /** 名称 */
@@ -214,7 +213,7 @@ export class SBaseEditScene extends SGraphEditScene {
         if (this.view) {
             this.view.update();
         }
-    } // Function addEuqipment()
+    }
 
     /**
      * 新增管道
@@ -260,13 +259,14 @@ export class SBaseEditScene extends SGraphEditScene {
             item.anchor1Id = anc.id;
             item.node1Id = anc.parent ? anc.parent.nodeId : '';
         }
-        console.log('anc',anc)
+
+        console.log('anc', anc)
         item.connect("finishCreated", this, this.finishCreated);
         item.connect("onContextMenu", this, this.getItem);
         if (this.view) {
             this.view.update();
         }
-    } // Function addBasePipe()
+    }
 
     /**
      * 添加基本管道联通器
@@ -280,6 +280,7 @@ export class SBaseEditScene extends SGraphEditScene {
             'santong': 3,
             'sitong': 4,
         }
+
         const data = {
             /** 名称 */
             name: '基础管道接头',
@@ -298,6 +299,7 @@ export class SBaseEditScene extends SGraphEditScene {
                 }
             }
         };
+
         const item = new SBasePipeUninTool(null, data);
         item.status = SItemStatus.Create;
         item.selectable = true;
@@ -309,7 +311,7 @@ export class SBaseEditScene extends SGraphEditScene {
         if (this.view) {
             this.view.update();
         }
-    } // Function addPipeUninTool()
+    }
 
     /**
      * 重做
@@ -320,7 +322,7 @@ export class SBaseEditScene extends SGraphEditScene {
         } else {
             this.undoStack.redo();
         }
-    } // Function redo()
+    }
 
     /**
      * 撤销
@@ -331,7 +333,7 @@ export class SBaseEditScene extends SGraphEditScene {
         } else {
             this.undoStack.undo();
         }
-    } // Function undo()
+    }
 
     /**
      * 删除
@@ -357,7 +359,7 @@ export class SBaseEditScene extends SGraphEditScene {
             this.view.update()
         }
         return itemList
-    } // Function deleteItem()
+    }
 
     /**
      * 框选
@@ -367,7 +369,7 @@ export class SBaseEditScene extends SGraphEditScene {
         let rect = new SRectSelectItem(null, point);
         this.addItem(rect);
         this.grabItem = rect;
-    } // Function addRectSelect()
+    }
 
     /**
      * 计算框选交集
@@ -375,20 +377,17 @@ export class SBaseEditScene extends SGraphEditScene {
      * @param ctrl  是否点击ctrl
      */
     groupSelect(ctrl: boolean) {
-        // if (!ctrl) {
-        //     this.selectContainer.clear()
-        // }
         if (this.grabItem instanceof SRectSelectItem) {
             const rect = this.grabItem.boundingRect();
             this.arrToSelect(this.root.children, rect)
         }
-    } // Function groupSelect()
+    }
 
     /**
      * 选中item:框选
      *
-     * @param arr   实例数组
-     * @param rect  框选矩形区域
+     * @param arr       实例数组
+     * @param rect      框选矩形区域
      */
     private arrToSelect(arr: SGraphItem[], rect: SRect) {
         if (Array.isArray(arr) && arr.length) {
@@ -404,11 +403,10 @@ export class SBaseEditScene extends SGraphEditScene {
                 }
             })
         }
-    } // Function arrToSelect()
+    }
 
     /////////////////////////////////////////////////////////////////////
     // 鼠标事件
-
     /**
      * 鼠标左键按下
      *
@@ -418,7 +416,7 @@ export class SBaseEditScene extends SGraphEditScene {
         if (!super.onMouseDown(event) && 1 == event.buttons) {
             this.addRectSelect(event);
         }
-    } // Function onMouseDown()
+    }
 
     /**
      * 鼠标抬起
@@ -438,10 +436,12 @@ export class SBaseEditScene extends SGraphEditScene {
                 }
                 return true;
             }
+
             return this.grabItem.onMouseUp(event);
         }
+
         return super.onMouseUp(event)
-    } // Function onMouseUp()
+    }
 
     /**
      * 复制
@@ -449,7 +449,6 @@ export class SBaseEditScene extends SGraphEditScene {
     copy(): void {
         const itemList = this.save(false);
         if (itemList) {
-            // 生成复制字符串
             // 删除对应得id
             itemList.markers.map((item: any) => {
                 delete item.id;
@@ -457,18 +456,21 @@ export class SBaseEditScene extends SGraphEditScene {
                 delete item.markerId;
                 return item
             });
+
             itemList.nodes.map((item: any) => {
                 delete item.id;
                 delete item.graphId;
                 delete item.markerId;
                 return item
             });
+
             itemList.relations.map((item: any) => {
                 delete item.id;
                 delete item.graphId;
                 delete item.markerId;
                 return item
             });
+
             this.copyString = itemList
             // 获取input dom
             const input = document.createElement('input');
@@ -482,7 +484,7 @@ export class SBaseEditScene extends SGraphEditScene {
             console.log(input.value, Date.now());
             document.body.removeChild(input)
         }
-    } // Function copy()
+    }
 
     /**
      * 粘贴
@@ -502,34 +504,65 @@ export class SBaseEditScene extends SGraphEditScene {
             this.addItem(item);
             graphItemList.push(item);
         });
+
         this.addListCommand(graphItemList);
         this.view ? this.view.update() : '';
-    } // Function paste()
+    }
 
     /**
-     *  添加多个item命令
+     * 添加多个item命令
      *
-     *  @param  itemList       鼠标事件对象
+     *  @param itemList    鼠标事件对象
      */
     addListCommand(itemList: SGraphEdit[]): void {
         this.undoStack.push(new SGraphAddListCommand(this, itemList));
-    } // Function addListCommand()
+    }
 
     /**
      * 图例置顶、置底
      *
-     * @parm type 设置类型
+     * @parm type   设置类型
      */
     setOrder(type: string) {
         this.selectContainer.setOrder(SOrderSetType.[type])
     }
 
     /**
+   * 设置管线结束锚点
+   */
+    setTipeEndanchor(event: SMouseEvent): void {
+        if (this.grabItem instanceof SBasePipe) {
+            const anc = this.clickIsAnchor(event);
+            if (anc) {
+                const p = anc.mapToScene(0, 0)
+                anc.isConnected = true;
+                event.x = p.x;
+                event.y = p.y;
+                if (this.grabItem.status == SItemStatus.Create) {
+                    if (this.grabItem.pointList.length) {
+                        this.grabItem.endAnchor = anc;
+                        anc.parent?.connect('changePos', this.grabItem, this.grabItem.changePos)
+                    }
+
+                    this.grabItem.anchor2Id = anc.id
+                    this.grabItem.node2Id = anc.parent.nodeId
+                    this.grabItem.onMouseDown(event)
+                    this.grabItem.status = SItemStatus.Normal;
+                    this.finishCreated(this.grabItem)
+                    return
+                }
+            }
+
+            this.grabItem.onMouseDown(event)
+        }
+    }
+
+    /**
      * 获取item (常用与场景外的调用F)
      *
-     * @params isAll 是否为全部item数据
-     * @return obj 返回保存的数据接口
+     * @params isAll    是否为全部item数据
+     * @return obj      返回保存的数据接口
      */
     save(isAll: boolean = true): any {
-    } // Function save()
-} // Class SBaseEditScene
+    }
+}

src/components/editClass/big-edit/items/SBaseArrow.ts

@@ -29,7 +29,7 @@ import { SBasePolylineEdit } from './../../edit/';
 import { SGraphItem, SLineStyle } from "@persagy-web/graph/lib";
 import { Marker } from "./../types/Marker";
 import { SMouseEvent } from "@persagy-web/base/lib";
-import { ItemOrder } from '@persagy-web/big/lib';
+
 
 /**
  * 编辑箭头(折线)
@@ -73,18 +73,18 @@ export class SBaseArrow extends SBasePolylineEdit {
             this.begin = data.style.begin ? data.style.begin : SArrowStyleType.None;
             this.end = data.style.end ? data.style.end : SArrowStyleType.None
         }
-    } // Constructor
+    }
 
     /**
      * 鼠标按下事件
      *
      * @param event   保存事件参数
-     * @return  事件是否处理
+     * @return 事件是否处理
      */
     onMouseDown(event: SMouseEvent): boolean {
         super.onMouseDown(event)
         return true;
-    } // Function onMouseDown()
+    }
 
     /**
      * 绘制基本图形
@@ -119,7 +119,7 @@ export class SBaseArrow extends SBasePolylineEdit {
             }
         );
         painter.drawPolyline(this.pointList);
-    } // Function drawBaseLine()
+    }
 
     /**
      * 返回对象储存的相关数据
@@ -131,5 +131,5 @@ export class SBaseArrow extends SBasePolylineEdit {
         this.data.style.begin = this.begin;
         this.data.style.end = this.end;
         return super.toData();
-    } // Function toData()
-} // Class SBaseArrow
+    }
+}

src/components/editClass/big-edit/items/SBaseArrowPolyEdit.ts

@@ -55,17 +55,15 @@ export class SBaseArrowPolyEdit extends SBaseLineEdit {
 	} // Set isSingle
 
 	/**
-		 * 构造函数
-		 *
-		 * @param parent    父级
-		 * @param data      坐标集合|第一个点坐标
-		 */
-	constructor(parent: SGraphItem | null, data: Marker) {
-		
+	 * 构造函数
+	 *
+	 * @param parent    父级
+	 * @param data      坐标集合|第一个点坐标
+	 */
+	constructor(parent: SGraphItem | null, data: Marker): void {
 		super(parent, data);
-		console.log(data);
 		this.pointChange();
-	} // Constructor
+	}
 
 	/**
 	 * 根据两个顶点生成多边形数组
@@ -85,6 +83,7 @@ export class SBaseArrowPolyEdit extends SBaseLineEdit {
 			} else {
 				this._ang = line.dy > 0 ? Math.PI / 2 : (3 * Math.PI) / 2;
 			}
+
 			if (this.isSingle) {
 				this.pointList = [
 					new SPoint(0, this.arrowWidth / 2),
@@ -110,7 +109,7 @@ export class SBaseArrowPolyEdit extends SBaseLineEdit {
 				];
 			}
 		}
-	} // Function pointChange()
+	}
 
 	/**
 	 * 绘制
@@ -155,5 +154,5 @@ export class SBaseArrowPolyEdit extends SBaseLineEdit {
 				});
 			}
 		}
-	} // Function onDraw()
+	}
 }

src/components/editClass/big-edit/items/SBaseEquipment.ts

@@ -81,15 +81,17 @@ export class SBaseEquipment extends SBaseIconTextEdit {
     } // Constructor
 
     /**
-     * 设置legendData 时 对 item 做设置
+     * 设置 legendData 时对 item 做设置
      */
     initData() {
         if (!this.legendData) return;
+
         this.nodeId = this.legendData?.nodeId
         if (this.legendData.size) {
             this.sWidth = this.legendData.size.width;
             this.sHeight = this.legendData.size.height;
         }
+
         this.img.connect("onMove", this, this.changeAnchorPoint.bind(this));
         if (this.legendData.anchorList && this.legendData.anchorList.length) {
             this.anchorList = this.legendData.anchorList.map(t => {
@@ -113,6 +115,7 @@ export class SBaseEquipment extends SBaseIconTextEdit {
                 return item;
             });
         }
+
         // 存储信息点
         if (this.legendData.properties && this.legendData.properties.infoPointList) {
             const infoPointList = this.legendData.properties.infoPointList;
@@ -128,7 +131,6 @@ export class SBaseEquipment extends SBaseIconTextEdit {
             this.infoPointList = []
         }
 
-
         this.showAnchor = false;
         this.url = this.legendData.style.default.base64Url ? this.legendData.style.default.base64Url : this.legendData.style.default.url
         this.anotherMsg = this.legendData.properties.anotherMsg ? this.legendData.properties.anotherMsg : '';
@@ -136,7 +138,7 @@ export class SBaseEquipment extends SBaseIconTextEdit {
         this.y = this.legendData.pos.y;
         this.moveable = true;
         this.selectable = true;
-    }// Function initData()
+    }
 
     initUrl() {
         svgTobase64(this.url).then((res) => {
@@ -166,13 +168,12 @@ export class SBaseEquipment extends SBaseIconTextEdit {
             this._infoPointList.splice(deleteItemIndex, 1);
             this.setTextItem(val, deleteItemIndex)
         }
-        // this.addTextItem(val)
-    } //Function setMsgPoint()
+    }
 
     /**
      * 根据选中状态增加 textItem
      *
-     * @params obj	textItem文本信息
+     * @params obj	textItem 文本信息
      * @params index 文本索引
      */
     setTextItem(val: any, index: number): void {
@@ -188,6 +189,7 @@ export class SBaseEquipment extends SBaseIconTextEdit {
                     -(this.font.size * 1.25 * 0.5) + (index) * 10
                 );
             }
+
             item.font.size = val.font ? val.font : 12;
             item.isTransform = false;
             item.showSelect = false;
@@ -198,8 +200,7 @@ export class SBaseEquipment extends SBaseIconTextEdit {
             this.textItemList.splice(index, 1)
             this.scene?.removeItem(this.textItemList[index]);
         }
-        // do something
-    }// Function setTextItem()
+    }
 
     /**
      * 返回对象储存的相关数据
@@ -228,6 +229,7 @@ export class SBaseEquipment extends SBaseIconTextEdit {
                     height: this.sHeight
                 }
             }
+
             // 位置
             this.legendData.pos = {
                 x: this.x,
@@ -244,12 +246,13 @@ export class SBaseEquipment extends SBaseIconTextEdit {
                 delete obj.currentEquipMsg
                 infoPoinList.push(obj)
             });
+
             this.legendData.properties.infoPointList = infoPoinList;
             this.legendData.properties.anotherMsg = this.anotherMsg;
             this.legendData.style.default.base64Url = "";
             this.legendData.style.default.url = this.url;
             return this.legendData
         }
-    } // Function toData
+    }
 
-} // Class SBaseEquipment
+}

src/components/editClass/big-edit/items/SBaseExpainEdit.ts

@@ -45,7 +45,7 @@ import {SMouseEvent} from "@persagy-web/base/lib";
       */
      constructor(parent: SGraphItem | null, data: Marker) {
          super(parent, data);
-     } // Constructor
+     }
 
      /**
       * 鼠标按下事件
@@ -56,7 +56,7 @@ import {SMouseEvent} from "@persagy-web/base/lib";
      onMouseDown(event: SMouseEvent): boolean {
          super.onMouseDown(event);
          return true;
-     } // Function onMouseDown()
+     }
 
      /**
       * 返回对象储存的相关数据
@@ -65,5 +65,5 @@ import {SMouseEvent} from "@persagy-web/base/lib";
       */
      toData(): any {
          return super.toData()
-     } // Function toData()
- } // Class SBaseExpainEdit
+     }
+ }

src/components/editClass/big-edit/items/SBaseObjectRelation.ts

@@ -89,7 +89,8 @@ export class SBaseObjectRelation extends SGraphItem {
           painter.toPx(2 * this.lineWidth)
         ];
       }
+
       painter.drawLine(this.startPoint, this.endPoint);
     }
-  } // Function onDraw()
-} // Class SBaseObjectRelation
+  }
+}

src/components/editClass/big-edit/items/SBasePipe.ts

@@ -57,48 +57,49 @@ export class SBasePipe extends SBasePolylineEdit {
     _anchor1Id: string = "";
     get anchor1Id(): string {
         return this._anchor1Id;
-    }
+    }// get anchor1Id()
     set anchor1Id(v: string) {
         this._anchor1Id = v;
         if (this.relationData) {
             this.relationData.anchor1Id = this._anchor1Id;
         }
-    }
+    }// set anchor1Id()
+
     /** 关联锚点2ID  */
     _anchor2Id: string = "";
     get anchor2Id(): string {
         return this._anchor2Id;
-    }
+    }// get anchor2Id()
     set anchor2Id(v: string) {
         this._anchor2Id = v;
         if (this.relationData) {
             this.relationData.anchor2Id = this._anchor2Id;
         }
-    }
+    }// set anchor2Id()
 
     /** 关联节点1ID */
     _node1Id: string = "";
     get node1Id(): string {
         return this._node1Id;
-    }
+    }// get node1Id()
     set node1Id(v: string) {
         this._node1Id = v;
         if (this.relationData) {
             this.relationData.node1Id = this._node1Id;
         }
-    }
+    }// set node1Id()
 
     /** 关联节点2ID */
     _node2Id: string = "";
     get node2Id(): string {
         return this._node2Id;
-    }
+    }// get node2Id()
     set node2Id(v: string) {
         this._node2Id = v;
         if (this.relationData) {
             this.relationData.node2Id = this._node2Id;
         }
-    }
+    }// set node2Id()
 
     /**
      * 构造函数
@@ -109,8 +110,7 @@ export class SBasePipe extends SBasePolylineEdit {
     constructor(parent: SGraphItem | null, data: Relation) {
         super(parent);
         this.relationData = data;
-
-    } // Constructor
+    }
 
     /**
      * 设置relationData 时 对 item 做设置
@@ -135,12 +135,15 @@ export class SBasePipe extends SBasePolylineEdit {
         if (data.node1Id) {
             this._node1Id = data.node1Id
         }
+
         if (data.node2Id) {
             this._node2Id = data.node2Id
         }
+
         if (data.anchor1Id) {
             this._anchor1Id = data.anchor1Id
         }
+
         if (data.anchor2Id) {
             this._anchor2Id = data.anchor2Id
         }
@@ -151,13 +154,14 @@ export class SBasePipe extends SBasePolylineEdit {
             if (data.style.default.strokeColor) {
                 this.strokeColor = new SColor(data.style.default.strokeColor)
             }
+
             // 线宽
             if (data.style.default.lineWidth) {
                 this.lineWidth = data.style.default.lineWidth
             }
         };
 
-    }// Funciton initData
+    }
 
 
     /**
@@ -169,7 +173,7 @@ export class SBasePipe extends SBasePolylineEdit {
     onMouseDown(event: SMouseEvent): boolean {
         super.onMouseDown(event);
         return true;
-    } // Function onMouseDown()
+    }
 
     /**
      * 接收事件作出修改
@@ -182,6 +186,7 @@ export class SBasePipe extends SBasePolylineEdit {
                 this.pointList[0] = new SPoint(p.x - this.x, p.y - this.y)
             }
         }
+
         if (this.endAnchor) {
             // 删除equip后
             if (this.endAnchor.parent && this.endAnchor.parent.parent) {
@@ -192,6 +197,7 @@ export class SBasePipe extends SBasePolylineEdit {
             }
         }
     }
+
     /**
      * 返回对象储存的相关数据
      *
@@ -200,8 +206,8 @@ export class SBasePipe extends SBasePolylineEdit {
     toData(): any {
         this.moveToOrigin();
         const data = this.relationData;
-        console.log('todata', data)
         if (!data) return;
+
         if (this.pointList.length) {
             const Line = this.pointList.map(pos => {
                 return {
@@ -211,8 +217,9 @@ export class SBasePipe extends SBasePolylineEdit {
             });
             data.pointList = Line;
         }
+
         data.style.default.strokeColor = this.strokeColor.value;
         data.style.default.lineWidth = this.lineWidth;
         return data
-    } // Function toData()
-} // Class SBasePipe
+    }
+}

src/components/editClass/big-edit/items/SBasePipeUninTool.ts

@@ -72,7 +72,7 @@ export class SBasePipeUninTool extends SBaseImageEdit {
     onMouseDown(event: SMouseEvent): boolean {
         super.onMouseDown(event);
         return true;
-    } // Function onMouseDown()
+    }
 
     /**
      * 返回对象储存的相关数据
@@ -81,5 +81,5 @@ export class SBasePipeUninTool extends SBaseImageEdit {
      */
     toData(): any {
         return super.toData()
-    } // Function toData()
-} // Class SBasePipeUninTool
+    }
+}

src/components/editClass/big-edit/types/Anchor.ts

@@ -36,4 +36,4 @@ export interface Anchor {
     anchorId: string;
     /** 锚点的坐标 */
     pos: Point;
-} // Interface Anchor
+}

src/components/editClass/big-edit/types/ElementData.ts

@@ -40,4 +40,4 @@ export interface ElementData {
     markers: Marker[];
     /** 关系类节点 */
     relations: Relation[];
-} // Interface ElementData
+}

src/components/editClass/big-edit/types/Legend.ts

@@ -65,4 +65,4 @@ export interface Legend {
     properties?: any;
     /** 样式 */
     style?: any
-} // Interface Legend
+}

src/components/editClass/big-edit/types/Marker.ts

@@ -55,4 +55,4 @@ export interface Marker {
     style: any;
     /** 由应用自己定义 */
     properties?: any;
-} // Interface Marker
+}

src/components/editClass/big-edit/types/Relation.ts

@@ -61,4 +61,4 @@ export interface Relation {
     properties: any;
     /** 线性样式 */
     style: any
-} // Interface Relation
+}

src/components/editClass/big-edit/until.ts

@@ -1,6 +1,10 @@
-//  生成uuid
+
 import axios from "axios";
 import crypto from "crypto-js";
+
+/*
+ *  生成 uuid 字符串
+ */
 export function uuid() {
   var s: any[] = [];
   var hexDigits = "0123456789abcdef";
@@ -15,10 +19,20 @@ export function uuid() {
   return `${uuid}-${new Date().getTime()}`;
 }
 
+/**
+ * 生成 rgba 数字
+ * @param rgba rgba 字符串
+ */
 export function rgbaNum(rgba: string) {
   let val = rgba.match(/(\d(\.\d+)?)+/g);
   return val;
 }
+
+/**
+ * svg流转换为base64字符串
+ *
+ * @param url 获取base的路径
+ */
 export function svgTobase64(url: string) {
   let baseUrl: string = ''
   return new Promise((relve, res) => {

src/components/editClass/edit/SGraphEdit.ts

@@ -52,10 +52,10 @@ export class SGraphEdit extends SGraphItem {
 
     /** 存储数据 Mark */
     data: any;
-     /** 存储数据 legend */
-    legendData:any;
-     /** 存储数据 Relation */
-    relationData:any
+    /** 存储数据 legend */
+    legendData: any;
+    /** 存储数据 Relation */
+    relationData: any
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////
     //函数
     /**
@@ -70,21 +70,21 @@ export class SGraphEdit extends SGraphItem {
         }
 
         this.selectable = true;
-    } // Constructor
+    }
 
     /**
      * 重做
      */
     redo(): void {
         // do nothing
-    } // Function redo()
+    }
 
     /**
      * 撤销
      */
     undo(): void {
         // do nothing
-    } // Function undo()
+    }
 
     /**
      * 将类中得数据转换为方便存储格式的方法
@@ -93,14 +93,16 @@ export class SGraphEdit extends SGraphItem {
      */
     toData(): any {
         // do nothing
-    } // Function toData()
+    }
+
     /**
      * 将类中得数据转换为方便存储格式的方法
      *
+     * @param event 鼠标事件
      * @return 针对 item 类型保持相应的格式
      */
     onContextMenu(event: SMouseEvent): boolean {
         this.$emit('onContextMenu', event);
         return true;
-    } // Function onContextMenu()
-} // Class SGraphEdit
+    }
+}

src/components/editClass/edit/commands/SGraphAddCommand.ts

@@ -25,7 +25,7 @@
  */
 
 import { SGraphCommand } from "./SGraphCommand";
-import { SGraphItem,SGraphScene } from "@persagy-web/graph/";
+import { SGraphItem, SGraphScene } from "@persagy-web/graph/";
 import { SUndoCommand } from "@persagy-web/base";
 
 /**
@@ -46,40 +46,40 @@ export class SGraphAddCommand extends SGraphCommand {
      *
      * @param scene   item 所在场景
      * @param item    命令 item 对象
-    */
+     */
     constructor(scene: SGraphScene, item: SGraphItem) {
         super(scene);
         this.item = item;
         this.parent = item.parent;
         this.command = "SGraphAddCommand";
         this.desc = `添加对象=${item.id}`;
-    } // Constructor
+    }
 
     /**
      * 合并命令
      *
      * @param command   命令对象
      * @return 是否已执行合并
-    */
+     */
     mergeWith(command: SUndoCommand): boolean {
         return false;
-    } // Function mergeWith()
+    }
 
     /**
      * 重做
-    */
+     */
     redo(): void {
         this.item.parent = this.parent;
         // @ts-ignore
         this.parent.update();
-    } // Function redo()
+    }
 
     /**
      * 撤销
-    */
+     */
     undo(): void {
         this.item.parent = null;
         // @ts-ignore
         this.parent.update();
-    } // Function undo()
-} // Class SGraphAddCommand
+    }
+}

src/components/editClass/edit/commands/SGraphAddListCommand.ts

@@ -44,36 +44,38 @@ export class SGraphAddListCommand extends SGraphCommand {
         this.itemList = itemList;
         this.parent = itemList[0].parent;
     }
+
     /**
-   * 合并命令
-   *
-   * @return  boolean 是否已执行合并
-   * */
+     * 合并命令
+     *
+     * @param command   命令对象
+     * @return 是否已执行合并
+     */
     mergeWith(command: SUndoCommand): boolean {
         return false;
-    } // Function mergeWith()
+    }
 
     /**
      * 重做
      *
-     * */
+     */
     redo(): void {
         this.itemList.map((item) => {
             item.parent = this.parent;
         })
         // @ts-ignore
         this.parent.update();
-    } // Function redo()
+    }
 
     /**
      * 撤销
      *
-     * */
+     */
     undo(): void {
         this.itemList.map((item) => {
             item.parent = null;
         })
         // @ts-ignore
         this.parent.update();
-    } // Function undo()
+    }
 }

src/components/editClass/edit/commands/SGraphCommand.ts

@@ -40,9 +40,9 @@ export abstract class SGraphCommand extends SUndoCommand {
      * 构造函数
      *
      * @param scene   命令所属的场景类
-    */
+     */
     protected constructor(scene: SGraphScene | null) {
         super();
         this.scene = scene;
-    } // Constructor
-} // Class SGraphCommand
+    }
+}

src/components/editClass/edit/commands/SGraphDeleteListCommand.ts

@@ -48,39 +48,35 @@ export class SGraphDeleteListCommand extends SGraphCommand {
         this.itemList = itemList;
         this.parent = itemList[0].parent;
     }
+
     /**
-   * 合并命令
-   *
-   * @return  boolean 是否已执行合并
-   * */
+     * 合并命令
+     * @param command 合并对象
+     * @return 是否已执行合并
+     */
     mergeWith(command: SUndoCommand): boolean {
         return false;
-    } // Function mergeWith()
+    }
 
     /**
      * 重做
-     *
-     * */
+     */
     undo(): void {
         this.itemList.map((item) => {
             item.parent = this.parent;
         })
-        console.log('undo this.itemList', this.itemList)
         // @ts-ignore
         this.parent.update();
-    } // Function redo()
+    }
 
     /**
      * 撤销
-     *
-     * */
+     */
     redo(): void {
         this.itemList.map((item) => {
             item.parent = null;
         })
-
-        console.log('redo this.itemList', this.itemList)
         // @ts-ignore
         this.parent.update();
-    } // Function undo()
+    }
 }

src/components/editClass/edit/commands/SGraphMoveCommand.ts

@@ -52,7 +52,7 @@ export class SGraphMoveCommand extends SGraphCommand {
      * @param item     item 对象
      * @param old      移动前位置
      * @param pos      移动后位置
-    */
+     */
     constructor(
         scene: SGraphScene,
         item: SGraphItem,
@@ -65,14 +65,14 @@ export class SGraphMoveCommand extends SGraphCommand {
         this.pos = pos;
         this.command = "SGraphMoveCommand";
         this.desc = `移动对象=${item.id}`;
-    } // Constructor
+    }
 
     /**
      * 合并命令
      *
      * @param command      命令
      * @return 是否已执行合并命令
-    */
+     */
     mergeWith(command: SUndoCommand): boolean {
         if (command instanceof SGraphMoveCommand && command.item == this.item) {
             command.pos = this.pos;
@@ -80,32 +80,32 @@ export class SGraphMoveCommand extends SGraphCommand {
         }
 
         return false;
-    } // Function mergeWith()
+    }
 
     /**
      * 重做
-    */
+     */
     redo(): void {
         this.item.pos = new SPoint(this.pos.x, this.pos.y);
         this.item.update();
-    } // Function redo()
+    }
 
     /**
      * 撤销
-    */
+     */
     undo(): void {
         this.item.pos = new SPoint(this.old.x, this.old.y);
         this.item.update();
-    } // Function undo()
+    }
 
     /**
      * 命令细节描述
      *
      * @return 字符串类型的数据
-    */
+     */
     toString(): string {
         return `oldPos=${JSON.stringify(this.old)};\nnewPos=${JSON.stringify(
             this.pos
         )}`;
-    } // Function toString()
-} // Class SGraphMoveCommand
+    }
+}

src/components/editClass/edit/commands/SGraphPointListDelete.ts

@@ -52,7 +52,7 @@ export class SGraphPointListDelete extends SGraphCommand {
      * @param pointList   顶点数组
      * @param pos         删除的点
      * @param index       索引
-    */
+     */
     constructor(
         scene: SGraphScene,
         item: SGraphItem,
@@ -67,11 +67,11 @@ export class SGraphPointListDelete extends SGraphCommand {
         this.pos = pos;
         this.command = "SGraphPointListDelete";
         this.desc = `删除折点=${item.id}`;
-    } // Constructor
+    }
 
     /**
      * 执行重做操作执行
-    */
+     */
     redo(): void {
         if (this.index == null) {
             this.pointList.pop();
@@ -80,11 +80,11 @@ export class SGraphPointListDelete extends SGraphCommand {
         }
 
         this.item.update();
-    } // Function redo()
+    }
 
     /**
      * 执行取消操作执行
-    */
+     */
     undo(): void {
         if (this.pos == null) return;
 
@@ -95,17 +95,17 @@ export class SGraphPointListDelete extends SGraphCommand {
         }
 
         this.item.update();
-    } // Function undo()
+    }
 
     /**
      * 命令细节描述
      *
      * @return 字符串类型数据
-    */
+     */
     toString(): string {
         const pointList = `pointList=${JSON.stringify(this.pointList)}`;
         const pos = `pos=${JSON.stringify(this.pos)}`;
         const index = `index=${this.index}`;
         return `${index};\n${pos};\n${pointList}`;
-    } // Function toString()
-} // Class SGraphPointListDelete
+    }
+}

src/components/editClass/edit/commands/SGraphPointListInsert.ts

@@ -52,7 +52,7 @@ export class SGraphPointListInsert extends SGraphCommand {
      * @param pointList   顶点数组
      * @param pos         当前位置
      * @param index       索引
-    */
+     */
     constructor(
         scene: SGraphScene,
         item: SGraphItem,
@@ -67,11 +67,11 @@ export class SGraphPointListInsert extends SGraphCommand {
         this.pointList = pointList;
         this.command = "SGraphPointListInsert";
         this.desc = `添加折点=${item.id}`;
-    } // Constructor
+    }
 
     /**
      * 执行重做操作执行
-    */
+     */
     redo(): void {
         const point = new SPoint(this.pos.x, this.pos.y);
         if (this.index == null) {
@@ -79,30 +79,32 @@ export class SGraphPointListInsert extends SGraphCommand {
         } else {
             this.pointList.splice(this.index, 0, point);
         }
+
         this.item.update();
-    } // Function redo()
+    }
 
     /**
      * 执行取消操作执行
-    */
+     */
     undo(): void {
         if (this.index == null) {
             this.pointList.pop();
         } else {
             this.pointList.splice(this.index, 1);
         }
+
         this.item.update();
-    } // Function undo()
+    }
 
     /**
      * 命令细节描述
      *
      * @return 字符串类型数据
-    */
+     */
     toString(): string {
         const pointList = `pointList=${JSON.stringify(this.pointList)}`;
         const pos = `pos=${JSON.stringify(this.pos)}`;
         const index = `index=${this.index}`;
         return `${index};\n${pos};\n${pointList}`;
-    } // Function toString()
-} // Class SGraphPointListInsert()
+    }
+}

src/components/editClass/edit/commands/SGraphPointListUpdate.ts

@@ -55,7 +55,7 @@ export class SGraphPointListUpdate extends SGraphCommand {
      * @param old         原位置
      * @param pos         当前位置
      * @param index       索引
-    */
+     */
     constructor(
         scene: SGraphScene,
         item: SGraphItem,
@@ -72,36 +72,36 @@ export class SGraphPointListUpdate extends SGraphCommand {
         this.pointList = pointList;
         this.command = "SGraphPointListUpdate";
         this.desc = `更新折点=${item.id}`;
-    } // Constructor
+    }
 
     /**
      * 执行重做操作执行
-    */
+     */
     redo(): void {
         this.pointList[this.index].x = this.pos.x;
         this.pointList[this.index].y = this.pos.y;
         this.item.update();
-    } // Function redo()
+    }
 
     /**
      * 执行取消操作执行
-    */
+     */
     undo(): void {
         this.pointList[this.index].x = this.old.x;
         this.pointList[this.index].y = this.old.y;
         this.item.update();
-    } // Function undo()
+    }
 
     /**
      * 命令细节描述
      *
      * @return 字符串型数据
-    */
+     */
     toString(): string {
         const pointList = `pointList=${JSON.stringify(this.pointList)}`;
         const old = `old=${JSON.stringify(this.old)}`;
         const pos = `pos=${JSON.stringify(this.pos)}`;
         const index = `index=${this.index}`;
         return `${index};\n${old};\n${pos};\n${pointList}`;
-    } // Function toString()
-} // Class SGraphPointListUpdate
+    }
+}

src/components/editClass/edit/commands/SGraphPropertyCommand.ts

@@ -53,7 +53,7 @@ export class SGraphPropertyCommand<T> extends SGraphCommand {
      * @param propName    修改的属性名称
      * @param oldProp     修改前的属性值
      * @param newProp     修改后的属性值
-    */
+     */
     constructor(
         scene: SGraphScene,
         item: SGraphItem,
@@ -68,35 +68,35 @@ export class SGraphPropertyCommand<T> extends SGraphCommand {
         this.newProp = newProp;
         this.command = "SGraphPropertyCommand";
         this.command = `更新属性=${item.id}`;
-    } // Constructor
+    }
 
     /**
      * redo 操作
-    */
+     */
     redo(): void {
         // @ts-ignore
         this.item[this.propName] = this.newProp;
         this.item.update();
-    } // Function redo()
+    }
 
     /**
      * undo 操作
-    */
+     */
     undo(): void {
         // @ts-ignore
         this.item[this.propName] = this.oldProp;
         this.item.update();
-    } // Function undo()
+    }
 
     /**
      * 命令细节描述
      *
      * @return 字符串型数据
-    */
+     */
     toString(): string {
         const propName = `propName=${this.propName}`;
         const oldProp = `oldProp=${JSON.stringify(this.oldProp)}`;
         const newProp = `newProp=${JSON.stringify(this.newProp)}`;
         return `${propName};\n${oldProp};\n${newProp}`;
-    } // Function toString()
-} // Class SGraphPropertyCommand
+    }
+}

src/components/editClass/edit/enums/SGraphLayoutType.ts

@@ -46,4 +46,4 @@ export enum SGraphLayoutType {
     Center,
     /** 垂直居中 */
     Middle
-} // Enum SGraphLayoutType
+}

src/components/editClass/edit/enums/SImageShowType.ts

@@ -36,4 +36,4 @@ export enum SImageShowType {
     AutoFit,
     /** 等比缩放 */
     Equivalency
-} // Enum SImageShowType
+}

src/components/editClass/edit/enums/SLineStyle.ts

@@ -38,4 +38,4 @@ export enum SLineStyle {
     Dotted,
     /** 无 */
     None
-} // Enum SLineStyle
+}

src/components/editClass/edit/enums/SOrderSetType.ts

@@ -38,4 +38,4 @@ export enum SOrderSetType {
     After,
     /** 下移一层 */
     Before
-} // Enum SOrderSetType
+}

src/components/editClass/edit/enums/STextOrigin.ts

@@ -34,4 +34,4 @@ export enum STextOrigin {
   LeftTop,
   /** 中心点 */
   Center,
-} // Enum STextOrigin
+}

src/components/editClass/persagy-edit/PTopoParser.ts

@@ -25,9 +25,11 @@
 
 import { SParser, SItemFactory } from '@persagy-web/big/lib';
 import { BigEditFactory, Legend, Marker, Relation, ElementData } from "./../big-edit"
+
 /**
- *拓扑图解析器
- *  @author han_yao_long@163.com
+ * 拓扑图解析器
+ *
+ *  @author  韩耀龙 <han_yao_long@163.com>
  */
 export class PTopoParser extends SParser {
     /**图例节点 */
@@ -43,7 +45,7 @@ export class PTopoParser extends SParser {
     /**
      * 解析拓扑图绘制数据
      *
-     * @param   data    业务空间数据
+     * @param data    业务空间数据
      */
     parseData(data: ElementData): void {
         // 生成遍历基本图例
@@ -59,19 +61,19 @@ export class PTopoParser extends SParser {
                 this.addNode(item)
             })
         }
+
         // 生成遍历关系图例
         if (data.relations && data.relations.length) {
             data.relations.forEach((item: any) => {
                 this.addRelation(item)
             })
         }
-
-    } // Function parseData()
+    }
 
     /**
      * 添加生成 mark 实例
      *
-     * @param data Marker 图例类型数据
+     * @param data Marker   图例类型数据
      */
     addMarker(data: Marker) {
         if (data.properties && data.properties.type) {
@@ -104,12 +106,12 @@ export class PTopoParser extends SParser {
                     this.markers.push(this.factory.createBasePolygonArrowEdit(data));
             }
         }
-    } // Function addMarker()
+    }
 
     /**
      * 添加生成 Node 实例
      *
-     * @param data Legend 图例类型数据
+     * @param data Legend   图例类型数据
      */
     addNode(data: Legend) {
         let node = null;
@@ -123,17 +125,17 @@ export class PTopoParser extends SParser {
         if (node) {
             this.nodes.push(node);
         }
+
         return node
-    }//addNode Function()
+    }
 
     /**
      * 添加生成 Re 实例
      *
-     * @param data Legend 图例类型数据
+     * @param data Legend   图例类型数据
      */
     addRelation(data: Relation) {
         let relation = null;
-        console.log('relation',data)
         if (data.properties && data.properties.type) {
             switch (data.properties.type) {
                 case "BasePipe":
@@ -141,10 +143,11 @@ export class PTopoParser extends SParser {
                     break;
             }
         }
-        console.log('relation',relation)
+
         if (relation) {
             this.relations.push(relation);
         }
+
         return relation
-    }//addNode Function()
+    }
 }

src/components/editClass/persagy-edit/PTopoScene.ts

@@ -1,3 +1,28 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * ****/
+
 import { SBaseEditScene, SBasePipe, SBaseEquipment } from "./../big-edit";
 import { SGraphEdit, SGraphPropertyCommand, } from "./../edit";
 import { SMouseEvent } from "@persagy-web/base/lib";
@@ -7,20 +32,26 @@ import { rgbaNum } from "./../big-edit/until";
 // 引入命令
 import { SGraphAddCommand } from "./../edit/commands/SGraphAddCommand"
 import { SColor, SFont, SArrowStyleType } from '@persagy-web/draw/lib';
+
+/**
+ * 拓扑图场景类
+ *
+ *  @author  韩耀龙 <han_yao_long@163.com>
+ */
 export class PTopoScene extends SBaseEditScene {
     /** 图例数据 */
     legendObj: any = null;
     constructor() {
         super()
-        // // 选择绑定选额item事件
+        // 选择绑定选额item事件
         this.selectContainer.connect("listChange", this, this.listChange);
     }
 
 
     /**
-     * 选中返回的选中item回调方法
+     * 选中返回的选中 item 回调方法
      *
-     * @param   event   鼠标事件参数
+     * @param event   鼠标事件参数
      */
     listChange(list: any): void {
         const itemList: any = []
@@ -29,21 +60,22 @@ export class PTopoScene extends SBaseEditScene {
                 itemList.push(item)
             }
         })
+
         this.emitChoice(itemList);
-    } // Function listChange()
+    }
 
     /**
-     * 选中返回的选中item回调方法(用于场景的外部调用)
+     * 选中返回的选中 item 回调方法(用于场景的外部调用)
      *
-     * @param   list   选中的item数组
-    */
+     * @param list   选中的 item 数组
+     */
     emitChoice(list: any) {
-    } // Function emitChoice()
+    }
 
     /**
      * 鼠标左键按下
      *
-     * @param   event   鼠标事件参数
+     * @param event   鼠标事件参数
      */
     onMouseDown(event: SMouseEvent): any {
         this.vueOnMouseDown(event) //外部调用
@@ -52,8 +84,10 @@ export class PTopoScene extends SBaseEditScene {
                 this.setTipeEndanchor(event)
                 return true;
             }
+
             return this.grabItem.onMouseDown(event);
         }
+
         if (this.editCmd == "EditBaseLine") {
             this.addPolyLineArrow(event);
             this.clearCmdStatus();
@@ -95,33 +129,32 @@ export class PTopoScene extends SBaseEditScene {
         else if (this.editCmd == "EditBasePipe") {
             this.addBasePipe(event, this.legendObj);
             this.clearCmdStatus();
-        } else if (this.editCmd == "EditEuqipment") {
-            // 设备暂时不需要命令添加
-            // this.addEuqipment(event)
-            // this.clearCmdStatus();
         }
         else if (this.editCmd == "") {
             super.onMouseDown(event);
         }
-    } // Function onMouseDown()
+    }
 
     /**
      * 鼠标右键事件
      *
      * @param   event   鼠标事件参数
+     * @returns 是否点击右键
      */
     onContextMenu(event: SMouseEvent): boolean {
         if (!super.onContextMenu(event)) {
             this.getItem(null, [event])
         }
+
         return true
-    } // Function onContextMenu()
+    }
 
     /**
      * 修改 item 样式，数据等方法
-     * @param styletype string 修改样式类型
-     * @param changeStyle 更改样式数据
-     * @param itemList? SGraphEdit[] 如果不传入默认使用选择器中选中得item
+     *
+     * @param styletype      string 修改样式类型
+     * @param changeStyle    更改样式数据
+     * @param itemList       ? SGraphEdit[] 如果不传入默认使用选择器中选中得item
      */
     updateStyle(styletype: string, changestyle: any, itemList?: SGraphEdit[]): void {
         // 如果未传入需要修改样式的item,默认取选择器中的item
@@ -131,6 +164,7 @@ export class PTopoScene extends SBaseEditScene {
         } else {
             List = this.selectContainer.itemList;
         };
+
         let styleValue: any
         if (styletype == "strokeColor" || styletype == "backgroundColor" || styletype == "fillColor") {
             const colorlist = rgbaNum(changestyle)
@@ -144,6 +178,7 @@ export class PTopoScene extends SBaseEditScene {
         } else {
             styleValue = changestyle
         }
+
         List.forEach((item: SGraphEdit, index: number) => {
             if (item instanceof SGraphSelectContainer) {
                 return
@@ -153,12 +188,12 @@ export class PTopoScene extends SBaseEditScene {
             this.undoStack.push(new SGraphPropertyCommand(this, item, styletype, oldMsg, newMsg));
             item[styletype] = styleValue;
         })
-
-    } // Function updateStyle()
+    }
 
     /**
      * 修改指定设备得信息点
-     * @param obj Object 信息点
+     *
+     * @param obj Object    信息点
      */
     changeEquipMsgPoint(obj: any): void {
         const List = this.selectContainer.itemList.length ? this.selectContainer.itemList[0] : null;
@@ -178,33 +213,34 @@ export class PTopoScene extends SBaseEditScene {
         this.undoStack.push(new SGraphAddCommand(this, item));
         this.selectContainer.clear();
         this.selectContainer.toggleItem(item);
-    } // Function finishCreated()
+    }
 
     /**
      * 修改 cmdstatus 函数；常在在业务中调用
-     *
      */
     clearCmdStatus() {
-    } // Function clearCmdStatus()
+        //do something
+    }
 
     /**
      * 获取item (常用与场景外的调用F)
-     * @param  event SMouseEvent 鼠标事件
-     * @param  item SGraphEdit|null 返回item
+     * @param  event     SMouseEvent 鼠标事件
+     * @param  item     SGraphEdit|null 返回item
      *
      */
-    getItem(item: SGraphEdit | null, event: SMouseEvent[]) {
-        // alert('onContextMenu')
-    } // Function getItem()
+    getItem(item: SGraphEdit | null, event: SMouseEvent[]): void {
+        // do something
+    }
 
     /**
      * 获取item (常用与场景外的调用F)
-     * @param  event SMouseEvent 鼠标事件
-     * @param  item SGraphEdit|null 返回item
+     * @param  event     SMouseEvent 鼠标事件
+     * @param  item      SGraphEdit|null 返回item
      *
      */
     vueOnMouseDown(event: SMouseEvent) {
-    } // Function vueOnMouseDown()
+        // do something
+    }
 
     /**
      * 设置 item 状态
@@ -219,14 +255,15 @@ export class PTopoScene extends SBaseEditScene {
                 List.status = SItemStatus.Normal;
                 this.grabItem = null
             }
+
         }
-    } // Function setItemStatus()
+    }
 
     /**
      * 获取item (常用与场景外的调用F)
      *
-     * @params isAll 是否为全部item数据
-     * @return obj 返回保存的数据接口
+     * @params isAll    是否为全部item数据
+     * @return obj      返回保存的数据接口
      */
     save(isAll: boolean = true) {
         if (!this.view) return;
@@ -242,24 +279,30 @@ export class PTopoScene extends SBaseEditScene {
         } else {
             nodeList = this.selectContainer.itemList;
         };
+
         nodeList.forEach(item => {
             if ((item instanceof SGraphEdit) && !(item instanceof SGraphSelectContainer)) {
                 // 添加节点数据
                 if (item.data && Marktype.includes(item.data.properties.type)) {
                     markers.push(item.toData())
                 }
+
                 if (item.legendData && NodeType.includes(item.legendData.properties.type)) {
                     nodes.push(item.toData())
                 }
+
                 if (item.relationData && RelationType.includes(item.relationData.properties.type)) {
                     relations.push(item.toData())
                 }
+
             }
+
         });
+
         return {
             markers,
             nodes,
             relations
         }
-    } // Function save()
+    }
 }

src/components/editClass/persagy-edit/PTopoView.ts

@@ -1,3 +1,28 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * ****/
+
 import { SColor, SPainter } from '@persagy-web/draw/lib';
 import { SGraphView } from '@persagy-web/graph/lib';
 

src/components/editClass/persagy-edit/item/SPersagyImageEdit.ts

@@ -23,12 +23,11 @@
  *
  * *********************************************************************************************************************
  */
-import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw/";
+
 import { SBaseImageEdit } from './../../edit';
 import { SGraphItem } from "@persagy-web/graph";
 import { Marker } from "./../../big-edit/types/Marker";
 import { SMouseEvent } from "@persagy-web/base/lib";
-import { ItemOrder } from '@persagy-web/big/lib';
 
 /**
  * 编辑基础图片类

src/components/editview/baseTopoEditer.vue

@@ -8,6 +8,7 @@
       :havItem="havItem"
     ></topoTooltip>
     <canvas
+      style="border:none;outline:medium;"
       id="persagy_topo"
       :width="canvasWidth"
       :height="canvasHeight"

src/components/editview/leftToolBar.vue

@@ -9,13 +9,15 @@
           :class="{ 'btn-active': chiceStatus == index }"
           @click="openTool(index)"
         >
-          <img
+          <!-- <img
             width="20px"
             height="20px"
             :src="chiceStatus == index ? item.activeIcon : item.icon"
             alt
-          />
+          /> -->
+          <span :class="['icon', 'iconfont', 'fontstyle', item.icon]"></span>
           <span>{{ item.name }}</span>
+          <div class="btborder"></div>
         </li>
       </ul>
     </div>
@@ -42,38 +44,32 @@ const leftData = [
   {
     id: "tongyong",
     name: "通用",
-    icon: require("./../../assets/images/leftImgs/tongyong.png"),
-    activeIcon: require("./../../assets/images/leftImgs/tongyongactive.png"),
+    icon: "icon-tongyong",
   },
   {
     id: "equipment",
     name: "设备",
-    icon: require("./../../assets/images/leftImgs/equipment.png"),
-    activeIcon: require("./../../assets/images/leftImgs/equipmentactive.png"),
+    icon: "icon-shebei",
   },
   {
     id: "equipList",
     name: "设备组",
-    icon: require("./../../assets/images/leftImgs/equipList.png"),
-    activeIcon: require("./../../assets/images/leftImgs/equipListActive.png"),
+    icon: "icon-shebeizu",
   },
   {
     id: "guanxian",
     name: "管线",
-    icon: require("./../../assets/images/leftImgs/guanxian.png"),
-    activeIcon: require("./../../assets/images/leftImgs/guanxianactive.png"),
+    icon: "icon-guanxian",
   },
   {
     id: "space",
     name: "空间",
-    icon: require("./../../assets/images/leftImgs/space.png"),
-    activeIcon: require("./../../assets/images/leftImgs/spaceactive.png"),
+    icon: "icon-kongjian",
   },
   {
     id: "same",
-    name: "同类",
-    icon: require("./../../assets/images/leftImgs/same.png"),
-    activeIcon: require("./../../assets/images/leftImgs/sameactive.png"),
+    name: "楼层",
+    icon: "icon-louceng",
   },
 ];
 import legendList from "./leftToolBar/legendList.vue";
@@ -140,22 +136,31 @@ li {
       li {
         width: 100%;
         height: 58px;
-        border-bottom: 1px solid #eee;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         cursor: pointer;
+        border-right: 2px solid rgba(0, 145, 255, 0);
+        .btborder {
+          width: 30px;
+          height: 1px;
+          background: #eee;
+        }
         span {
           color: #8d9399;
           font-size: 12px;
         }
+        .fontstyle {
+          font-size: 18px;
+        }
       }
       li:hover {
-        background: #e4e5e7;
+        background: #f5f6f7;
       }
       .btn-active {
         background: #e1f2ff !important;
+        border-right: 2px solid #0091ff;
         span {
           color: #0091ff;
         }

src/components/editview/rightPropertyBar/BaseEquipment.vue

@@ -25,13 +25,6 @@
                 placeholder="请输入内容"
               ></el-input>
             </div>
-            <!-- <el-upload
-              class="avatar-uploader"
-              action="https://jsonplaceholder.typicode.com/posts/"
-              :show-file-list="false"
-            >
-              <i class="el-icon-link"></i>
-            </el-upload> -->
           </div>
           <div class="base-property base-property-left">
             <div>

src/components/editview/topToolBar.vue

@@ -3,64 +3,106 @@
     <div class="left">
       <ul>
         <li @click="topoUndo">
-          <img
-            class="lock"
-            :src="require(`./../../assets/images/undo.png`)"
-            alt
-          />
-          <span>撤销</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="撤销"
+            placement="bottom"
+          >
+            <span class="icon iconfont icon-chehui"></span>
+          </el-tooltip>
         </li>
         <li @click="topoRedo">
-          <img
-            class="lock"
-            :src="require(`./../../assets/images/redo.png`)"
-            alt
-          />
-          <span>重做</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="重做"
+            placement="bottom"
+          >
+            <span class="icon iconfont icon-zhongzuo"></span>
+          </el-tooltip>
         </li>
         <li @click="copy">
-          <img
-            class="lock"
-            :src="require(`./../../assets/images/copy.png`)"
-            alt
-          />
-          <span>复制</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="复制"
+            placement="bottom"
+          >
+            <span class="icon iconfont">&#xe673;</span>
+          </el-tooltip>
         </li>
         <li @click="paste">
-          <img
-            class="lock"
-            :src="require(`./../../assets/images/past.png`)"
-            alt
-          />
-          <span>粘贴</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="粘贴"
+            placement="bottom"
+          >
+            <span class="icon iconfont icon-niantie"></span>
+          </el-tooltip>
         </li>
         <li @click="deleteItem">
-          <img
-            class="lock"
-            :src="require(`./../../assets/images/delete.png`)"
-            alt
-          />
-          <span>删除</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="删除"
+            placement="bottom"
+          >
+            <span class="icon iconfont icon-shanchu"></span>
+          </el-tooltip>
         </li>
         <li>
-          <span class="lock icon iconfont">&#xe66d;</span>
-          <span>组合</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="组合"
+            placement="bottom"
+          >
+            <span class="icon iconfont icon-zuhe"></span>
+          </el-tooltip>
         </li>
         <li>
-          <span class="icon iconfont">&#xe66e;</span>
-          <span>打散</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="打散"
+            placement="bottom"
+          >
+            <span class="icon iconfont icon-dasan"></span>
+          </el-tooltip>
         </li>
         <li @click="setOrder('Top')">
-          <span class="icon iconfont icon-zhiding"></span>
-          <span>置顶</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="置顶"
+            placement="bottom"
+          >
+            <span class="icon iconfont icon-zhiding"></span>
+          </el-tooltip>
         </li>
         <li @click="setOrder('Bottom')">
-          <span class="icon iconfont">&#xe66a;</span>
-          <span>置底</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="置底"
+            placement="bottom"
+          >
+            <span class="icon iconfont icon-zhidi"></span>
+          </el-tooltip>
         </li>
         <li @click="setLock()">
-          <i :class="isLock ? 'el-icon-lock' : 'el-icon-unlock'" />
-          <span>{{ !isLock ? "解锁" : "锁定" }}</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="!isLock ? '解锁' : '锁定'"
+            placement="bottom"
+          >
+            <span
+              :class="[isLock ? 'el-icon-lock' : 'el-icon-unlock', 'lcoks']"
+            />
+          </el-tooltip>
         </li>
       </ul>
     </div>
@@ -143,6 +185,7 @@ li {
   justify-content: center;
   padding: 0 24px 0 24px;
   box-sizing: border-box;
+  border-bottom: 1px solid #e4e5e7;
   .left {
     ul {
       display: flex;
@@ -175,6 +218,10 @@ li {
             margin-left: 12px;
           }
         }
+        .lcoks {
+          font-size: 16px;
+          margin: 6px 0 4px 0;
+        }
       }
     }
   }

src/views/editer.vue

@@ -7,9 +7,33 @@
         <div class="project-save">自动保存成功- v {{ version }}</div>
       </div>
       <div class="right">
-        <img @click="saveTopoImg" src="./../assets/images/download.png" alt />
-        <img @click="saveTopo" src="./../assets/images/save.png" alt />
-        <img @click="issueTopo" src="./../assets/images/issue.png" alt />
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="下载"
+          placement="bottom"
+          @click="saveTopoImg"
+        >
+          <span class="icon iconfont icon-xiazai"></span>
+        </el-tooltip>
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="保存"
+          placement="bottom"
+          @click="saveTopo"
+        >
+          <span class="icon iconfont icon-baocun"></span>
+        </el-tooltip>
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="发布"
+          placement="bottom"
+          @click="issueTopo"
+        >
+          <span class="icon iconfont icon-fabu"></span>
+        </el-tooltip>
       </div>
     </div>
     <topo-editer></topo-editer>
@@ -81,7 +105,7 @@ export default {
       }
     }
     .right {
-      img {
+      span {
         margin-left: 20px;
         cursor: pointer;
       }

vue.config.js

@@ -7,22 +7,22 @@ module.exports = {
         },
         proxy: {
             '/labsl': {
-                target: 'http://39.102.40.239:8080',
+                target: 'http://60.205.177.43:8080',
                 changeOrigin: true,
                 secure: false,
             },
             '/meiku': {
-                target: 'http://39.102.40.239:8080',
+                target: 'http://60.205.177.43:8080',
                 changeOrigin: true,
                 secure: false,
             },
             '/datacenter': {
-                target: 'http://39.102.40.239:8080',
+                target: 'http://60.205.177.43:8080',
                 changeOrigin: true,
                 secure: false,
             },
             '/equip-componnet': {
-                target: 'http://39.102.40.239:8080',
+                target: 'http://60.205.177.43:8080',
                 changeOrigin: true,
                 secure: false,
             },