Merge branch 'master' of http://39.106.8.246:3003/web/persagy_topo_editer

persagyTopo/static/img/svg.ca80d8e1.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>储气罐关闭备份</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="100%" y1="45.6201638%" x2="33.2642713%" y2="45.6201638%" id="linearGradient-1">
+            <stop stop-color="#8D9399" offset="0%"></stop>
+            <stop stop-color="#C3C7CB" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="118.80596%" y1="42.0737424%" x2="33.8368157%" y2="42.0737424%" id="linearGradient-2">
+            <stop stop-color="#A1A6AA" offset="0%"></stop>
+            <stop stop-color="#D8D8D8" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="148.018027%" x2="50%" y2="24.012057%" id="linearGradient-3">
+            <stop stop-color="#8D9399" offset="0%"></stop>
+            <stop stop-color="#C3C7CB" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="148.018027%" x2="50%" y2="24.012057%" id="linearGradient-4">
+            <stop stop-color="#8D9399" offset="0%"></stop>
+            <stop stop-color="#C3C7CB" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-5">
+            <stop stop-color="#C3C7CB" offset="0%"></stop>
+            <stop stop-color="#8D9399" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-6">
+            <stop stop-color="#C3C7CB" offset="0%"></stop>
+            <stop stop-color="#8D9399" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="20200304-上传iconfont" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="设备-立体" transform="translate(-600.000000, -802.000000)">
+            <g id="储气罐" transform="translate(600.000000, 802.000000)">
+                <g id="编组-67" transform="translate(18.000000, 71.000000)"></g>
+                <g id="储气罐-关闭" transform="translate(52.000000, 25.000000)">
+                    <rect id="矩形" fill="url(#linearGradient-1)" x="40" y="0" width="14" height="14"></rect>
+                    <g id="矩形备份-97" transform="translate(10.140000, 10.140000)">
+                        <polygon id="foot" fill="#A8A8A8" points="15 123 15 140 21.08 140 24.14 123"></polygon>
+                        <polygon id="foot" fill="#A8A8A8" transform="translate(54.210000, 131.500000) scale(-1, 1) translate(-54.210000, -131.500000) " points="49.64 124.416667 49.64 140 55.72 140 58.78 123"></polygon>
+                        <path d="M0,14 C5.0719135,4.66666667 17.3598082,0 36.8636842,0 C66.1194982,0 72.2790698,8.4 74,14 L74,114 L73.997663,114.196229 C73.8429651,120.690457 65.9632558,129 37,129 C7.74418605,129 0,120.521739 0,114 L0,114 L0,14 Z" id="罐身" fill="url(#linearGradient-2)"></path>
+                    </g>
+                    <rect id="矩形" fill="#939393" x="62" y="107" width="16" height="8" rx="4"></rect>
+                    <circle id="椭圆形" fill="#C1C1C1" cx="66" cy="111" r="3"></circle>
+                    <circle id="椭圆形" fill="#8D9399" cx="48" cy="50" r="8"></circle>
+                    <circle id="椭圆形" fill="#EFF0F1" cx="48" cy="50" r="7"></circle>
+                    <path d="M1,47 L11,47 C11.6666667,49 12,51 12,53 C12,55 11.6666667,57 11,59 L1,59 L1,47 Z" id="矩形" fill="url(#linearGradient-3)"></path>
+                    <rect id="矩形" fill="url(#linearGradient-4)" x="84" y="47" width="10" height="12"></rect>
+                    <rect id="矩形备份-67" fill="url(#linearGradient-4)" x="84" y="92" width="10" height="12"></rect>
+                    <ellipse id="椭圆形备份-21" fill="#8D9399" transform="translate(94.000000, 53.000000) rotate(-270.000000) translate(-94.000000, -53.000000) " cx="94" cy="53" rx="6" ry="1.5"></ellipse>
+                    <ellipse id="椭圆形备份-28" fill="#8D9399" transform="translate(94.000000, 98.000000) rotate(-270.000000) translate(-94.000000, -98.000000) " cx="94" cy="98" rx="6" ry="1.5"></ellipse>
+                    <ellipse id="椭圆形备份-21" fill="#8D9399" transform="translate(1.500000, 53.000000) rotate(-270.000000) translate(-1.500000, -53.000000) " cx="1.5" cy="53" rx="6" ry="1.5"></ellipse>
+                    <path d="M10.14,24 C22.4733333,25.0133333 34.8066667,25.52 47.14,25.52 C59.4733333,25.52 71.8066667,25.0133333 84.14,24 L84.14,28.56 C71.8066667,29.5733333 59.4733333,30.08 47.14,30.08 C34.8066667,30.08 22.4733333,29.5733333 10.14,28.56 L10.14,24 Z" id="路径-20" fill="url(#linearGradient-5)"></path>
+                    <polygon id="路径-20备份" fill="url(#linearGradient-6)" points="10.14 121 84.14 121 84.14 125 47.14 125 10.14 125"></polygon>
+                    <polygon id="路径-19" fill="#C3C7CB" points="46 51 50 51 48 45"></polygon>
+                    <polygon id="路径-30" fill="#939393" points="50 51 48 56 46 51"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/api/home.ts

@@ -0,0 +1,8 @@
+// 登录校验接口
+import httputils from '@/api/httputils'
+const baseApi = '/graph/drafts/';
+
+//创建拓扑图
+export function creatTopo(postParams: any): any {
+    return httputils.postJson(`/labsl${baseApi}create`, postParams)
+}

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

@@ -1,10 +1,5 @@
 import { SBaseEditScene } from "./SBaseEditScene"
-import { SBaseLineEdit } from "./items/SBaseLineEdit"
-import { SBaseTextEdit } from "./items/SBaseTextEdit"
-import { SBaseImageEdit } from "./items/SBaseImageEdit"
 import { SBaseExpainEdit } from "./items/SBaseExpainEdit"
-import { SBasePolygonEdit } from "./items/SBasePolygonEdit"
-import { SBaseRectEdit } from "./items/SBaseRectEdit"
 import { Anchor } from "./types/Anchor"
 import { ElementData } from "./types/ElementData"
 import { Legend } from "./types/Legend"
@@ -12,4 +7,4 @@ import { Marker } from "./types/Marker"
 import { Relation } from "./types/Relation"
 import { BigEditFactory } from "./BigEditFactory"
 import { SBaseEquipment } from "./items/SBaseEquipment"
-export { SBaseEquipment, BigEditFactory, Anchor, Legend, Marker, Relation, ElementData, SBaseEditScene, SBaseLineEdit, SBaseTextEdit, SBaseImageEdit, SBaseExpainEdit, SBasePolygonEdit, SBaseRectEdit }
+export { SBaseEquipment, BigEditFactory, Anchor, Legend, Marker, Relation, ElementData, SBaseEditScene, SBaseExpainEdit }

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

@@ -1,83 +0,0 @@
-/*
- * *********************************************************************************************************************
- *
- *          !!
- *        .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) 2016-2020.  博锐尚格科技股份有限公司
- *        ~8888'
- *        .!88~                                                                     All rights reserved.
- *
- * *********************************************************************************************************************
- */
-import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw/";
-import { SGraphItem } from "@persagy-web/graph";
-import { Marker } from "./../types/Marker";
-import { SMouseEvent } from "@persagy-web/base/lib";
-import { SArrowEdit } from '../../edit/items/SArrowEdit';
-
-/**
- * 编辑基础箭头类
- *
- * * @author  haojianlong
- */
-export class SBaseArrowEdit extends SArrowEdit {
-    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    //属性
-    /**编辑相关操作的数据 */
-    data: Marker
-
-    constructor(parent: SGraphItem | null, data: Marker) {
-        super(parent);
-        this.data = data;
-        if (data.Style && data.Style.Default) {
-            // 关于顶点
-            if (data.Style.Default.Line) {
-                let setPointList: SPoint[];
-                setPointList = data.Style.Default.Line.map(i => {
-                    return new SPoint(i.X, i.Y)
-                });
-                this.line = setPointList;
-            }
-            // 颜色
-            if (data.Style.Default.StrokeColor) {
-                this.strokeColor = new SColor(data.Style.Default.StrokeColor)
-            }
-            // 线宽
-            if (data.Style.Default.LineWidth) {
-                this.lineWidth = data.Style.Default.LineWidth
-            }
-            // 线样式
-            if (data.Style.Default.LineStyle) {
-                this.lineStyle = data.Style.Default.LineStyle
-            }
-        }
-    }
-    /**
-     * 鼠标按下事件
-     *
-     * @param   event   保存事件参数
-     * @return  boolean
-     */
-    onMouseDown(event: SMouseEvent): boolean {
-        super.onMouseDown(event)
-        return true;
-    } // Function onMouseDown()
-
-    toData() {
-        console.log(1230)
-    }
-}

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

@@ -1,83 +0,0 @@
-/*
- * *********************************************************************************************************************
- *
- *          !!
- *        .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) 2016-2020.  博锐尚格科技股份有限公司
- *        ~8888'
- *        .!88~                                                                     All rights reserved.
- *
- * *********************************************************************************************************************
- */
-import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw/";
-import { SGraphItem } from "@persagy-web/graph";
-import { Marker } from "./../types/Marker";
-import { SMouseEvent } from "@persagy-web/base/lib";
-import { SCircleEdit } from '../../edit/items/SCircleEdit';
-
-/**
- * 编辑基础矩形类
- *
- * * @author  haojianlong
- */
-export class SBaseCircleEdit extends SCircleEdit {
-    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    //属性
-    /**编辑相关操作的数据 */
-    data: Marker
-
-    constructor(parent: SGraphItem | null, data: Marker) {
-        super(parent);
-        this.data = data;
-        if (data.Style && data.Style.Default) {
-            // 关于顶点
-            if (data.Style.Default.Line) {
-                let setPointList: SPoint[];
-                setPointList = data.Style.Default.Line.map(i => {
-                    return new SPoint(i.X, i.Y)
-                });
-                this.line = setPointList;
-            }
-            // 颜色
-            if (data.Style.Default.StrokeColor) {
-                this.strokeColor = new SColor(data.Style.Default.StrokeColor)
-            }
-            // 线宽
-            if (data.Style.Default.LineWidth) {
-                this.lineWidth = data.Style.Default.LineWidth
-            }
-            // 线样式
-            if (data.Style.Default.LineStyle) {
-                this.lineStyle = data.Style.Default.LineStyle
-            }
-        }
-    }
-    /**
-     * 鼠标按下事件
-     *
-     * @param   event   保存事件参数
-     * @return  boolean
-     */
-    onMouseDown(event: SMouseEvent): boolean {
-        super.onMouseDown(event)
-        return true;
-    } // Function onMouseDown()
-
-    toData() {
-        console.log(1230)
-    }
-}

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

@@ -24,7 +24,7 @@
  * *********************************************************************************************************************
  */
 import { SColor, SFont } from "@persagy-web/draw/";
-import { STextEdit } from './../../edit';
+import { SBaseTextEdit } from './../../edit';
 import { SGraphItem } from "@persagy-web/graph";
 import { Marker } from "./../types/Marker";
 import { SMouseEvent } from "@persagy-web/base/lib";
