提交代码

src/assets/images/svg.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/components/editClass/big-edit/index.ts

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

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

@@ -0,0 +1,135 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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, SGraphSvg } from "@persagy-web/graph";
+import { SGraphEdit } from '../../edit/';
+import { Marker } from "./../types/Marker";
+/**
+ * 编辑基础设备类
+ *
+ * * @author  haojianlong
+ */
+export class SBaseEquipment extends SGraphEdit {
+    /**编辑相关操作的数据 */
+    data: Marker
+    /** 图片dom */
+    img: CanvasImageSource | undefined;
+    /** 图片加载是否完成 */
+    isLoadOver: boolean = false;
+    /** 图片地址 */
+    private _url: string = "";
+    get url(): string {
+        return this._url;
+    } // Get Url
+    set url(v: string) {
+        if (this._url == v) {
+            return;
+        }
+        this._url = v;
+        if (!this.img) {
+            this.img = new Image();
+        }
+        // @ts-ignore
+        this.img.src = v;
+    } // Set Url
+    /** item宽 */
+    private _width: number = 0;
+    get width(): number {
+        return this._width;
+    } // Get width
+    set width(v: number) {
+        if (v == this._width) {
+            return;
+        }
+        this._width = v;
+        this.update();
+    } // Set width
+    /** item高 */
+    private _height: number = 0;
+    get height(): number {
+        return this._height;
+    } // Get height
+    set height(v: number) {
+        if (v == this._height) {
+            return;
+        }
+        this._height = v;
+        this.update();
+    } // Set height
+
+    /**
+     * 构造函数
+     *
+     * @param   parent  父类
+     * @param   data    传入数据
+     * */
+    constructor(parent: SGraphItem | null, data: Marker) {
+        super(parent);
+        this.data = data;
+        if (data.Style && data.Style.Default) {
+            if (data.Style.Default.Url) {
+                this.img = new Image();
+                this.url = data.Style.Default.Url;
+                this.img.onload = (e): void => {
+                    this.isLoadOver = true;
+                    this.update();
+                };
+                this.img.onerror = (e): void => {
+                    this.isLoadOver = false;
+                    this.update();
+                    console.log("加载图片错误！", e);
+                };
+            }
+            if (data.Size) {
+                this.width = data.Size.Width;
+                this.height = data.Size.Height;
+            }
+            this.moveTo(data.Pos.X, data.Pos.Y);
+        }
+
+    } // Constructor
+
+    /**
+     * Item对象边界区域
+     *
+     * @return	SRect
+     */
+    boundingRect(): SRect {
+        return new SRect(0, 0, this.width, this.height);
+    } // Function boundingRect()
+
+    /**
+     * Item绘制操作
+     *
+     * @param   painter      绘画类
+     */
+    onDraw(painter: SPainter): void {
+        if (this.isLoadOver) {
+            // @ts-ignore
+            painter.drawImage(this.img, 0, 0, this.width, this.height);
+        }
+    } // Function onDraw()
+} // Class SGraphSvgItem

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

@@ -29,9 +29,8 @@ 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)
  */
