debug

src/api/editer.ts

@@ -5,4 +5,9 @@ const baseApi = '/graph/drafts/';
 //保存系统图
 export function saveGroup(postParams: any): any {
     return httputils.postJson(`/labsl${baseApi}save`, postParams)
-}
+}
+
+//读取系统图
+export function readGroup(postParams: any): any {
+    return httputils.postJson(`/labsl${baseApi}read`, postParams)
+}

src/api/httputils.ts

@@ -20,12 +20,8 @@ const axiosservice = axios.create({
 axiosservice.interceptors.request.use(
     (config) => {
         config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
-        const token = store.getters["token"] ? store.getters["token"]:'admin:lengqiang'
-        if (config.url.indexOf('mapapp') < 0) {
-            config.headers = {
-                'sso-token': token,
-                isPreview: false, //默认false,当预览开启的时候是true
-            }
+        config.headers = {
+            ProjectID: '1', //默认false,当预览开启的时候是true
         }
         return config
     },
@@ -35,7 +31,7 @@ axiosservice.interceptors.request.use(
 )
 
 axiosservice.interceptors.response.use(
-    function(res) {
+    function (res) {
         //在这里对返回的数据进行处理
         //console.log('axios interceptors res = ', res.status, res)
         const resp = res.data
@@ -61,7 +57,7 @@ axiosservice.interceptors.response.use(
         //console.log('axios interceptors resp2 = ', resp.success, resp.errorCode, resp.errorMessage, res)
         return res
     },
-    function(err) {
+    function (err) {
         //Do something with response error
         console.log("axios interceptors err = ", err)
         return Promise.reject(err)
@@ -176,7 +172,7 @@ export default {
                     downFile(blob, fileName)
                 }
             })
-            .catch(function(error) {
+            .catch(function (error) {
                 console.log(error)
             })
     },

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

@@ -0,0 +1,101 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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 { Marker, SBaseLineEdit, SBaseTextEdit, SBaseImageEdit, SBaseExpainEdit, SBasePolygonEdit, SBaseRectEdit } from "./"
+import { SItemFactory } from "@persagy-web/big"
+/**
+ * item创建工厂
+ * @author han_yao_long@163.com
+ */
+
+export class BigEditFactory extends SItemFactory {
+    /**
+     * 构造函数
+     *
+     * */
+    constructor() {
+        super()
+    } // Constructor
+
+    /**
+     * 创建基础直线
+     *
+     * @param   data    Marker数据
+     * @return  线item
+     * */
+    createBaseLineEdit(data: Marker): SBaseLineEdit {
+        return new SBaseLineEdit(null, data);
+    } // Function createBaseLineEdit()
+
+    /**
+     * 创建基础文本
+     *
+     * @param   data    Marker数据
+     * @return  文本item
+     * */
+    createBaseTextEdit(data: Marker): SBaseTextEdit {
+        return new SBaseTextEdit(null, data);
+    } // Function createBaseTextEdit()
+
+    /**
+     * 创建基础图片
+     *
+     * @param   data    Marker数据
+     * @return  图片item
+     * */
+    createBaseImageEdit(data: Marker): SBaseImageEdit {
+        return new SBaseImageEdit(null, data);
+    } // Function createBaseImageEdit()
+
+    /**
+     * 创建基础矩形
+     *
+     * @param   data    Marker数据
+     * @return  矩形item
+     * */
+    createBaseRectEdit(data: Marker): SBaseRectEdit {
+        return new SBaseRectEdit(null, data);
+    } // Function createBaseRectEdit()
+
+    /**
+     * 创建基础注释
+     *
+     * @param   data    Marker数据
+     * @return  注释item
+     * */
+    createBaseExpainEdit(data: Marker): SBaseExpainEdit {
+        return new SBaseExpainEdit(null, data);
+    } // Function createBaseExpainEdit()
+
+    /**
+     * 创建基础多边形
+     *
+     * @param   data    Marker数据
+     * @return  注释item
+     * */
+    createBasePolygonEdit(data: Marker): SBasePolygonEdit {
+        return new SBasePolygonEdit(null, data);
+    } // Function createBasePolygonEdit()
+} // Class SItemFactory

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

@@ -1,9 +1,14 @@
-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"
-
-export {SBaseEditScene,SBaseLineEdit,SBaseTextEdit,SBaseImageEdit,SBaseExpainEdit,SBasePolygonEdit,SBaseRectEdit}
+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"
+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 }

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

@@ -11,4 +11,9 @@ export function uuid() {
 
     const uuid = s.join("");
     return `${uuid}-${new Date().getTime()}`;
+}
+
+export function rgbaNum(rgba: string) {
+    let val = rgba.match(/(\d(\.\d+)?)+/g);
+    return val;
 }

src/components/editClass/persagy-edit/PTopoParser.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) 2009-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * ****/
+
+import { SParser, SItemFactory } from '@persagy-web/big/lib';
+import { BigEditFactory, Legend, Marker, Relation, ElementData } from "./../big-edit"
+/**
+ *拓扑图解析器
+ *  @author han_yao_long@163.com
+ */
+export class PTopoParser extends SParser {
+    /**图例节点 */
+    Nodes: any = [];  // 图例节点，所有与工程信息化相关的图例（图标类型与区域）
+    /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
+    Markers: any = [];
+    /**  管线对象 */
+    Relations: any = [];
+    constructor() {
+        super(new BigEditFactory());
+    }
+
+    /**
+     * 解析拓扑图绘制数据
+     *
+     * @param   data    业务空间数据
+     * */
+    parseData(data: ElementData): void {
+        // 生成遍历基本图例
+        data.Markers.forEach((item) => {
+            this.addMarker(item);
+        })
+        // 生成遍历Node图例
+        data.Nodes.forEach(() => {
+
+        })
+        // 生成遍历关系图例
+        data.Relations.forEach(() => {
+
+        })
+    } // Function parseData()
+    addMarker(data: Marker) {
+        if (data.Properties.Type == "BaseLine") {
+            this.Markers.push(this.factory.createBaseLineEdit(data))
+        }
+
+
+    }
+}

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

@@ -3,11 +3,13 @@ import { SPersagyImageEdit } from "./"
 // import { SGraphItem } from "@persagy-web/graph/";
 import { SGraphEdit } from "./../edit"
 import { SMouseEvent } from "@persagy-web/base/lib";
+import { SGraphSelectContainer } from "@persagy-web/graph";
 import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
-import { uuid } from "./../big-edit/until";
+import { uuid, rgbaNum } from "./../big-edit/until";
 
 // 引入命令
 import { SGraphAddCommand } from "./../edit/commands/SGraphAddCommand"
+import { SColor } from '@persagy-web/draw/lib';
 export class PTopoScene extends SBaseEditScene {
     constructor() {
         super()
@@ -89,7 +91,7 @@ export class PTopoScene extends SBaseEditScene {
     addLine(event: SMouseEvent): void {
         const data = {
             /** ID */
-            ID: uuid(),
+            // ID: uuid(),
             /** 名称  */
             Name: '基础直线',
             /** 图标（Image），线类型(Line) */
@@ -133,7 +135,7 @@ export class PTopoScene extends SBaseEditScene {
             /** 名称  */
             Name: '基础文本',
             /** 图标 */
-            Type: "BaseText",
+            Type: "Text",
             /** 位置  */
             Pos: { X: event.x, Y: event.y },
             /** 由应用自己定义  */
@@ -142,7 +144,8 @@ export class PTopoScene extends SBaseEditScene {
                 Text: '请在右侧属性栏输入文字！',
                 Color: "#646c73",
                 Font: 14,
-                BackgroundColor: "#f7f9facc"
+                BackgroundColor: "#f7f9facc",
+                Type: "BaseText"           // 自定义类型用于区分mark与node
             },
             Style: {}
         }
@@ -172,7 +175,7 @@ export class PTopoScene extends SBaseEditScene {
             /** 名称  */
             Name: '基础注释文本',
             /** 图标 */
-            Type: "BaseExplain",
+            Type: "Text",
             /** 位置  */
             Pos: { X: event.x, Y: event.y },
             /** 由应用自己定义  */
@@ -181,7 +184,8 @@ export class PTopoScene extends SBaseEditScene {
                 Text: '请在右侧属性栏输入文字！',
                 Color: "#646c73",
                 Font: 14,
-                BackgroundColor: "#f7f9facc"
+                BackgroundColor: "#f7f9facc",
+                Type: "BaseExplain",
             },
             Style: {}
         }
@@ -211,7 +215,7 @@ export class PTopoScene extends SBaseEditScene {
             Name: '基础图片',
             Num: 1,
             /** 图标（Image），线类型(Line) */
-            Type: "BaseImage",
+            Type: "Image",
             /** 位置  */
             Pos: { X: event.x, Y: event.y },
             /** 由应用自己定义  */
@@ -219,6 +223,7 @@ export class PTopoScene extends SBaseEditScene {
                 // IconUrl: require(`../../assets/images/t-img-hover.png`),
                 StrokeColor: "#c0ccda",
                 Url: '',
+                Type: "BaseImage",
             },
             Style: {}
         }
@@ -241,11 +246,12 @@ export class PTopoScene extends SBaseEditScene {
             /** 名称  */
             Name: '基础矩形',
             /** 图标（Image），线类型(Line) */
-            Type: "BaseRect",
+            Type: "Zone",
             /** 位置  */
             Pos: { X: 0, Y: 0 },
             /** 由应用自己定义  */
             Properties: {
+                Type: "BaseRect",
             },
             Style: {
                 Line: [{ X: event.x, Y: event.y }],
@@ -278,10 +284,32 @@ export class PTopoScene extends SBaseEditScene {
 
     }
 
-    /////////////////////////////////////////////////////////////////////////////////////////////////
-    //修改 item 样式，数据等方法；
-    updateStyle(): void {
-        // 修改样式
+    /**
+     * 修改 item 样式，数据等方法
+     * @param styleType string 修改样式类型
+     * @param changeStyle 更改样式数据
+     * @param itemList? SGraphEdit[] 如果不传入默认使用选择器中选中得item
+     */
+    updateStyle(styleType: string, changeStyle: any, itemList?: SGraphEdit[]): void {
+        // 如果未传入需要修改样式的item,默认取选择器中的item
+        let List = null;
+        if (itemList && itemList.length) {
+            List = itemList;
+        } else {
+            List = this.selectContainer.itemList;
+        };
+        let styleValue: any
+        if (styleType == "strokeColor") {
+            const colorlist = rgbaNum(changeStyle)
+            styleValue = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), Number(colorlist[3]));
+        }
+        List.forEach((item: SGraphEdit, index: number) => {
+            if (item instanceof SGraphSelectContainer) {
+                return
+            }
+            item[styleType] = styleValue
+        })
+
     }
 
     /**
@@ -326,8 +354,9 @@ export class PTopoScene extends SBaseEditScene {
         const Markers: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
         const Nodes: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
         const Relations: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
+        console.log('this.root.children', this.root.children)
         this.root.children.forEach(item => {
-            if (MarkType.includes(item.data.Properties.Type)) {
+            if (!(item instanceof SGraphSelectContainer) && MarkType.includes(item.data.Properties.Type)) {
                 Markers.push(item.toData())
             }
         });

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

@@ -1,3 +1,4 @@
 import { PTopoScene } from "./PTopoScene";
-import {SPersagyImageEdit}from "./item/SPersagyImageEdit"
-export { PTopoScene,SPersagyImageEdit }
+import { PTopoParser } from "./PTopoParser";
+import { SPersagyImageEdit } from "./item/SPersagyImageEdit"
+export { PTopoParser, PTopoScene, SPersagyImageEdit }

src/components/editview/baseTopoEditer.vue

@@ -5,13 +5,13 @@
   </div>
 </template>
 <script>
-import { PTopoScene } from "@/components/editClass/persagy-edit";
+import { PTopoScene, PTopoParser } from "@/components/editClass/persagy-edit";
 // import { BaseLineEdit } from "@/components/editClass/big-edit";
 import { SGraphView } from "@persagy-web/graph";
 import topoTooltip from "./topoTooltip.vue";
 import { mapState, mapMutations } from "vuex";
 import bus from "@/bus/bus";
-import { saveGroup } from "@/api/editer";
+import { saveGroup, readGroup } from "@/api/editer";
 export default {
   components: { topoTooltip },
   data() {
@@ -45,14 +45,8 @@ export default {
     document.getElementById("baseTopo").oncontextmenu = function (e) {
       return false;
     };
-
-    // this.scene.root.children = [];
-    // this.lineItem = new BaseLineEdit(null, []);
-    // this.lineItem.status = SItemStatus.Create;
-    // this.lineItem.connect("finishCreated", this, this.finishCreated);
-    // this.scene.addItem(this.lineItem);
-    // this.scene.grabItem = this.lineItem;
-    // this.view.update();
+    // 读取底图
+    this.readtopoMsg();
   },
   methods: {
     ...mapMutations(["SETCHOICELEHEND"]),
@@ -84,9 +78,10 @@ export default {
     },
     //初始化bus绑定事件
     initBusEvent() {
-      // 改变文字大小
-      bus.$on("baseTextSize", (val) => {
-        console.log("aaaaaaaaa", val);
+      // 改变样式
+      bus.$on("updateStyle", (type, val) => {
+        console.log("aaaaaaaaa", type, val);
+        this.scene.updateStyle(type, val);
       });
       // 撤销
       bus.$on("topoUndo", (val) => {
@@ -113,7 +108,6 @@ export default {
         const Elements = this.scene.save();
         const obj = {
           Elements,
-          ID: "1", // 图ID
           Name: "1", // 名称
           CategoryID: "1", // 图分类ID
           ProjectID: "1", // 项目ID
@@ -137,6 +131,21 @@ export default {
         });
       });
     },
+    // 读取拓扑图
+    readtopoMsg() {
+      let obj = {
+        GraphId: "3d5f5125ff8a430092e6e3648d911fcd",
+        Id: "5b05bc54ab3a42828ef5bdc52551b945",
+      };
+      readGroup(obj).then((res) => {
+        console.log("resssssss", res);
+        const parse = new PTopoParser().parseData(res.Content.Elements);
+        console.log(parse.Markers);
+        parse.Markers.forEach((item) => {
+          this.addItem.addItem(item);
+        });
+      });
+    },
   },
   watch: {
     choiceLegend(val) {

src/components/editview/rightPropertyBar.vue

@@ -2,7 +2,6 @@
 <template>
   <div class="right-property-bar">
      <property></property>
-
   </div>
 </template>
 <script>

src/components/editview/rightPropertyBar/baseLinePro.vue

@@ -8,14 +8,19 @@
         <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="strokeColor"
+              ></el-color-picker>
             </div>
             <span>颜色</span>
           </div>
           <div class="line-width">
             <el-input-number
               style="width:80px"
-              v-model="num"
+              v-model="lineWidth"
               controls-position="right"
               @change="handleChange"
               size="mini"
@@ -28,7 +33,7 @@
           <div class="line-width">
             <a-select
               style="width: 80px"
-              v-model="borderStyle"
+              v-model="lineStyle"
               :default-value="borderLineOption[0].id"
               @change="changeBorder"
             >
@@ -50,31 +55,24 @@
 </template>
 <script>
 import bus from "@/bus/bus";
-// import { Select } from 'ant-design-vue';
 export default {
-  // components:{Select},
+  props:['strokeColor','lineStyle','lineWidth'],
   data() {
     return {
-      size: 12, //font-size
-      text: "", //文本
-      color: "#cccccc", //颜色
-      activeName: "",
-      num: 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"),
         },
       ],
-      borderStyle: "solid",
     };
   },
   methods: {
@@ -86,7 +84,9 @@ export default {
     handleChangeText() {},
     handleChange() {},
     // 改变文字颜色
-    changeColor() {},
+    changeColor(val) {
+      bus.$emit('updateStyle','strokeColor',val)
+    },
     handleClick(tab, event) {
       console.log(tab, event);
     },

src/components/editview/rightPropertyBar/baseTextPro.vue

@@ -8,7 +8,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 class="fix-box-1" v-model="strokeColor"></el-color-picker>
             </div>
             <span>颜色</span>
           </div>
@@ -38,9 +38,7 @@
 </template>
 <script>
 import bus from "@/bus/bus";
-// import { Select } from 'ant-design-vue';
 export default {
-  // components:{Select},
   data() {
     return {
       size: 12, //font-size

src/components/editview/rightPropertyBar/property.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="propertys">
     <baseTextProVue v-show="itemType == 'BaseText'"></baseTextProVue>
-    <baseLinePro v-show="itemType == 'BaseLine'"></baseLinePro>
+    <baseLinePro v-show="itemType == 'BaseLine'" :strokeColor="strokeColor" :lineStyle="lineStyle" :lineWidth="lineWidth"></baseLinePro>
     <BaseExplainPro v-show="itemType == 'BaseExplain'"></BaseExplainPro>
     <BaseImagePro v-show="itemType == 'BaseImage'"></BaseImagePro>
   </div>
@@ -13,11 +13,22 @@ import baseLinePro from "./baseLinePro.vue";
 import BaseExplainPro from "./BaseExplainPro";
 import BaseImagePro from "./BaseImagePro";
 import bus from "@/bus/bus";
+const lineStyle = {
+  0: "Solid",
+  1: "Dashed",
+  /** 点线    */
+  2: "Dotted",
+  /** 无    */
+  3: "None",
+};
 export default {
   components: { baseTextProVue, baseLinePro, BaseExplainPro, BaseImagePro },
   data() {
     return {
       itemType: "",
+      strokeColor: "#cccccc", //填充色
+      lineStyle: "solid", //线条样式
+      lineWidth:1, //线宽
     };
   },
   mounted() {
@@ -26,10 +37,24 @@ export default {
   methods: {
     emitChoice(itemList) {
       if (itemList.length == 1) {
-        this.itemType = itemList[0].data.Type ? itemList[0].data.Type : "";
+        this.itemType = itemList[0].data.Properties.Type
+          ? itemList[0].data.Properties.Type
+          : "";
       } else {
         this.itemType = "";
       }
+      // 同步联动样式
+      this.linkStyle(itemList);
+    },
+    // 同步样式
+    linkStyle(itemList) {
+      const item = itemList[0];
+      if (this.itemType == "BaseLine") {
+        this.strokeColor = item.strokeColor.toRgb();
+        this.lineStyle = lineStyle[item.lineStyle];
+        this.lineWidth = item.lineWidth
+        console.log("  this.lineStyle", this.lineStyle);
+      }
     },
   },
 };