@@ -34,18 +34,15 @@ import { ItemOrder } from '@persagy-web/big/lib';
  *
  * * @author  韩耀龙(han_yao_long#163.com)
  */
-export class SBaseExpainEdit extends STextEdit {
+export class SBaseExpainEdit extends SBaseTextEdit {
     ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     //属性
     /**编辑相关操作的数据 */
     data: Marker
-    /** 起始锚点  */
-    startItem: SGraphItem | null = null;
-    /** 结束锚点  */
-    endItem: SGraphItem | null = null;
 
     constructor(parent: SGraphItem | null, data: Marker) {
         super(parent);
+        this.data = data;
         this.zOrder = ItemOrder.textOrder;
         this.isTransform = false;
         this.data = data;

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

@@ -1,93 +0,0 @@
-/*
- * *********************************************************************************************************************
- *
- *          !!
- *        .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) 2016-2020.  博锐尚格科技股份有限公司
- *        ~8888'
- *        .!88~                                                                     All rights reserved.
- *
- * *********************************************************************************************************************
- */
-import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw/";
-import { SLineEdit } from './../../edit';
-import { SGraphItem } from "@persagy-web/graph";
-import { Marker } from "./../types/Marker";
-import { SMouseEvent } from "@persagy-web/base/lib";
-
-/**
- * 编辑基础直线类
- *
- * * @author  韩耀龙(han_yao_long#163.com)
- */
-export class SBaseLineEdit extends SLineEdit {
-    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    //属性
-    /**编辑相关操作的数据 */
-    data: Marker
-    /** 起始锚点  */
-    startItem: SGraphItem | null = null;
-    /** 结束锚点  */
-    endItem: SGraphItem | null = null;
-
-    constructor(parent: SGraphItem | null, data: Marker) {
-        super(parent);
-        this.data = data;
-        if (data.Style && data.Style.Default) {
-            // 关于顶点
-            if (data.Style.Default.Line) {
-                let setPointList: SPoint[];
-                setPointList = data.Style.Default.Line.map(i => {
-                    return new SPoint(i.X, i.Y)
-                });
-                this.line = setPointList;
-            }
-            // 颜色
-            if (data.Style.Default.StrokeColor) {
-                this.strokeColor = new SColor(data.Style.Default.StrokeColor)
-            }
-            // 线宽
-            if (data.Style.Default.LineWidth) {
-                this.lineWidth = data.Style.Default.LineWidth
-            }
-            // 线样式
-            if (data.Style.Default.LineStyle) {
-                this.lineStyle = data.Style.Default.LineStyle
-            }
-        }
-
-    }
-    /**
-     * 鼠标按下事件
-     *
-     * @param   event   保存事件参数
-     * @return  boolean
-     */
-    onMouseDown(event: SMouseEvent): boolean {
-        super.onMouseDown(event)
-        return true;
-    } // Function onMouseDown()
-
-    toData() {
-        const Line = [{ X: this.line[0].x, Y: this.line[0].y }, { X: this.line[1].x, Y: this.line[1].y }];
-        this.data.Style.Default.Line = Line;
-        this.data.Style.Default.LineWidth = this.lineWidth;
-        this.data.Style.Default.LineStyle = this.lineStyle;
-        this.data.Style.Default.StrokeColor = this.strokeColor;
-        return this.data
-    }
-}

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

@@ -1,130 +0,0 @@
-/*
- * *********************************************************************************************************************
- *
- *          !!
- *        .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) 2016-2020.  博锐尚格科技股份有限公司
- *        ~8888'
- *        .!88~                                                                     All rights reserved.
- *
- * *********************************************************************************************************************
- */
-import { SColor, SFont,SPoint } from "@persagy-web/draw/";
-import { SPolygonEdit } from './../../edit';
-import { SGraphItem } from "@persagy-web/graph";
-import { Marker } from "./../types/Marker";
-import { SMouseEvent } from "@persagy-web/base/lib";
-import { ItemOrder } from '@persagy-web/big/lib';
-import { uuid } from "./../../big-edit/until";
-/**
- * 编辑基础多边形类
- *
- * * @author  韩耀龙(han_yao_long#163.com)
- */
-export class SBasePolygonEdit extends SPolygonEdit {
-    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    //属性
-    /**编辑相关操作的数据 */
-    data: Marker
-    /** 起始锚点  */
-    startItem: SGraphItem | null = null;
-    /** 结束锚点  */
-    endItem: SGraphItem | null = null;
-
-    constructor(parent: SGraphItem | null, data: Marker) {
-        super(parent);
-        // this.textItem.originPosition = STextOrigin.Centrum;
-        // this.textItem.isTransform = false;
-        this.zOrder = ItemOrder.polygonOrder;
-        this.data = data;
-        if (!data.ID) {
-            data.ID = uuid()
-        }
-        this.id = data.ID;
-        this.name = data.Name;
-        // this.text = data.Name;
-        if (data) {
-            this.setPointList = [];
-            let setPointList: SPoint[];
-            if (data.OutLine) {
-                if (data.OutLine[0] instanceof SPoint) {
-                    // @ts-ignore
-                    this.setPointList = data.OutLine;
-                } else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y))
-                    })
-                    this.setPointList = setPointList;
-                }
-            }
-            if (data.Properties.Zorder) {
-                this.zOrder = data.Properties.Zorder;
-            }
-            // 设置线宽
-            if (data.Properties.LineWidth) {
-                this.lineWidth = data.Properties.LineWidth;
-            }
-            if (data.Properties.StrokeColor) {
-                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
-            }
-            if (data.Properties.FillColor) {
-                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
-            }
-            if (data.Properties.TextPos) {
-                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
-            }
-            if (data.Properties.color) {
-                this.color = new SColor(data.Properties.color);
-            }
-            if (data.Properties.font) {
-                this.font = new SFont("sans-serif", data.Properties.font);
-            }
-            if (data.Properties && data.Properties.IsActive) {
-                this.isActive = data.Properties.IsActive;
-            }
-            if (data.AttachObjectIds && data.AttachObjectIds.length) {
-                this.isActive = true;
-            }
-            switch (data.Properties.LineDash) {
-                case "solid":
-                    this.lineStyle = SLineStyle.Solid;
-                    break;
-                case "dotted":
-                    this.lineStyle = SLineStyle.Dotted;
-                    break;
-                case "dashed":
-                    this.lineStyle = SLineStyle.Dashed;
-                    break;
-                default:
-                    this.lineStyle = SLineStyle.Solid;
-            }
-        }
-        /**
-         * 鼠标按下事件
-         *
-         * @param   event   保存事件参数
-         * @return  boolean
-         */
-        onMouseDown(event: SMouseEvent): boolean {
-            super.onMouseDown(event)
-            return true;
-        } // Function onMouseDown()
-
-        toData() {
-            console.log(1230)
-        }
-    }

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

@@ -1,83 +0,0 @@
-/*
- * *********************************************************************************************************************
- *
- *          !!
- *        .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) 2016-2020.  博锐尚格科技股份有限公司
- *        ~8888'
- *        .!88~                                                                     All rights reserved.
- *
- * *********************************************************************************************************************
- */
-import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw/";
-import { SGraphItem } from "@persagy-web/graph";
-import { Marker } from "./../types/Marker";
-import { SMouseEvent } from "@persagy-web/base/lib";
-import { SRectEdit } from '../../edit/items/SRectEdit';
-
-/**
- * 编辑基础矩形类
- *
- * * @author  haojianlong
- */
-export class SBaseRectEdit extends SRectEdit {
-    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    //属性
-    /**编辑相关操作的数据 */
-    data: Marker
-
-    constructor(parent: SGraphItem | null, data: Marker) {
-        super(parent);
-        this.data = data;
-        if (data.Style && data.Style.Default) {
-            // 关于顶点
-            if (data.Style.Default.Line) {
-                let setPointList: SPoint[];
-                setPointList = data.Style.Default.Line.map(i => {
-                    return new SPoint(i.X, i.Y)
-                });
-                this.line = setPointList;
-            }
-            // 颜色
-            if (data.Style.Default.StrokeColor) {
-                this.strokeColor = new SColor(data.Style.Default.StrokeColor)
-            }
-            // 线宽
-            if (data.Style.Default.LineWidth) {
-                this.lineWidth = data.Style.Default.LineWidth
-            }
-            // 线样式
-            if (data.Style.Default.LineStyle) {
-                this.lineStyle = data.Style.Default.LineStyle
-            }
-        }
-    }
-    /**
-     * 鼠标按下事件
-     *
-     * @param   event   保存事件参数
-     * @return  boolean
-     */
-    onMouseDown(event: SMouseEvent): boolean {
-        super.onMouseDown(event)
-        return true;
-    } // Function onMouseDown()
-
-    toData() {
-        console.log(1230)
-    }
-}

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

@@ -1,104 +0,0 @@
-/*
- * *********************************************************************************************************************
- *
- *          !!
- *        .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) 2016-2020.  博锐尚格科技股份有限公司
- *        ~8888'
- *        .!88~                                                                     All rights reserved.
- *
- * *********************************************************************************************************************
- */
-import { SColor, SFont } from "@persagy-web/draw/";
-import { STextEdit } from './../../edit';
-import { SGraphItem } from "@persagy-web/graph";
-import { Marker } from "./../types/Marker";
-import { SMouseEvent } from "@persagy-web/base/lib";
-import { ItemOrder } from '@persagy-web/big/lib';
-/**
- * 编辑基础文本类
- *
- * * @author  韩耀龙(han_yao_long#163.com)
- */
-export class SBaseTextEdit extends STextEdit {
-    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    //属性
-    /**编辑相关操作的数据 */
-    data: Marker
-    /** 起始锚点  */
-    startItem: SGraphItem | null = null;
-    /** 结束锚点  */
-    endItem: SGraphItem | null = null;
-
-    constructor(parent: SGraphItem | null, data: Marker) {
-        super(parent);
-        this.zOrder = ItemOrder.textOrder;
-        this.isTransform = false;
-        this.data = data;
-        this.name = data.Name;
-        this.moveTo(data.Pos.X, data.Pos.Y);
-        if (data.Size) {
-            this.width = data.Size.Width;
-            this.height = data.Size.Height;
-        }
-        if (data.Style && data.Style.Default) {
-            // 高度
-            if (data.Style.Default.Zorder) {
-                this.zOrder = data.Style.Default.Zorder;
-            }
-            // 文本
-            if (data.Style.Default.Text) {
-                this.text = data.Style.Default.Text;
-            }
-            // 文本颜色
-            if (data.Style.Default.Color) {
-                this.color = new SColor(data.Style.Default.Color);
-            }
-            // 字体大小
-            if (data.Style.Default.Font) {
-                this.font = new SFont("sans-serif", data.Style.Default.Font);;
-            }
-            // 背景色
-            if (data.Style.Default.BackgroundColor) {
-                this.backgroundColor = new SColor(data.Style.Default.BackgroundColor);
-            }
-        }
-    }
-    /**
-     * 鼠标按下事件
-     *
-     * @param   event   保存事件参数
-     * @return  boolean
-     */
-    onMouseDown(event: SMouseEvent): boolean {
-        super.onMouseDown(event)
-        return true;
-    } // Function onMouseDown()
-
-    toData(): any {
-        if (this.data.Size) {
-            this.data.Size.Width = this.width
-            this.data.Size.Height = this.height;
-        }
-        this.data.Style.Default.Zorder = this.zOrder;
-        this.data.Style.Default.Text = this.text;
-        this.data.Style.Default.Color = this.color.value;
-        this.data.Style.Default.Font = this.font.size;
-        this.data.Style.Default.BackgroundColor = this.backgroundColor.value;
-        return this.data
-    }
-}

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