@@ -50,30 +49,33 @@ export class SBaseExpainEdit extends STextEdit {
         this.zOrder = ItemOrder.textOrder;
         this.isTransform = false;
         this.data = data;
-        if (!data.ID) {
-            data.ID = uuid()
-        }
-        this.id = data.ID;
         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.Properties.Zorder) {
-            this.zOrder = data.Properties.Zorder;
-        }
-        if (data.Properties && data.Properties.Text) {
-            this.text = data.Properties.Text;
-        }
-        if (data.Properties && data.Properties.Color) {
-            this.color = new SColor(data.Properties.Color);
-        }
-        if (data.Properties && data.Properties.Font) {
-            this.font = new SFont("sans-serif", data.Properties.Font);;
-        }
-        if (data.Properties && data.Properties.BackgroundColor) {
-            this.backgroundColor = new SColor(data.Properties.BackgroundColor);
+        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);
+            }
         }
     }
     /**
@@ -88,6 +90,15 @@ export class SBaseExpainEdit extends STextEdit {
     } // 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/SBaseImageEdit.ts

@@ -93,7 +93,17 @@ export class SBaseImageEdit extends SImageEdit {
     } // Function onMouseDown()
 
     toData() {
-        console.log(1230)
+        this.data.Style.Default.LineWidth = this.lineWidth;
+        this.data.Style.Default.LineStyle = this.lineStyle;
+        this.data.Style.Default.StrokeColor = this.strokeColor;
+        this.data.Style.Default.Url = this.url;
+        if (this.data.Size) {
+            this.data.Size.Width = this.width;
+            this.data.Size.Height = this.height;
+        } else {
+            this.data.Size = { Width: this.width, Height: this.height }
+        }
+        return this.data
     }
     /**
    * 鼠标按下事件

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

@@ -1,4 +1,4 @@
-import { SBaseEditScene, SBaseLineEdit, SBaseTextEdit, SBaseImageEdit, SBaseExpainEdit, SBaseRectEdit } from "./../big-edit";
+import { SBaseEditScene, SBaseLineEdit, SBaseTextEdit, SBaseExpainEdit, SBaseRectEdit, SBaseEquipment } from "./../big-edit";
 import { SPersagyImageEdit } from "./"
 // import { SGraphItem } from "@persagy-web/graph/";
 import { SGraphEdit } from "./../edit"
@@ -50,12 +50,12 @@ export class PTopoScene extends SBaseEditScene {
         } 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 == "EditBasePostil") {
-            this.addExplainItem(event)
-            this.clearCmdStatus();
         } else if (this.editCmd == "EditBasePolygon") {
             console.log('编辑多边形')
         } else if (this.editCmd == "EditBaseRect") {
@@ -70,6 +70,9 @@ export class PTopoScene extends SBaseEditScene {
         } 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);
         }
@@ -180,15 +183,18 @@ export class PTopoScene extends SBaseEditScene {
             Pos: { X: event.x, Y: event.y },
             /** 由应用自己定义  */
             Properties: {
-                Text: '请在右侧属性栏输入文字！',
-                Color: "#646c73",
-                Font: 14,
-                BackgroundColor: "#f7f9facc",
                 Type: "BaseExplain",
             },
-            Style: {}
+            Style: {
+                Default: {
+                    Text: '请在右侧属性栏输入文字！',
+                    Color: "#646c73",
+                    Font: 14,
+                    BackgroundColor: "#f7f9facc",
+                }
+            }
         }
-        const item = new SBaseTextEdit(null, data);
+        const item = new SBaseExpainEdit(null, data);
         item.moveTo(event.x, event.y);
         item.selectable = true;
         item.moveable = true;