@@ -1,83 +0,0 @@
-/*
- * *********************************************************************************************************************
- *
- *          !!
- *        .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) 2016-2020.  博锐尚格科技股份有限公司
- *        ~8888'
- *        .!88~                                                                     All rights reserved.
- *
- * *********************************************************************************************************************
- */
-import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw/";
-import { SGraphItem } from "@persagy-web/graph";
-import { Marker } from "./../types/Marker";
-import { SMouseEvent } from "@persagy-web/base/lib";
-import { STriangleEdit } from '../../edit/items/STriangleEdit';
-
-/**
- * 编辑基础三角形类
- *
- * * @author  haojianlong
- */
-export class SBaseTriangelEdit extends STriangleEdit {
-    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    //属性
-    /**编辑相关操作的数据 */
-    data: Marker
-
-    constructor(parent: SGraphItem | null, data: Marker) {
-        super(parent);
-        this.data = data;
-        if (data.Style && data.Style.Default) {
-            // 关于顶点
-            if (data.Style.Default.Line) {
-                let setPointList: SPoint[];
-                setPointList = data.Style.Default.Line.map(i => {
-                    return new SPoint(i.X, i.Y)
-                });
-                this.line = setPointList;
-            }
-            // 颜色
-            if (data.Style.Default.StrokeColor) {
-                this.strokeColor = new SColor(data.Style.Default.StrokeColor)
-            }
-            // 线宽
-            if (data.Style.Default.LineWidth) {
-                this.lineWidth = data.Style.Default.LineWidth
-            }
-            // 线样式
-            if (data.Style.Default.LineStyle) {
-                this.lineStyle = data.Style.Default.LineStyle
-            }
-        }
-    }
-    /**
-     * 鼠标按下事件
-     *
-     * @param   event   保存事件参数
-     * @return  boolean
-     */
-    onMouseDown(event: SMouseEvent): boolean {
-        super.onMouseDown(event)
-        return true;
-    } // Function onMouseDown()
-
-    toData() {
-        console.log(1230)
-    }
-}

src/components/editClass/edit/index.ts

@@ -25,13 +25,13 @@
  */
 import { SGraphEdit } from "./SGraphEdit";
 import { SGraphEditScene } from "./SGraphEditScene";
-
-import { SImageEdit } from "./items/SImageEdit";
-import { SLineEdit } from "./items/SLineEdit";
-import { SPolygonEdit } from "./items/SPolygonEdit";
-import { SPolylineEdit } from "./items/SPolylineEdit";
-import { STextEdit } from "./items/STextEdit";
-
+import { SBaseArrowEdit } from "./items/SBaseArrowEdit";
+import { SBaseLineEdit } from "./items/SBaseLineEdit";
+import { SBaseImageEdit } from "./items/SBaseImageEdit";
+import { SBaseRectEdit } from "./items/SBaseRectEdit"
+import { SBaseCircleEdit } from "./items/SBaseCircleEdit";
+import { SBaseTriangleEdit } from "./items/SBaseTriangleEdit"
+import { SBaseTextEdit } from "./items/SBaseTextEdit"
 import { SGraphCommand } from "./commands/SGraphCommand";
 import { SGraphAddCommand } from "./commands/SGraphAddCommand";
 import { SGraphMoveCommand } from "./commands/SGraphMoveCommand";
@@ -39,4 +39,4 @@ import { SGraphPointListDelete } from "./commands/SGraphPointListDelete";
 import { SGraphPointListInsert } from "./commands/SGraphPointListInsert";
 import { SGraphPointListUpdate } from "./commands/SGraphPointListUpdate";
 import { SGraphPropertyCommand } from "./commands/SGraphPropertyCommand";
-export { SGraphEditScene, SGraphEdit, SImageEdit, SLineEdit, SPolygonEdit, SPolylineEdit, STextEdit, SGraphCommand, SGraphAddCommand, SGraphMoveCommand, SGraphPointListDelete, SGraphPointListInsert, SGraphPointListUpdate, SGraphPropertyCommand }
+export { SBaseTextEdit, SBaseImageEdit, SBaseLineEdit, SBaseCircleEdit, SBaseTriangleEdit, SBaseRectEdit, SBaseArrowEdit, SGraphEditScene, SGraphEdit, SGraphCommand, SGraphAddCommand, SGraphMoveCommand, SGraphPointListDelete, SGraphPointListInsert, SGraphPointListUpdate, SGraphPropertyCommand }

src/components/editClass/edit/items/SArrowEdit.ts

@@ -32,13 +32,18 @@ import {
 } from "@persagy-web/graph/";
 import { SGraphEdit } from "..";
 import { SMathUtil } from '@persagy-web/big/lib/utils/SMathUtil';
-
+import { Marker } from "./../type/Marker";
 /**
  * 折线编辑类
  *
  * @author  haojianlong
  */
-export class SArrowEdit extends SGraphEdit {
+export class SBaseArrowEdit extends SGraphEdit {
+  /**编辑相关操作的数据 */
+  data: Marker
+  /** undo/redo堆栈 */
+  private undoStack: SUndoStack = new SUndoStack();
+
   /** 是否绘制完成  */
   _status: SItemStatus = SItemStatus.Normal;
   get status(): SItemStatus {
@@ -46,7 +51,10 @@ export class SArrowEdit extends SGraphEdit {
   }
   set status(v: SItemStatus) {
     this._status = v;
-    this.undoStack.clear();
+    if (this.undoStack) {
+      this.undoStack.clear();
+    }
+
     this.update();
   }
   /** 矩形两个对角 */
@@ -101,11 +109,11 @@ export class SArrowEdit extends SGraphEdit {
   /** 选中端点填充色 */
   private _activeFillColor: SColor = new SColor("#2196f3");
   get activeFillColor(): SColor {
-      return this._activeFillColor;
+    return this._activeFillColor;
   }
   set activeFillColor(v: SColor) {
-      this._activeFillColor = v;
-      this.update();
+    this._activeFillColor = v;
+    this.update();
   }
   /** 边框样式 */
   _lineStyle: SLineStyle = SLineStyle.Solid;
@@ -125,8 +133,6 @@ export class SArrowEdit extends SGraphEdit {
     this._lineWidth = v;
     this.update();
   }
-  /** undo/redo堆栈 */
-  private undoStack: SUndoStack = new SUndoStack();
 
   /**
    * 构造函数
@@ -134,20 +140,32 @@ export class SArrowEdit extends SGraphEdit {
    * @param parent    指向父对象
    * @param data      矩形数据
    */
-  constructor(parent: SGraphItem | null, l?: SPoint | SPoint[]) {
+  constructor(parent: SGraphItem | null, data: Marker) {
     super(parent);
-    this.showSelect = false;
-    if (l) {
-      if (l instanceof SPoint) {
-        this.line.push(l);
-        this._leftTop = l;
-        this._rightBottom = l;
-      } else {
-        this.line = l;
-        this.calRect()
+    // this.showSelect = false;
+    super(parent);
+    this.data = data;
+    if (data.style && data.style.default) {
+      // 关于顶点
+      if (data.style.default.line) {
+        let setPointList: SPoint[];
+        setPointList = data.style.default.line.map(i => {
+          return new SPoint(i.X, i.Y)
+        });
+        this.line = setPointList;
+      }
+      // 颜色
+      if (data.style.default.strokeColor) {
+        this.strokeColor = new SColor(data.style.default.strokeColor)
+      }
+      // 线宽
+      if (data.style.default.LineWidth) {
+        this.lineWidth = data.style.default.lineWidth
+      }
+      // 线样式
+      if (data.style.default.LineStyle) {
+        this.lineStyle = data.style.default.lineStyle
       }
-    } else {
-      this.line = [];
     }
   } // Constructor
 
@@ -251,7 +269,7 @@ export class SArrowEdit extends SGraphEdit {
      * @param   event   鼠标事件
      * @return  是否处理事件
      * */
-  onMouseMove(event: SMouseEvent): boolean {    
+  onMouseMove(event: SMouseEvent): boolean {
     if (event.shiftKey || this._verAndLeve) {
       event = this.compare(event);
     }
@@ -282,24 +300,24 @@ export class SArrowEdit extends SGraphEdit {
   onMouseUp(event: SMouseEvent): boolean {
     if (this.status == SItemStatus.Edit) {
       if (this.curIndex > -1) {
-          const p = new SPoint(
-              this.line[this.curIndex].x,
-              this.line[this.curIndex].y
-          );
-          this.recordAction(SGraphPointListUpdate, [
-              this.line,
-              this.curPoint,
-              p,
-              this.curIndex
-          ]);
+        const p = new SPoint(
+          this.line[this.curIndex].x,
+          this.line[this.curIndex].y
+        );
+        this.recordAction(SGraphPointListUpdate, [
+          this.line,
+          this.curPoint,
+          p,
+          this.curIndex
+        ]);
       }
-  } else if (this.status == SItemStatus.Normal) {
+    } else if (this.status == SItemStatus.Normal) {
       this.moveToOrigin(this.x, this.y);
       return super.onMouseUp(event);
-  }
-  this.curIndex = -1;
-  this.curPoint = null;
-  return true;
+    }
+    this.curIndex = -1;
+    this.curPoint = null;
+    return true;
     return true;
   } // Function onMouseUp()
 
@@ -490,17 +508,21 @@ export class SArrowEdit extends SGraphEdit {
       }
     } else if (this.line.length == 1) {
       if (
-          this.status == SItemStatus.Edit ||
-          this.status == SItemStatus.Create
+        this.status == SItemStatus.Edit ||
+        this.status == SItemStatus.Create
       ) {
-          // 绘制端点
-          painter.brush.color = this.fillColor;
-          painter.drawCircle(
-              this.line[0].x,
-              this.line[0].y,
-              painter.toPx(5)
-          );
+        // 绘制端点
+        painter.brush.color = this.fillColor;
+        painter.drawCircle(
+          this.line[0].x,
+          this.line[0].y,
+          painter.toPx(5)
+        );
       }
-  }
+    }
   } // Function onDraw()
+
+  toData() {
+    console.log(1230)
+  }
 } // Class SArrowEdit

src/components/editClass/edit/items/SCircleEdit.ts

@@ -30,15 +30,16 @@ import {
   SLineStyle,
   SGraphItem, SGraphPointListInsert
 } from "@persagy-web/graph/";
-import { SGraphEdit } from "..";
-
+import { SGraphEdit } from ".."; import { Marker } from "../type/Marker";
 /**
  * 折线编辑类
  *
  * @author  haojianlong
  */
-export class SCircleEdit extends SGraphEdit {
+export class SBaseCircleEdit extends SGraphEdit {
   /** 是否绘制完成  */
+  /**编辑相关操作的数据 */
+  data: Marker
   _status: SItemStatus = SItemStatus.Normal;
   get status(): SItemStatus {
     return this._status;
@@ -118,19 +119,30 @@ export class SCircleEdit extends SGraphEdit {
    * @param parent    指向父对象
    * @param data      矩形数据
    */
-  constructor(parent: SGraphItem | null, l?: SPoint | SPoint[]) {
+  constructor(parent: SGraphItem | null, data: Marker) {
     super(parent);
-    if (l) {
-      if (l instanceof SPoint) {
-        this.line.push(l);
-        this._leftTop = l;
-        this._rightBottom = l;
-      } else {
-        this.line = l;
-        this.calRect()
+    this.data = data;
+    if (data.Style && data.style.default) {
+      // 关于顶点
+      if (data.style.default.line) {
+        let setPointList: SPoint[];
+        setPointList = data.style.default.line.map(i => {
+          return new SPoint(i.X, i.Y)
+        });
+        this.line = setPointList;
+      }
+      // 颜色
+      if (data.style.default.strokeColor) {
+        this.strokeColor = new SColor(data.style.default.strokeColor)
+      }
+      // 线宽
+      if (data.style.default.lineWidth) {
+        this.lineWidth = data.style.default.lineWidth
+      }
+      // 线样式
+      if (data.style.default.lineStyle) {
+        this.lineStyle = data.style.default.lineStyle
       }
-    } else {
-      this.line = [];
     }
   } // Constructor
 
@@ -149,6 +161,9 @@ export class SCircleEdit extends SGraphEdit {
     this.update()
   }
 
+  toData() {
+    console.log(1230)
+  }
   /**
      * 鼠标按下事件
      *

src/components/editClass/edit/items/SLineEdit.ts

@@ -35,16 +35,23 @@ import {
     SLineStyle,
     SGraphItem
 } from "@persagy-web/graph/";
-import { SGraphEdit } from "./../"
-
+import { SGraphEdit } from ".."
+import { Marker } from "../type/Marker";
 /**
  * 直线编辑类
  *
  * @author  韩耀龙(han_yao_long@163.com)
  */
-export class SLineEdit extends SGraphEdit {
+export class SBaseLineEdit extends SGraphEdit {
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     //属性
+
+    /**编辑相关操作的数据 */
+    data: Marker
+    /** 起始锚点  */
+    startItem: SGraphItem | null = null;
+    /** 结束锚点  */
+    endItem: SGraphItem | null = null;
     /** X坐标最小值  */
     private minX = Number.MAX_SAFE_INTEGER;
     /** X坐标最大值  */
@@ -131,7 +138,7 @@ export class SLineEdit extends SGraphEdit {
         return this._lineWidth;
     }
     set lineWidth(v: number) {
-        console.log('lineWidth',v)
+        console.log('lineWidth', v)
         this._lineWidth = v;
         this.update();
     }
@@ -155,42 +162,33 @@ export class SLineEdit extends SGraphEdit {
      * 构造函数
      *
      * @param   parent  父级
-     * */
-    constructor(parent: SGraphItem | null);
-
-    /**
-     * 构造函数
-     *
-     * @param   parent  父级
-     * @param   line    坐标集合
-     * */
-    constructor(parent: SGraphItem | null, line: SPoint[]);
-
-    /**
-     * 构造函数
-     *
-     * @param   parent  父级
-     * @param   point   第一个点坐标
-     * */
-    constructor(parent: SGraphItem | null, point: SPoint);
-
-    /**
-     * 构造函数
-     *
-     * @param   parent  父级
      * @param   l       坐标集合|第一个点坐标
      * */
-    constructor(parent: SGraphItem | null, l?: SPoint | SPoint[]) {
+    constructor(parent: SGraphItem | null, data: Marker) {
         super(parent);
         this.showSelect = false;
-        if (l) {
-            if (l instanceof SPoint) {
-                this.line.push(l);
-            } else {
-                this.line = l;
+        this.data = data;
+        if (data.style && data.style.default) {
+            // 关于顶点
+            if (data.style.default.line) {
+                let setPointList: SPoint[];
+                setPointList = data.style.default.line.map(i => {
+                    return new SPoint(i.X, i.Y)
+                });
+                this.line = setPointList;
+            }
+            // 颜色
+            if (data.style.default.strokeColor) {
+                this.strokeColor = new SColor(data.style.default.strokeColor)
+            }
+            // 线宽
+            if (data.style.default.lineWidth) {
+                this.lineWidth = data.style.default.lineWidth
+            }
+            // 线样式
+            if (data.style.default.lineStyle) {
+                this.lineStyle = data.style.default.lineStyle
             }
-        } else {
-            this.line = [];
         }
     }
 
@@ -501,6 +499,14 @@ export class SLineEdit extends SGraphEdit {
         );
     } // Function boundingRect()
 
+    toData() {
+        const Line = [{ x: this.line[0].x, y: this.line[0].y }, { x: this.line[1].x, y: this.line[1].y }];
+        this.data.style.default.line = Line;
+        this.data.style.default.lineWidth = this.lineWidth;
+        this.data.style.default.lineStyle = this.lineStyle;
+        this.data.style.default.strokeColor = this.strokeColor;
+        return this.data
+    }
     /**
      * Item绘制操作
      *

src/components/editClass/edit/items/SPolygonEdit.ts

@@ -43,14 +43,22 @@ import {
 } from "@persagy-web/draw";
 import { SItemStatus } from "@persagy-web/big";
 import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";
-import {SGraphEdit} from ".."
-
+import { SGraphEdit } from ".."
+import { Marker } from "../type/Marker";
+import { ItemOrder } from '@persagy-web/big/lib';
 /**
  * 多边形编辑类
  *
  * @author  韩耀龙(han_yao_long@163.com)
  */
-export class SPolygonEdit extends SGraphEdit {
+export class SBasePolygonEdit extends SGraphEdit {
+    //属性
+    /**编辑相关操作的数据 */
+    data: Marker
+    /** 起始锚点  */
+    startItem: SGraphItem | null = null;
+    /** 结束锚点  */
+    endItem: SGraphItem | null = null;
     /** X坐标最小值  */
     private minX = Number.MAX_SAFE_INTEGER;
     /** X坐标最大值  */
@@ -156,8 +164,70 @@ export class SPolygonEdit extends SGraphEdit {
      *
      * @param parent    指向父对象
      */
-    constructor(parent: SGraphItem | null) {
+    constructor(parent: SGraphItem | null, data: Marker) {
         super(parent);
+        // this.textItem.originPosition = STextOrigin.Centrum;
+        // this.textItem.isTransform = false;
+        this.zOrder = ItemOrder.polygonOrder;
+        this.data = data;
+        this.name = data.Name;
+        // this.text = data.Name;
+        if (data) {
+            this.setPointList = [];
+            let setPointList: SPoint[];
+            if (data.OutLine) {
+                if (data.OutLine[0] instanceof SPoint) {
+                    // @ts-ignore
+                    this.setPointList = data.OutLine;
+                } else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y))
+                    })
+                    this.setPointList = setPointList;
+                }
+            }
+            if (data.Properties.Zorder) {
+                this.zOrder = data.Properties.Zorder;
+            }
+            // 设置线宽
+            if (data.Properties.LineWidth) {
+                this.lineWidth = data.Properties.LineWidth;
+            }
+            if (data.Properties.StrokeColor) {
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+            }
+            if (data.Properties.FillColor) {
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
+            }
+            if (data.Properties.TextPos) {
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+            }
+            if (data.Properties.color) {
+                this.color = new SColor(data.Properties.color);
+            }
+            if (data.Properties.font) {
+                this.font = new SFont("sans-serif", data.Properties.font);
+            }
+            if (data.Properties && data.Properties.IsActive) {
+                this.isActive = data.Properties.IsActive;
+            }
+            if (data.AttachObjectIds && data.AttachObjectIds.length) {
+                this.isActive = true;
+            }
+            switch (data.Properties.LineDash) {
+                case "solid":
+                    this.lineStyle = SLineStyle.Solid;
+                    break;
+                case "dotted":
+                    this.lineStyle = SLineStyle.Dotted;
+                    break;
+                case "dashed":
+                    this.lineStyle = SLineStyle.Dashed;
+                    break;
+                default:
+                    this.lineStyle = SLineStyle.Solid;
+            }
+        }
     }
 
     //////////////////

src/components/editClass/edit/items/SPolylineEdit.ts

@@ -37,13 +37,13 @@ import {
     SGraphItem
 } from "@persagy-web/graph/";
 import {SGraphEdit} from ".."
-
+import { Marker } from "../type/Marker";
 /**
  * 折线编辑类
  *
  * @author  韩耀龙(han_yao_long@163.com)
  */
-export class SPolylineEdit extends SGraphEdit {
+export class SBasePolylineEdit extends SGraphEdit {
     /** X坐标最小值  */
     private minX = Number.MAX_SAFE_INTEGER;
     /** X坐标最大值  */

src/components/editClass/edit/items/SRectEdit.ts

@@ -31,13 +31,13 @@ import {
   SGraphItem, SGraphPointListInsert
 } from "@persagy-web/graph/";
 import { SGraphEdit } from "..";
-
+import { Marker } from "../type/Marker";
 /**
  * 折线编辑类
  *
  * @author  haojianlong
  */
-export class SRectEdit extends SGraphEdit {
+export class SBaseRectEdit extends SGraphEdit {
   /** 是否绘制完成  */
   _status: SItemStatus = SItemStatus.Normal;
   get status(): SItemStatus {
@@ -48,6 +48,8 @@ export class SRectEdit extends SGraphEdit {
     this.undoStack.clear();
     this.update();
   }
+  width: number = 0;
+  height: number = 0;
   /** 矩形两个对角 */
   private _line: SPoint[] = [];
   get line(): SPoint[] {
@@ -59,7 +61,7 @@ export class SRectEdit extends SGraphEdit {
   } // Get line
   /** 矩形左上角 */
   private _leftTop: SPoint = new SPoint();
-  /** 矩形右下角 */ 
+  /** 矩形右下角 */
   private _rightBottom: SPoint = new SPoint();
   /** 绘制矩形的圆角半径 */
   private _radius: number = 0;
@@ -111,6 +113,7 @@ export class SRectEdit extends SGraphEdit {
   }
   /** undo/redo堆栈 */
   private undoStack: SUndoStack = new SUndoStack();
+  data: Marker
 
   /**
    * 构造函数
@@ -118,19 +121,30 @@ export class SRectEdit extends SGraphEdit {
    * @param parent    指向父对象
    * @param data      矩形数据
    */
-  constructor(parent: SGraphItem | null, l?: SPoint | SPoint[]) {
+  constructor(parent: SGraphItem | null, data: Marker) {
     super(parent);
-    if (l) {
-      if (l instanceof SPoint) {
-        this.line.push(l);
-        this._leftTop = l;
-        this._rightBottom = l;
-      } else {
-        this.line = l;
-        this.calRect()
+    this.data = data;
+    if (data.style && data.style.default) {
+      // 关于顶点
+      if (data.style.default.line) {
+        let setPointList: SPoint[];
+        setPointList = data.style.default.line.map(i => {
+          return new SPoint(i.x, i.y)
+        });
+        this.line = setPointList;
+      }
+      // 颜色
+      if (data.style.default.strokeColor) {
+        this.strokeColor = new SColor(data.style.default.strokeColor)
+      }
+      // 线宽
+      if (data.style.default.lineWidth) {
+        this.lineWidth = data.style.default.lineWidth
+      }
+      // 线样式
+      if (data.style.default.lineStyle) {
+        this.lineStyle = data.style.default.lineStyle
       }
-    } else {
-      this.line = [];
     }
   } // Constructor
 
@@ -203,7 +217,7 @@ export class SRectEdit extends SGraphEdit {
    * 计算矩形的左上角和右下角
   */
   private calRect(): void {
-    if (this.line.length>1){
+    if (this.line.length > 1) {
       const fi = this.line[0];
       const se = this.line[1];
       let minx, maxx, miny, maxy;
@@ -241,6 +255,8 @@ export class SRectEdit extends SGraphEdit {
       this.status = SItemStatus.Normal;
       this.releaseItem();
       this.$emit("finishCreated");
+      this.width = this.boundingRect().width;
+      this.height = this.boundingRect().height;
     }
     this.calRect()
     this.update();
@@ -305,6 +321,10 @@ export class SRectEdit extends SGraphEdit {
     }
   } // Function cancelOperate()
 
+  toData() {
+    console.log(1230)
+  }
+
   /**
    * Item绘制操作
    *
@@ -317,14 +337,14 @@ export class SRectEdit extends SGraphEdit {
       painter.pen.lineWidth = this.lineWidth;
       if (this.lineStyle == SLineStyle.Dashed) {
         painter.pen.lineDash = [
-            painter.toPx(this.lineWidth * 3),
-            painter.toPx(this.lineWidth * 7)
+          painter.toPx(this.lineWidth * 3),
+          painter.toPx(this.lineWidth * 7)
         ];
       } else if (this.lineStyle == SLineStyle.Dotted) {
-          painter.pen.lineDash = [
-              painter.toPx(this.lineWidth * 2),
-              painter.toPx(this.lineWidth * 2)
-          ];
+        painter.pen.lineDash = [
+          painter.toPx(this.lineWidth * 2),
+          painter.toPx(this.lineWidth * 2)
+        ];
       }
       if (this.radius != 0) {
         painter.drawRoundRect(this._leftTop, this._rightBottom, this.radius);

src/components/editClass/edit/items/STextEdit.ts

@@ -27,14 +27,22 @@ import { SPainter, SRect, SColor, SFont, SPoint, SSize } from "@persagy-web/draw
 import { SGraphItem, STextOrigin, SLineStyle, SAnchorItem } from "@persagy-web/graph/";
 import { SItemStatus } from "@persagy-web/big";
 import { SGraphEdit } from ".."
+import { Marker } from "../type/Marker";
+import { ItemOrder } from '@persagy-web/big/lib';
 /**
  * 文本编辑类
  *
  * @author  韩耀龙(han_yao_long@163.com)
  */
-export class STextEdit extends SGraphEdit {
+export class SBaseTextEdit extends SGraphEdit {
     /////////////////////////////////////////////////////////////////////////////////////////////////////////////
     //属性
+    /**编辑相关操作的数据 */
+    data: Marker
+    /** 起始锚点  */
+    startItem: SGraphItem | null = null;
+    /** 结束锚点  */
+    endItem: SGraphItem | null = null;
     /**编辑状态 */
     protected _status: SItemStatus = SItemStatus.Normal;
     get status(): SItemStatus {
@@ -195,12 +203,40 @@ export class STextEdit extends SGraphEdit {
      * @param   parent      指向父Item
      * @param   str         文本内容
      */
-    constructor(parent: SGraphItem | null, str: string = "") {
+    constructor(parent: SGraphItem | null,data:Marker) {
         super(parent);
         this.showSelect = false;
-        this._text = str;
-        this._font = new SFont("sans-serif", 12);
-        this.height = 12;
+        this.zOrder = ItemOrder.textOrder;
+        this.isTransform = false;
+        this.data = data;
+        this.name = data.name;
+        this.moveTo(data.pos.x, data.pos.y);
+        if (data.size) {
+            this.width = data.size.Width;
+            this.height = data.size.Height;
+        }
+        if (data.style && data.style.default) {
+            // 高度
+            if (data.style.default.zorder) {
+                this.zOrder = data.style.default.zorder;
+            }
+            // 文本
+            if (data.style.default.text) {
+                this.text = data.style.default.text;
+            }
+            // 文本颜色
+            if (data.style.default.color) {
+                this.color = new SColor(data.style.default.color);
+            }
+            // 字体大小
+            if (data.style.default.font) {
+                this.font = new SFont("sans-serif", data.style.default.font);;
+            }
+            // 背景色
+            if (data.style.default.backgroundColor) {
+                this.backgroundColor = new SColor(data.style.default.backgroundColor);
+            }
+        }
     } // Constructor
 
     /**

src/components/editClass/edit/items/STriangleEdit.ts

@@ -31,13 +31,13 @@ import {
   SGraphItem, SGraphPointListInsert
 } from "@persagy-web/graph/";
 import { SGraphEdit } from "..";
-
+import { Marker } from "../type/Marker";
 /**
  * 折线编辑类
  *
  * @author  haojianlong
  */
-export class STriangleEdit extends SGraphEdit {
+export class SBaseTriangleEdit extends SGraphEdit {
   /** 是否绘制完成  */
   _status: SItemStatus = SItemStatus.Normal;
   get status(): SItemStatus {
@@ -48,6 +48,8 @@ export class STriangleEdit extends SGraphEdit {
     this.undoStack.clear();
     this.update();
   }
+  /**编辑相关操作的数据 */
+  data: Marker
   /** 矩形两个对角 */
   private _line: SPoint[] = [];
   get line(): SPoint[] {
@@ -108,20 +110,31 @@ export class STriangleEdit extends SGraphEdit {
    * @param parent    指向父对象
    * @param data      矩形数据
    */
-  constructor(parent: SGraphItem | null, l?: SPoint | SPoint[]) {
+  constructor(parent: SGraphItem | null, data: Marker) {
     super(parent);
-    if (l) {
-      if (l instanceof SPoint) {
-        this.line.push(l);
-        this._leftTop = l;
-        this._rightBottom = l;
-      } else {
-        this.line = l;
-        this.calRect()
-      }
-    } else {
-      this.line = [];
-    }
+    this.data = data;
+    // if (data.Style && data.Style.Default) {
+    //   // 关于顶点
+    //   if (data.Style.Default.Line) {
+    //     let setPointList: SPoint[];
+    //     setPointList = data.Style.Default.Line.map(i => {
+    //       return new SPoint(i.X, i.Y)
+    //     });
+    //     this.line = setPointList;
+    //   }
+    //   // 颜色
+    //   if (data.Style.Default.StrokeColor) {
+    //     this.strokeColor = new SColor(data.Style.Default.StrokeColor)
+    //   }
+    //   // 线宽
+    //   if (data.Style.Default.LineWidth) {
+    //     this.lineWidth = data.Style.Default.LineWidth
+    //   }
+    //   // 线样式
+    //   if (data.Style.Default.LineStyle) {
+    //     this.lineStyle = data.Style.Default.LineStyle
+    //   }
+    // }
   } // Constructor
 
   /**
@@ -223,7 +236,7 @@ export class STriangleEdit extends SGraphEdit {
   private calTriangel(): void {
     this.pointList = [];
     this.pointList.push(new SPoint(this._leftTop.x, this._rightBottom.y))
-    this.pointList.push(new SPoint((this._leftTop.x+this._rightBottom.x)/2, this._leftTop.y))
+    this.pointList.push(new SPoint((this._leftTop.x + this._rightBottom.x) / 2, this._leftTop.y))
     this.pointList.push(new SPoint(this._rightBottom.x, this._rightBottom.y))
   } // Function calRect
 
@@ -318,14 +331,14 @@ export class STriangleEdit extends SGraphEdit {
       painter.pen.lineWidth = this.lineWidth;
       if (this.lineStyle == SLineStyle.Dashed) {
         painter.pen.lineDash = [
-            painter.toPx(this.lineWidth * 3),
-            painter.toPx(this.lineWidth * 7)
+          painter.toPx(this.lineWidth * 3),
+          painter.toPx(this.lineWidth * 7)
         ];
       } else if (this.lineStyle == SLineStyle.Dotted) {
-          painter.pen.lineDash = [
-              painter.toPx(this.lineWidth * 2),
-              painter.toPx(this.lineWidth * 2)
-          ];
+        painter.pen.lineDash = [
+          painter.toPx(this.lineWidth * 2),
+          painter.toPx(this.lineWidth * 2)
+        ];
       }
       painter.drawPolygon(this.pointList);
     }

src/components/editClass/edit/type/Anchor.ts

@@ -0,0 +1,41 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+
+
+import { Point } from "@persagy-web/big/lib/types/Point";
+
+/**
+ * 锚点item接口
+ *
+ * @author  张宇
+ */
+export interface Anchor {
+    /** 锚点ID */
+    ID: string;
+    /** 锚点的坐标  */
+    Pos: Point;
+} // Interface Anchor

src/components/editClass/edit/type/ElementData.ts

@@ -0,0 +1,42 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+
+
+import { Legend } from "./Legend";
+import { Marker } from "./Marker";
+import { Relation } from "./Relation";
+
+/**
+ * 系统图数据接口
+ *
+ * @author  张宇
+ */
+export interface ElementData {
+    Nodes: Legend[];
+    Markers: Marker[];
+    Relations: Relation[];
+} // Interface ElementData

src/components/editClass/edit/type/Legend.ts

@@ -0,0 +1,69 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+
+import { Anchor } from "./Anchor";
+import { Point } from "@persagy-web/big/lib/types/Point";
+import { Size } from "@persagy-web/big/lib/types/Size";
+import { SPoint } from '@persagy-web/draw/lib';
+
+/**
+ * 图例节点接口
+ *
+ * @author  张宇
+ */
+export interface Legend {
+    /** ID */
+    iD: string;
+    /** 名称  */
+    name: string;
+    /** 返回工程信息化对象 ID 列表 */
+    attachObjectIds?: any[];
+    /** 图标，区域类型  */
+    graphElementType: string;
+    /** 对应的图例ID  */
+    graphElementId: string;
+    /** 图例数量  */
+    num?: number;
+    /** 位置  */
+    pos: Point;
+    /** item类型 */
+    type: string
+    /** 缩放  */
+    scale?: Point;
+    /** 旋转  */
+    rolate?: Point;
+    /** 大小  */
+    size?: Size;
+    /** 锚点List  */
+    anchorList?: Anchor[];
+    /** 轮廓线  */
+    outLine?: Point[] | SPoint[];
+    /** 由应用自己定义  */
+    properties?: any;
+     /** zone 区分防火分区和石材铺装  */
+    subType?:string
+} // Interface Legend

src/components/editClass/edit/type/Marker.ts

@@ -0,0 +1,56 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+
+
+import { Point } from "@persagy-web/graph/lib/types/Point";
+import { Size } from "@persagy-web/big/lib/types/Size";
+
+/**
+ * 标识对象接口
+ *
+ * @author  张宇
+ */
+export interface Marker {
+    /** ID */
+    iD?: string;
+    /** 名称  */
+    name: string;
+    /** 图标（Image），线类型(Line) */
+    type: string;
+    /** 位置  */
+    pos: Point;
+    /** 缩放  */
+    scale?: Point;
+    /** 旋转  */
+    rolate?: Point;
+    /** 大小  */
+    size?: Size;
+    /** 绘制时得数据以及样式 */
+    style:any;
+    /** 由应用自己定义  */
+    properties?: any;
+} // Interface Marker

src/components/editClass/edit/type/Relation.ts

@@ -0,0 +1,60 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+
+
+import { SRelationDir } from "@persagy-web/big/lib/enums/SRelationDir";
+import { Point } from "@persagy-web/big/lib/types/Point";
+
+/**
+ * 管线对象关系接口
+ *
+ * @author  张宇
+ */
+export interface Relation {
+    /** ID */
+    iD: string;
+    /** 名称 */
+    name: string;
+    /** 对应的图例ID */
+    graphElementId: string;
+    /** 关联节点1_id */
+    node1ID?: string;
+    /** 关联节点2_id */
+    node2ID?: string;
+    /** 关联锚点1_id  */
+    anchor1ID?: string;
+    /** 关联锚点2_id */
+    anchor2ID?: string;
+    /** 方向（0：无向，1：节点1到节点2，2：节点2到节点1） */
+    dir?: SRelationDir;
+    /** 线类型（0：直线，1：水平/垂直线，2：曲线） */
+    lineType: string;
+    /** 线的顶点坐标 */
+    pointList: Point[];
+    /** 线的绘图样式 */
+    properties?: any;
+} // Interface Relation

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

@@ -1,18 +1,14 @@
-import { SBaseEditScene, SBaseLineEdit, SBaseTextEdit, SBaseExpainEdit, SBaseRectEdit, SBaseEquipment } from "./../big-edit";
-import { SPersagyImageEdit } from "./"
-// import { SGraphItem } from "@persagy-web/graph/";
-import { SGraphEdit } from "./../edit"
+import { SBaseEditScene, SBaseExpainEdit, SBaseEquipment } from "./../big-edit";
+import { SBaseRectEdit, SBaseLineEdit, SBaseTextEdit, SGraphEdit, SBaseArrowEdit ,SBaseCircleEdit,SBaseTriangleEdit} from "./../edit";
+// import { SPersagyImageEdit } from "./"
 import { SMouseEvent } from "@persagy-web/base/lib";
 import { SGraphSelectContainer, SLineStyle } from "@persagy-web/graph";
 import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
-import { uuid, rgbaNum } from "./../big-edit/until";
+import { rgbaNum } from "./../big-edit/until";
 
 // 引入命令
 import { SGraphAddCommand } from "./../edit/commands/SGraphAddCommand"
 import { SColor } from '@persagy-web/draw/lib';
-import { SBaseTriangelEdit } from '../big-edit/items/SBaseTriangleEdit';
-import { SBaseArrowEdit } from '../big-edit/items/SBaseArrowEdit';
-import { SBaseCircleEdit } from '../big-edit/items/SBaseCircleEdit';
 export class PTopoScene extends SBaseEditScene {
     constructor() {
         super()
@@ -26,7 +22,13 @@ export class PTopoScene extends SBaseEditScene {
      * @param   event   鼠标事件参数
      */
     listChange(list: any): void {
-        this.emitChoice(list.itemList);
+        const itemList: any = []
+        list.itemList.forEach((item: any) => {
+            if ((item instanceof SGraphEdit) && !(item instanceof SGraphSelectContainer)) {
+                itemList.push(item)
+            }
+        })
+        this.emitChoice(itemList);
     }
 
     /**
@@ -45,35 +47,37 @@ export class PTopoScene extends SBaseEditScene {
     onMouseDown(event: SMouseEvent): any {
         this.vueOnMouseDown(event) //外部调用
         if (this.editCmd == "EditBaseLine") {
-            this.addLine(event)
-            this.clearCmdStatus();
-        } else if (this.editCmd == "EditBasetext") {
-            this.addTextItem(event);
-            this.clearCmdStatus();
-        } else if (this.editCmd == "BaseExplain") {
-            this.addExplainItem(event);
-            this.clearCmdStatus();
-        } else if (this.editCmd == "EditBaseImage") {
-            this.addImageItem(event)
-            this.clearCmdStatus();
-        } else if (this.editCmd == "EditBasePolygon") {
-            console.log('编辑多边形')
-        } else if (this.editCmd == "EditBaseRect") {
-            this.addRectItem(event)
-            this.clearCmdStatus();
-        } else if (this.editCmd == "EditBaseTriangle") {
-            this.addTriangleItem(event)
+            // this.addLine(event)
             this.clearCmdStatus();
-        } else if (this.editCmd == "EditBaseCircle") {
-            this.addCircleItem(event)
-            this.clearCmdStatus();
-        } else if (this.editCmd == "EditBaseArrows") {
-            this.addArrowsItem(event)
-            this.clearCmdStatus();
-        } else if (this.editCmd == "EditEuqipment") {
-            this.addEuqipment(event)
-            this.clearCmdStatus();
-        } else if (this.editCmd == "") {
+        }
+        // else if (this.editCmd == "EditBasetext") {
+        //     this.addTextItem(event);
+        //     this.clearCmdStatus();
+        // } else if (this.editCmd == "BaseExplain") {
+        //     this.addExplainItem(event);
+        //     this.clearCmdStatus();
+        // } else if (this.editCmd == "EditBaseImage") {
+        //     this.addImageItem(event)
+        //     this.clearCmdStatus();
+        // } else if (this.editCmd == "EditBasePolygon") {
+        //     console.log('编辑多边形')
+        // } else if (this.editCmd == "EditBaseRect") {
+        //     this.addRectItem(event)
+        //     this.clearCmdStatus();
+        // } else if (this.editCmd == "EditBaseTriangle") {
+        //     this.addTriangleItem(event)
+        //     this.clearCmdStatus();
+        // } else if (this.editCmd == "EditBaseCircle") {
+        //     this.addCircleItem(event)
+        //     this.clearCmdStatus();
+        // } else if (this.editCmd == "EditBaseArrows") {
+        //     this.addArrowsItem(event)
+        //     this.clearCmdStatus();
+        // } else if (this.editCmd == "EditEuqipment") {
+        //     this.addEuqipment(event)
+        //     this.clearCmdStatus();
+        // }
+        else if (this.editCmd == "") {
             super.onMouseDown(event);
         }
     }
@@ -98,22 +102,22 @@ export class PTopoScene extends SBaseEditScene {
     addLine(event: SMouseEvent): void {
         const data = {
             /** 名称  */
-            Name: '基础直线',
+            name: '基础直线',
             /** 图标（Image），线类型(Line) */
-            Type: "Line",
+            type: "Line",
             /** 缩放比例（Image），线类型(Line) */
-            Scale: { X: 1, Y: 1, Z: 1 },
+            scale: { x: 1, y: 1, z: 1 },
             /** 缩放比例（Image），线类型(Line) */
-            Rolate: { X: 0, Y: 0, Z: 0 },
+            rolate: { x: 0, y: 0, z: 0 },
             /** 位置  */
-            Pos: { X: 0, Y: 0 },
+            pos: { x: 0, y: 0 },
             /** 由应用自己定义  */
-            Properties: {
-                Type: "BaseLine"           // 自定义类型用于区分mark与node
+            properties: {
+                type: "BaseLine"           // 自定义类型用于区分mark与node
             },
-            Style: {
-                Default: {
-                    Line: [{ X: event.x, Y: event.y }],
+            style: {
+                default: {
+                    line: [{ x: event.x, y: event.y }],
                 }
 
             }
@@ -139,22 +143,22 @@ export class PTopoScene extends SBaseEditScene {
     addTextItem(event: SMouseEvent): void {
         const data = {
             /** 名称  */
-            Name: '基础文本',
+            name: '基础文本',
             /** 图标 */
-            Type: "Text",
+            type: "Text",
             /** 位置  */
-            Pos: { X: event.x, Y: event.y },
-            Size: { Width: 0, Height: 0 },
+            pos: { x: event.x, y: event.y },
+            size: { width: 0, height: 0 },
             /** 由应用自己定义  */
-            Properties: {
-                Type: "BaseText"           // 自定义类型用于区分mark与node
+            properties: {
+                type: "BaseText"           // 自定义类型用于区分mark与node
             },
-            Style: {
-                Default: {
-                    Text: '请在右侧属性栏输入文字！',
-                    Color: "#646c73",
+            style: {
+                default: {
+                    text: '请在右侧属性栏输入文字！',
+                    color: "#646c73",
                     Font: 14,
-                    BackgroundColor: "#f7f9facc",
+                    Backgroundcolor: "#f7f9facc",
                 }
             }
         }
@@ -176,21 +180,21 @@ export class PTopoScene extends SBaseEditScene {
     addExplainItem(event: SMouseEvent): void {
         const data = {
             /** 名称  */
-            Name: '基础注释文本',
+            name: '基础注释文本',
             /** 图标 */
-            Type: "Text",
+            type: "Text",
             /** 位置  */
-            Pos: { X: event.x, Y: event.y },
+            pos: { x: event.x, y: event.y },
             /** 由应用自己定义  */
-            Properties: {
-                Type: "BaseExplain",
+            properties: {
+                type: "BaseExplain",
             },
-            Style: {
-                Default: {
-                    Text: '请在右侧属性栏输入文字！',
-                    Color: "#646c73",
+            style: {
+                default: {
+                    text: '请在右侧属性栏输入文字！',
+                    color: "#646c73",
                     Font: 14,
-                    BackgroundColor: "#f7f9facc",
+                    Backgroundcolor: "#f7f9facc",
                 }
             }
         }
@@ -215,24 +219,24 @@ export class PTopoScene extends SBaseEditScene {
     addImageItem(event: SMouseEvent): void {
         const data = {
             /** 名称  */
-            Name: '基础图片',
-            Num: 1,
+            name: '基础图片',
+            num: 1,
             /** 图标（Image），线类型(Line) */
-            Type: "Image",
+            type: "Image",
             /** 位置  */
-            Pos: { X: event.x, Y: event.y },
+            pos: { x: event.x, y: event.y },
             /** 由应用自己定义  */
-            Properties: {
-                Type: "BaseImage",
+            properties: {
+                type: "BaseImage",
             },
-            Style: {
-                Default: {
-                    StrokeColor: "#c0ccda",
-                    Url: '',
+            style: {
+                default: {
+                    strokecolor: "#c0ccda",
+                    url: '',
                 }
             }
         }
-        const item = new SPersagyImageEdit(null, data);
+        // const item = new SPersagyImageEdit(null, data);
         item.selectable = true;
         item.moveable = true;
         this.addItem(item);
@@ -246,18 +250,17 @@ export class PTopoScene extends SBaseEditScene {
      */
     addRectItem(event: SMouseEvent): void {
         const data = {
-            ID: uuid(),
-            Name: '基础矩形',
+            name: '基础矩形',
             /** 图标（Image），线类型(Line) */
-            Type: "Zone",
+            type: "Zone",
             /** 位置  */
-            Pos: { X: 0, Y: 0 },
-            Properties: {
-                Type: "BaseRect",
+            pos: { x: 0, y: 0 },
+            properties: {
+                type: "BaseRect",
             },
-            Style: {
-                Default: {
-                    Line: [{ X: event.x, Y: event.y }],
+            style: {
+                default: {
+                    line: [{ x: event.x, y: event.y }],
                 }
             }
         }
@@ -266,7 +269,9 @@ export class PTopoScene extends SBaseEditScene {
         this.addItem(rectItem);
         this.undoStack.push(new SGraphAddCommand(this, rectItem));
         rectItem.selectable = true;
+        rectItem.moveable = true;
         this.grabItem = rectItem;
+        rectItem.isTransform = true
         rectItem.connect("finishCreated", this, this.finishCreated);
         rectItem.connect("onContextMenu", this, this.getItem);
         if (this.view) {
@@ -279,24 +284,24 @@ export class PTopoScene extends SBaseEditScene {
      */
     addTriangleItem(event: SMouseEvent): void {
         const data = {
-            ID: uuid(),
-            Name: '基础三角形',
-            Type: "Zone",
-            Pos: { X: 0, Y: 0 },
-            Properties: {
-                Type: "BaseTriangle",
+            name: '基础三角形',
+            type: "Zone",
+            pos: { x: 0, y: 0 },
+            properties: {
+                type: "BaseTriangle",
             },
-            Style: {
-                Default: {
-                    Line: [{ X: event.x, Y: event.y }],
+            style: {
+                default: {
+                    line: [{ x: event.x, y: event.y }],
                 }
             }
         }
-        const triangleItem = new SBaseTriangelEdit(null, data);
+        const triangleItem = new SBaseTriangleEdit(null, data);
         triangleItem.status = SItemStatus.Create;
         this.addItem(triangleItem);
         this.undoStack.push(new SGraphAddCommand(this, triangleItem));
         triangleItem.selectable = true;
+        triangleItem.moveable = true;
         this.grabItem = triangleItem;
         triangleItem.connect("finishCreated", this, this.finishCreated);
         triangleItem.connect("onContextMenu", this, this.getItem);
@@ -310,21 +315,21 @@ export class PTopoScene extends SBaseEditScene {
      */
     addArrowsItem(event: SMouseEvent): void {
         const data = {
-            ID: uuid(),
-            Name: '基础箭头',
-            Type: "Zone",
-            Pos: { X: 0, Y: 0 },
-            Properties: {
-                Type: "BaseArrow",
+            name: '基础箭头',
+            type: "Zone",
+            pos: { x: 0, y: 0 },
+            properties: {
+                type: "BaseArrow",
             },
-            Style: {
-                Default: {
-                    Line: [{ X: event.x, Y: event.y }],
+            style: {
+                default: {
+                    line: [{ x: event.x, y: event.y }],
                 }
             }
         }
         const arrowItem = new SBaseArrowEdit(null, data);
         arrowItem.status = SItemStatus.Create;
+        arrowItem.moveable = true;
         this.addItem(arrowItem);
         this.undoStack.push(new SGraphAddCommand(this, arrowItem));
         arrowItem.selectable = true;
@@ -337,19 +342,19 @@ export class PTopoScene extends SBaseEditScene {
     }
 
     /**
-     * 添加基本箭头item
+     * 添加基本圆
      */
     addCircleItem(event: SMouseEvent): void {
         const data = {
-            ID: uuid(),
-            Name: '基础圆形',
-            Type: "BaseCircle",
-            Pos: { X: 0, Y: 0 },
-            Properties: {
+            name: '基础圆形',
+            type: "Zone",
+            pos: { x: 0, y: 0 },
+            properties: {
+                type: "BaseCircle",
             },
-            Style: {
-                Default: {
-                    Line: [{ X: event.x, Y: event.y }],
+            style: {
+                default: {
+                    line: [{ x: event.x, y: event.y }],
                 }
             }
         }
@@ -371,21 +376,21 @@ export class PTopoScene extends SBaseEditScene {
     addEuqipment(event: SMouseEvent): void {
         const data = {
             /** 名称  */
-            Name: '基础设备',
-            Num: 1,
-            Size: { Width: 50, Height: 50 },
+            name: '基础设备',
+            num: 1,
+            size: { width: 50, height: 50 },
             /** 图标（Image），线类型(Line) */
-            Type: "Image",
+            type: "Image",
             /** 位置  */
-            Pos: { X: event.x, Y: event.y },
+            pos: { x: event.x, y: event.y },
             /** 由应用自己定义  */
-            Properties: {
-                Type: "baseEquipment",
+            properties: {
+                type: "baseEquipment",
             },
-            Style: {
-                Default: {
-                    StrokeColor: "#c0ccda",
-                    Url: require('./../../../assets/images/svg.svg'),
+            style: {
+                default: {
+                    strokecolor: "#c0ccda",
+                    url: require('./../../../assets/images/svg.svg'),
                 }
             }
         }
@@ -403,17 +408,12 @@ export class PTopoScene extends SBaseEditScene {
     }
     /**
      * 修改 item 样式，数据等方法
-     * @param styleType string 修改样式类型
+     * @param styletype string 修改样式类型
      * @param changeStyle 更改样式数据
      * @param itemList? SGraphEdit[] 如果不传入默认使用选择器中选中得item
      */
-    updateStyle(styleType: string, changeStyle: any, itemList?: SGraphEdit[]): void {
-        console.log('------------>');
-        console.log(styleType);
-        console.log(changeStyle);
-        console.log(itemList);
-        console.log('------------>');
-        
+    updateStyle(styletype: string, changestyle: any, itemList?: SGraphEdit[]): void {
+
         // 如果未传入需要修改样式的item,默认取选择器中的item
         let List = null;
         if (itemList && itemList.length) {
@@ -422,19 +422,20 @@ export class PTopoScene extends SBaseEditScene {
             List = this.selectContainer.itemList;
         };
         let styleValue: any
-        if (styleType == "strokeColor" || styleType == "backgroundColor") {
-            const colorlist = rgbaNum(changeStyle)
+        if (styletype == "strokeColor" || styletype == "backgroundColor" || styletype == "fillColor") {
+            const colorlist = rgbaNum(changestyle)
             styleValue = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255);
-        } else if (styleType == "lineStyle") {
-            styleValue = SLineStyle[changeStyle]
+        } else if (styletype == "lineStyle") {
+            styleValue = SLineStyle[changestyle]
         } else {
-            styleValue = changeStyle
+            styleValue = changestyle
         }
         List.forEach((item: SGraphEdit, index: number) => {
             if (item instanceof SGraphSelectContainer) {
                 return
             }
-            item[styleType] = styleValue;
+            console.log('xxxx', item)
+            item[styletype] = styleValue;
         })
 
     }
@@ -477,19 +478,19 @@ export class PTopoScene extends SBaseEditScene {
      */
     save() {
         if (!this.view) return;
-        const MarkType: string[] = ['BaseLine', 'BaseText', 'BaseExplain', 'BaseImage'];
-        const Markers: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
-        const Nodes: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
-        const Relations: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
+        const Marktype: string[] = ['BaseLine', 'BaseText', 'BaseExplain', 'BaseImage'];
+        const markers: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
+        const nodes: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
+        const relations: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
         this.root.children.forEach(item => {
-            if ((item instanceof SGraphEdit) && !(item instanceof SGraphSelectContainer) && MarkType.includes(item.data.Properties.Type)) {
+            if ((item instanceof SGraphEdit) && !(item instanceof SGraphSelectContainer) && Marktype.includes(item.data.Properties.type)) {
                 Markers.push(item.toData())
             }
         });
         return {
-            Markers,
-            Nodes,
-            Relations
+            markers,
+            nodes,
+            relations
         }
     }
 }

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

@@ -24,7 +24,7 @@
  * *********************************************************************************************************************
  */
 import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw/";
-import { SBaseImageEdit } from './../../big-edit';
+import { SBaseImageEdit } from './../../edit';
 import { SGraphItem } from "@persagy-web/graph";
 import { Marker } from "./../../big-edit/types/Marker";
 import { SMouseEvent } from "@persagy-web/base/lib";
@@ -66,7 +66,7 @@ export class SPersagyImageEdit extends SBaseImageEdit {
     } // Function onMouseDown()
 
     toData() {
-       return super.toData()
+        return super.toData()
     }
     /**
    * 鼠标按下事件

src/components/editview/baseTopoEditer.vue

@@ -48,7 +48,7 @@ export default {
     // 读取底图
     // this.readtopoMsg();
     // 读取平面图-------测试代码
-    this.readMapmsg();
+    // this.readMapmsg();
   },
   methods: {
     ...mapMutations(["SETCHOICELEHEND"]),

src/components/editview/leftToolBar/equipmentList.vue

@@ -0,0 +1,74 @@
+<!-- 设备列表 -->
+<template>
+  <div class="equip-list">
+    <Input
+      class="baseItemInput"
+      :width="188"
+      iconType="search"
+      v-model="baseItemVal"
+      @pressEnter="pressEnter"
+    />
+    <ul>
+      <li>
+        <div class="left">
+          <div class="icon"></div>
+        </div>
+        <div class="right">
+          <div class="t">立式水泵</div>
+          <div class="b">W3456112345B33</div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.equip-list {
+  width: 100%;
+  height: 100%;
+  ul {
+    li {
+      width: 100%;
+      height: 48px;
+      display: flex;
+      cursor: pointer;
+      .left {
+        width: 28px;
+        display: flex;
+        height: 100%;
+        align-items: center;
+        .icon {
+          width: 100%;
+          height: 28px;
+          background: red;
+          border-radius: 50% 50%;
+        }
+      }
+      .right {
+        padding: 4px;
+        box-sizing: border-box;
+        .t {
+          font-size: 14px;
+          color: #1f2429;
+        }
+        .b {
+          font-size: 10px;
+          color: #8d9399;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/editview/leftToolBar/legendList.vue

@@ -29,12 +29,19 @@
         </div>
       </div>
     </div>
+    <!-- 设备类 -->
+    <equipmentList v-if="chiceStatus==1"></equipmentList>
+    <!-- 管线类 -->
+    <pipeList v-if="chiceStatus==3"></pipeList>
   </div>
 </template>
 <script>
 import { baseEditItems } from "./data";
 import { mapMutations, mapState } from "vuex";
+import pipeList from "./pipeList.vue";
+import equipmentList from "./equipmentList.vue";
 export default {
+  components: { pipeList, equipmentList },
   props: ["chiceStatus"],
   data() {
     return {

src/components/editview/leftToolBar/pipeList.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="pipe-list">
+    <Input
+      class="baseItemInput"
+      :width="188"
+      iconType="search"
+      v-model="baseItemVal"
+      @pressEnter="pressEnter"
+    />
+    <ul class="type">
+      <li class="type-item">
+        <div class="type-title">
+          <i class="el-icon-caret-bottom"></i>
+          <span>空调水</span>
+        </div>
+        <ul class="itemList">
+          <li>
+            <div></div>
+            <span>冷/热水供水管</span>
+          </li>
+          <li>
+            <div></div>
+            <span>冷/热水回水管</span>
+          </li>
+          <li>
+            <div></div>
+            <span>冷却回水管</span>
+          </li>
+          <li>
+            <div></div>
+            <span>膨胀水管</span>
+          </li>
+        </ul>
+      </li>
+      <li class="type-item">
+        <div class="type-title">
+          <i class="el-icon-caret-bottom"></i>
+          <span>空调水</span>
+        </div>
+        <ul class="itemList">
+          <li>
+            <div></div>
+            <span>冷/热水供水管</span>
+          </li>
+          <li>
+            <div></div>
+            <span>冷/热水回水管</span>
+          </li>
+          <li>
+            <div></div>
+            <span>冷却回水管</span>
+          </li>
+          <li>
+            <div></div>
+            <span>膨胀水管</span>
+          </li>
+        </ul>
+      </li>
+      <li class="type-item">
+        <div class="type-title">
+          <i class="el-icon-caret-bottom"></i>
+          <span>给排水</span>
+        </div>
+        <ul class="itemList">
+          <li>
+            <div></div>
+            <span>冷/热水供水管</span>
+          </li>
+          <li>
+            <div></div>
+            <span>冷/热水回水管</span>
+          </li>
+          <li>
+            <div></div>
+            <span>冷却回水管</span>
+          </li>
+          <li>
+            <div></div>
+            <span>膨胀水管</span>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {},
+  mounted() {},
+};
+</script>
+<style lang="less" scoped>
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.pipe-list {
+  width: 100%;
+  height: 100%;
+  .type {
+    padding: 12px;
+    box-sizing: border-box;
+    .type-item {
+      .type-title {
+        margin: 12px 0 14px 0;
+        span {
+          width: 14px;
+          color: #1f2429;
+          margin-left: 4px;
+        }
+      }
+      .itemList {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        li {
+          width: 60px;
+          height: 62px;
+          border-radius: 2px;
+          cursor: pointer;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          padding: 4px;
+          box-sizing: border-box;
+          span {
+            color: #646a73;
+            font-size: 10px;
+            line-height: 11px;
+          }
+          div {
+            width: 32px;
+            height: 4px;
+            background: #fa9900;
+            margin: 6px 0 8px 0;
+          }
+        }
+        li:hover {
+          background: #f5f6f7;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/editview/rightPropertyBar/BaseGraphy.vue

@@ -32,7 +32,7 @@
         <div class="property">
           <div class="color-box">
             <div class="cololorSelect">
-              <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
+              <el-color-picker @change="changeColor" show-alpha class="fix-box-1" v-model="color"></el-color-picker>
             </div>
             <span>颜色</span>
           </div>
@@ -41,7 +41,7 @@
               style="width:80px"
               v-model="linewidth"
               controls-position="right"
-              @change="handleChange"
+              @change="changeLinewidth"
               size="mini"
               :min="1"
               :max="20"
@@ -74,7 +74,12 @@
         <div class="property property-push">
           <div class="color-box">
             <div class="cololorSelect">
-              <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
+              <el-color-picker
+                show-alpha
+                @change="changeFillcolor"
+                class="fix-box-1"
+                v-model="fillColor"
+              ></el-color-picker>
             </div>
             <span>颜色</span>
           </div>
@@ -86,7 +91,14 @@
 <script>
 import bus from "@/bus/bus";
 export default {
-  props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height"],
+  props: [
+    "strokeColor",
+    "lineStyle",
+    "lineWidth",
+    "Width",
+    "Height",
+    "fillColor",
+  ],
   data() {
     return {
       width: 0,
@@ -95,19 +107,19 @@ export default {
       linewidth: 1,
       borderLineOption: [
         {
-          id: "solid",
+          id: "Solid",
           src: require("@/assets/images/solidLine.png"),
         },
         {
-          id: "dashed",
+          id: "Dashed",
           src: require("@/assets/images/dashedLine.png"),
         },
         {
-          id: "dotted",
+          id: "Dotted",
           src: require("@/assets/images/dotLine.png"),
         },
       ],
-      linestyle: "solid",
+      linestyle: "Solid",
     };
   },
   methods: {
@@ -117,15 +129,39 @@ export default {
     changeWidth(val) {
       bus.$emit("updateStyle", "width", val);
     },
-    // 输入文本
-    handleChangeText() {},
-    handleChange() {},
-    // 改变文字颜色
-    changeColor() {},
-    handleClick(tab, event) {
-      console.log(tab, event);
+    changeLinewidth(val) {
+      bus.$emit("updateStyle", "lineWidth", val);
+    },
+    changeFillcolor(val) {
+      bus.$emit("updateStyle", "fillColor", val);
+    },
+    changeColor(val) {
+      bus.$emit("updateStyle", "strokeColor", val);
+    },
+    // 改变线样式
+    changeLineStyle(val) {
+      bus.$emit("updateStyle", "lineStyle", val);
+    },
+  },
+  watch: {
+    strokeColor(val) {
+      this.color = val;
+    },
+    lineWidth(val) {
+      this.linewidth = val;
+    },
+    lineStyle(val) {
+      this.linestyle = val;
+    },
+    Width(val) {
+      this.width = val;
+    },
+    Height(val) {
+      this.height = val;
+    },
+    fillColor(val) {
+      this.fillcolor = val;
     },
-    changeBorder() {},
   },
   mounted() {
     // console.log(Select)

src/components/editview/rightPropertyBar/BaseImagePro.vue

@@ -41,7 +41,7 @@
         <div class="property">
           <div class="color-box">
             <div class="cololorSelect">
-              <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
+              <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="color"></el-color-picker>
             </div>
             <span>颜色</span>
           </div>
@@ -50,7 +50,7 @@
               style="width:80px"
               v-model="linewidth"
               controls-position="right"
-              @change="handleChange"
+              @change="changeLineWidth"
               size="mini"
               :min="1"
               :max="20"
@@ -74,7 +74,7 @@
                 <img :src="item.src" alt width="60" />
               </a-select-option>
             </a-select>
-            <span>线形</span>
+            <span>线型</span>
           </div>
         </div>
       </li>
@@ -95,15 +95,15 @@ export default {
       linewidth: 1,
       borderLineOption: [
         {
-          id: "solid",
+          id: "Solid",
           src: require("@/assets/images/solidLine.png"),
         },
         {
-          id: "dashed",
+          id: "Dashed",
           src: require("@/assets/images/dashedLine.png"),
         },
         {
-          id: "dotted",
+          id: "Dotted",
           src: require("@/assets/images/dotLine.png"),
         },
       ],
@@ -118,8 +118,17 @@ export default {
     changeWidth(val) {
       bus.$emit("updateStyle", "width", val);
     },
-    handleChange() {},
-    changeLineStyle() {},
+    changeLineWidth(val) {
+      bus.$emit("updateStyle", "lineWidth", val);
+    },
+    // 改变线样式
+    changeLineStyle(val) {
+      bus.$emit("updateStyle", "lineStyle", val);
+    },
+    // 改变颜色
+    changeColor(val) {
+      bus.$emit("updateStyle", "strokeColor", val);
+    },
     beforeAvatarUpload(file) {
       let that = this;
       const fileReader = new FileReader();

src/components/editview/rightPropertyBar/property.vue

@@ -15,11 +15,14 @@
       :lineWidth="lineWidth"
     ></baseLinePro>
     <BaseGraphy
+      :lineStyle="lineStyle"
+      :lineWidth="lineWidth"
       :strokeColor="strokeColor"
-      :fontSize="fontSize"
-      :text="text"
-      :backgroundColor="backgroundColor"
-      v-show="itemType == 'addRectItem' || itemType == 'BaseTriangle' || itemType == 'BaseArrow'"
+      :fillColor="fillColor"
+      :Url="Url"
+      :Width="Width"
+      :Height="Height"
+      v-show="itemType == 'BaseRect' || itemType == 'BaseTriangle' || itemType == 'BaseArrow'|| itemType == 'BaseCircle'"
     ></BaseGraphy>
     <BaseImagePro
       :lineStyle="lineStyle"
@@ -51,7 +54,7 @@ export default {
   data() {
     return {
       itemType: "", // item 类型
-      strokeColor: "", //填充色
+      strokeColor: "", //线条颜色
       lineStyle: "solid", //线条样式
       lineWidth: 1, //线宽
       fontSize: 12, //字体大小
@@ -60,6 +63,7 @@ export default {
       Width: 0, //item 宽
       Height: 0, //item 高
       Url: "", // 路径
+      fillColor: "", //填充色
     };
   },
   mounted() {
@@ -67,6 +71,7 @@ export default {
   },
   methods: {
     emitChoice(itemList) {
+      console.log('itemList',itemList)
       if (itemList.length == 1) {
         this.itemType = itemList[0].data.Properties.Type
           ? itemList[0].data.Properties.Type
@@ -74,7 +79,7 @@ export default {
       } else {
         this.itemType = "";
       }
-      console.log(this.itemType)
+      console.log(this.itemType);
       // 同步联动样式
       this.linkStyle(itemList);
     },
@@ -94,12 +99,25 @@ export default {
         this.textMsg = item.text;
         this.fontSize = item.font.size;
       } else if (this.itemType == "BaseImage") {
-        console.log("this.itemType", item);
         this.Width = item.width; //item 宽
         this.Height = item.height; //item 高
         this.Url = item.url; // 路径
         this.lineStyle = lineStyle[item.lineStyle];
         this.lineWidth = item.lineWidth;
+        this.strokeColor = item.strokeColor.toRgba();
+      } else if (
+        this.itemType == "BaseRect" ||
+        this.itemType == "BaseTriangle" ||
+        this.itemType == "BaseArrow" ||
+        this.itemType == "BaseCircle"
+      ) {
+        this.Width = item.width; //item 宽
+        this.Height = item.height; //item 高
+        this.lineStyle = lineStyle[item.lineStyle];
+        this.lineWidth = item.lineWidth;
+        this.strokeColor = item.strokeColor.toRgba();
+        this.fillColor = item.fillColor.toRgba()
+        // 填充色
       }
     },
   },

src/router/index.ts

@@ -12,7 +12,7 @@ const routes: Array<RouteConfig> = [
   {
     path: '/home',
     name: 'home',
-    component: () => import('../views/Home.vue')
+    component: () => import('../views/home.vue')
   }
 ]
 

src/views/Home.vue

@@ -9,7 +9,7 @@
         :selectdata="dataSelect3"
         :placeholder="'请选择'"
       />
-      <Button radius type="primary" :text="'新建拓扑图'">primary</Button>
+      <Button radius @click="createProject" type="primary" size="large" :text="'新建拓扑图'">primary</Button>
     </el-header>
     <!-- body部分 -->
     <el-container class="bodys">
@@ -46,6 +46,58 @@
         </div>
       </el-main>
     </el-container>
+
+    <!-- 弹框 -->
+    <el-dialog class="create-dialog" title="新建拓扑图" :visible.sync="outerVisible">
+      <el-dialog
+        class="create-dialog-inner"
+        width="30%"
+        title="所属类别"
+        :visible.sync="innerVisible"
+        append-to-body
+      >
+        <div class="inner-dialog-body">
+          <div class="left">1</div>
+          <div class="right">2</div>
+        </div>
+      </el-dialog>
+      <div class="dialog-bodys">
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="100px"
+          class="demo-ruleForm"
+          label-position="top"
+        >
+          <el-form-item label="所属类别" prop="region">
+            <el-button @click="getprojectType">请选择所属类别</el-button>
+          </el-form-item>
+          <el-form-item label="活动名称" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item>
+          <el-form-item label="标签" prop="resource">
+            <el-select
+              v-model="value"
+              multiple
+              filterable
+              allow-create
+              default-first-option
+              width="100%"
+              placeholder="请选择文章标签"
+            ></el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+            <el-button @click="resetForm('ruleForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="outerVisible = false">取 消</el-button>
+        <el-button type="primary" @click="innerVisible = true">确定</el-button>
+      </div>
+    </el-dialog>
   </el-container>
 </template>
 
@@ -78,12 +130,82 @@ export default {
       ],
       queryText: "",
       isPub: "已发布", // 发布类型()
+      input2: "",
+      outerVisible: true,
+      innerVisible: true,
+      ruleForm: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入活动名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        region: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        date1: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+        date2: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+        resource: [
+          { required: true, message: "请选择活动资源", trigger: "change" },
+        ],
+        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
+      },
+      value: [],
     };
   },
   methods: {
     testClick(data) {
       console.log(data);
     },
+    // 创建拓扑图
+    createProject() {},
+    // 获取所属类别
+    getprojectType() {
+      this.innerVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
   },
   components: { Select, Button, leftAsideTree, Dropdown, topoImageCard },
 };
@@ -142,5 +264,21 @@ export default {
       }
     }
   }
+  .create-dialog {
+    .dialog-bodys {
+      width: 367px;
+      margin: 0 auto;
+    }
+  }
+  .create-dialog-inner {
+    .inner-dialog-body {
+      width: 100%;
+      display: flex;
+      .left {
+        flex: 1;
+        border-right: 1px solid #ccc;
+      }
+    }
+  }
 }
 </style>

vue.config.js

@@ -7,19 +7,15 @@ module.exports = {
         },
         proxy: {
             '/labsl': {
-                target: 'http://60.205.177.43:8080/',
+                target: 'http://60.205.177.43:8080',
                 changeOrigin: true,
-                pathRewrite: {
-                    '^/labsl': '/labsl',
-                },
+                secure: false,
             },
             // 图片服务器
             '/image-service': {
-                target: 'http://adm.sagacloud.cn/',
+                target: 'http://adm.sagacloud.cn',
                 changeOrigin: true,
-                pathRewrite: {
-                    '^/image-service': '/image-service',
-                },
+                secure: false,
             },
         },
     },