@@ -275,9 +281,10 @@ export class PTopoScene extends SBaseEditScene {
         const data = {
             ID: uuid(),
             Name: '基础三角形',
-            Type: "BaseTriangle",
+            Type: "Zone",
             Pos: { X: 0, Y: 0 },
             Properties: {
+                Type: "BaseTriangle",
             },
             Style: {
                 Default: {
@@ -305,9 +312,10 @@ export class PTopoScene extends SBaseEditScene {
         const data = {
             ID: uuid(),
             Name: '基础箭头',
-            Type: "BaseArrow",
+            Type: "Zone",
             Pos: { X: 0, Y: 0 },
             Properties: {
+                Type: "BaseArrow",
             },
             Style: {
                 Default: {
@@ -357,7 +365,42 @@ export class PTopoScene extends SBaseEditScene {
             this.view.update();
         }
     }
-
+    /**
+     * 添加基本设备item
+     */
+    addEuqipment(event: SMouseEvent): void {
+        const data = {
+            /** 名称  */
+            Name: '基础设备',
+            Num: 1,
+            Size: { Width: 50, Height: 50 },
+            /** 图标（Image），线类型(Line) */
+            Type: "Image",
+            /** 位置  */
+            Pos: { X: event.x, Y: event.y },
+            /** 由应用自己定义  */
+            Properties: {
+                Type: "baseEquipment",
+            },
+            Style: {
+                Default: {
+                    StrokeColor: "#c0ccda",
+                    Url: require('./../../../assets/images/svg.svg'),
+                }
+            }
+        }
+        const circleItem = new SBaseEquipment(null, data);
+        circleItem.status = SItemStatus.Create;
+        this.addItem(circleItem);
+        this.undoStack.push(new SGraphAddCommand(this, circleItem));
+        circleItem.selectable = true;
+        this.grabItem = circleItem;
+        circleItem.connect("finishCreated", this, this.finishCreated);
+        circleItem.connect("onContextMenu", this, this.getItem);
+        if (this.view) {
+            this.view.update();
+        }
+    }
     /**
      * 修改 item 样式，数据等方法
      * @param styleType string 修改样式类型
@@ -433,7 +476,7 @@ export class PTopoScene extends SBaseEditScene {
         const Nodes: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
         const Relations: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
         this.root.children.forEach(item => {
-            if (!(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())
             }
         });

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

@@ -66,17 +66,7 @@ export class SPersagyImageEdit extends SBaseImageEdit {
     } // Function onMouseDown()
 
     toData() {
-        this.data.Style.Default.LineWidth = this.lineWidth;
-        this.data.Style.Default.LineStyle = this.lineStyle;
-        this.data.Style.Default.StrokeColor = this.strokeColor;
-        this.data.Style.Default.Url = this.url;
-        if (this.data.Size) {
-            this.data.Size.Width = this.width;
-            this.data.Size.Height = this.height;
-        } else {
-            this.data.Size = { Width: this.width, Height: this.height }
-        }
-        return this.data
+       return super.toData()
     }
     /**
    * 鼠标按下事件

src/components/editview/baseTopoEditer.vue

@@ -7,6 +7,7 @@
 <script>
 import { PTopoScene, PTopoParser } from "@/components/editClass/persagy-edit";
 import { SGraphView } from "@persagy-web/graph";
+import { SFloorParser } from "@persagy-web/big/lib";
 import topoTooltip from "./topoTooltip.vue";
 import { mapState, mapMutations } from "vuex";
 import bus from "@/bus/bus";
@@ -45,7 +46,9 @@ export default {
       return false;
     };
     // 读取底图
-    this.readtopoMsg();
+    // this.readtopoMsg();
+    // 读取平面图-------测试代码
+    this.readMapmsg();
   },
   methods: {
     ...mapMutations(["SETCHOICELEHEND"]),
@@ -140,7 +143,6 @@ export default {
         Id: "f15506fa5dcc4ce79064e459e5497748",
       };
       readGroup(obj).then((res) => {
-        console.log("resssssss", res);
         const parse = new PTopoParser();
         parse.parseData(res.Content.Elements);
         console.log(parse.Markers);
@@ -150,6 +152,18 @@ export default {
         console.log(this.scene);
       });
     },
+    readMapmsg() {
+      let parser = new SFloorParser();
+      const msg = require("./../../assets/map/1.json");
+      parser.parseData(msg.EntityList[0].Elements);
+      parser.spaceList.forEach((t) => this.scene.addItem(t));
+      parser.wallList.forEach((t) => this.scene.addItem(t));
+      parser.virtualWallList.forEach((t) => this.scene.addItem(t));
+      parser.doorList.forEach((t) => this.scene.addItem(t));
+      parser.columnList.forEach((t) => this.scene.addItem(t));
+      parser.casementList.forEach((t) => this.scene.addItem(t));
+      this.view.fitSceneToView();
+    },
   },
   watch: {
     choiceLegend(val) {

src/components/editview/leftToolBar/data.js

@@ -23,7 +23,7 @@ export const baseEditItems = [{
                 },
                 {
                     name: '批注',
-                    id: "EditBasePostil",
+                    id: "BaseExplain",
                     icon:require("./../../../assets/images/leftImgs/"+"EditBasePostil.png"),
                     activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBasePostil"+"Active"+".png")
                 }
@@ -55,7 +55,7 @@ export const baseEditItems = [{
             title: '联通方式',
             itemList: [{
                     name: '弯头',
-                    id: "wantou",
+                    id: "EditEuqipment",
                     icon:require("./../../../assets/images/leftImgs/"+"wantou.png"),
                     activeIcon:require("./../../../assets/images/leftImgs/"+ "wantou"+"Active"+".png")
                 },

src/components/editview/rightPropertyBar/BaseExplainPro.vue

@@ -1,8 +1,7 @@
-<!-- 基本注释的属性框 -->
-<!-- 基本图片的属性框 -->
+<!-- 基本图形的属性框 -->
 <template>
-  <div class="base-image">
-    <!-- <div class="title">属性</div>
+  <div class="base-graphy">
+    <div class="title">属性</div>
     <ul>
       <li>
         <div class="small-title">尺寸大小</div>
@@ -12,7 +11,7 @@
             <el-input
               style="width:74px;margin-left:6px"
               size="mini"
-              v-model="input"
+              v-model="width"
               placeholder="请输入内容"
             ></el-input>
           </div>
@@ -21,7 +20,7 @@
             <el-input
               style="width:74px;margin-left:6px"
               size="mini"
-              v-model="input"
+              v-model="height"
               placeholder="请输入内容"
             ></el-input>
           </div>
@@ -29,17 +28,6 @@
         </div>
       </li>
       <li>
-        <div class="small-title">填充</div>
-        <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>
-            </div>
-            <span>颜色</span>
-          </div>
-        </div>
-      </li>
-      <li>
         <div class="small-title">边框</div>
         <div class="property">
           <div class="color-box">
@@ -51,7 +39,7 @@
           <div class="line-width">
             <el-input-number
               style="width:80px"
-              v-model="num"
+              v-model="linewidth"
               controls-position="right"
               @change="handleChange"
               size="mini"
@@ -61,27 +49,50 @@
             ></el-input-number>
             <span>线宽</span>
           </div>
+          <div class="line-width">
+            <a-select
+              style="width: 80px"
+              v-model="linestyle"
+              :default-value="borderLineOption[0].id"
+              @change="changeLineStyle"
+            >
+              <a-select-option
+                v-for="item in borderLineOption"
+                :key="item.id"
+                :label="item.src"
+                :value="item.id"
+              >
+                <img :src="item.src" alt width="60" />
+              </a-select-option>
+            </a-select>
+            <span>线形</span>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div class="small-title">填充</div>
+        <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>
             </div>
-            <span>背景颜色</span>
+            <span>颜色</span>
           </div>
         </div>
       </li>
-    </ul> -->
+    </ul>
   </div>
 </template>
 <script>
 import bus from "@/bus/bus";
 export default {
+  props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height"],
   data() {
     return {
-      size: 12, //font-size
-      text: "", //文本
+      width: 0,
+      height: 0,
       color: "#cccccc", //颜色
-      activeName: "",
-      num: 1,
+      linewidth: 1,
       borderLineOption: [
         {
           id: "solid",
@@ -96,13 +107,15 @@ export default {
           src: require("@/assets/images/dotLine.png"),
         },
       ],
-      borderStyle: "solid",
+      linestyle: "solid",
     };
   },
   methods: {
-    // 改变文本大小
-    updateSize(val) {
-      bus.$emit("baseTextSize", val);
+    changeHeight(val) {
+      bus.$emit("updateStyle", "height", val);
+    },
+    changeWidth(val) {
+      bus.$emit("updateStyle", "width", val);
     },
     // 输入文本
     handleChangeText() {},
@@ -126,7 +139,7 @@ li {
   padding: 0;
   list-style-type: none;
 }
-.base-image {
+.base-graphy {
   .title {
     height: 47px;
     border-bottom: 1px solid #979797;
@@ -183,9 +196,9 @@ li {
           margin-top: 4px;
         }
       }
-      .property-push{
-        justify-content:start;
-        .color-box{
+      .property-push {
+        justify-content: start;
+        .color-box {
           margin-left: 8px;
         }
       }

src/components/editview/rightPropertyBar/BaseImagePro.vue

@@ -30,10 +30,9 @@
             class="avatar-uploader"
             action="https://jsonplaceholder.typicode.com/posts/"
             :show-file-list="false"
-            :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
           >
-            <i class="el-icon-link" @click="updataImage"></i>
+            <i class="el-icon-link"></i>
           </el-upload>
         </div>
       </li>

src/components/editview/rightPropertyBar/property.vue

@@ -6,7 +6,7 @@
       :fontSize="fontSize"
       :textMsg="textMsg"
       :backgroundColor="backgroundColor"
-      v-show="itemType == 'BaseText'"
+      v-show="itemType == 'BaseText' || itemType == 'BaseExplain' "
     ></baseTextProVue>
     <baseLinePro
       v-show="itemType == 'BaseLine'"
@@ -14,13 +14,13 @@
       :lineStyle="lineStyle"
       :lineWidth="lineWidth"
     ></baseLinePro>
-    <!-- <BaseExplainPro
+    <BaseGraphy
       :strokeColor="strokeColor"
       :fontSize="fontSize"
       :text="text"
       :backgroundColor="backgroundColor"
-      v-show="itemType == 'BaseExplain'"
-    ></BaseExplainPro>-->
+      v-show="itemType == 'addRectItem' || itemType == 'BaseTriangle' || itemType == 'BaseArrow'"
+    ></BaseGraphy>
     <BaseImagePro
       :lineStyle="lineStyle"
       :lineWidth="lineWidth"
@@ -35,7 +35,7 @@
 <script>
 import baseTextProVue from "./baseTextPro.vue";
 import baseLinePro from "./baseLinePro.vue";
-import BaseExplainPro from "./BaseExplainPro";
+import BaseGraphy from "./BaseGraphy";
 import BaseImagePro from "./BaseImagePro";
 import bus from "@/bus/bus";
 const lineStyle = {
@@ -47,7 +47,7 @@ const lineStyle = {
   3: "None",
 };
 export default {
-  components: { baseTextProVue, baseLinePro, BaseExplainPro, BaseImagePro },
+  components: { baseTextProVue, baseLinePro, BaseGraphy, BaseImagePro },
   data() {
     return {
       itemType: "", // item 类型
@@ -74,6 +74,7 @@ export default {
       } else {
         this.itemType = "";
       }
+      console.log(this.itemType)
       // 同步联动样式
       this.linkStyle(itemList);
     },