调整样式

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

@@ -47,13 +47,25 @@ export class SBaseLineEdit extends SLineEdit {
     constructor(parent: SGraphItem | null, data: Marker) {
         super(parent);
         this.data = data;
-        if (data.Style && data.Style.Line) {
-            let setPointList: SPoint[];
-            setPointList = data.Style.Line.map(i => {
-                return new SPoint(i.X, i.Y)
-            });
-            this.line = setPointList;
+        if (data.Style) {
+            // 关于顶点
+            if (data.Style.Line) {
+                let setPointList: SPoint[];
+                setPointList = data.Style.Line.map(i => {
+                    return new SPoint(i.X, i.Y)
+                });
+                this.line = setPointList;
+            }
+            // 颜色
+            if (data.Style.StrokeColor) {
+                this.strokeColor = data.Style.StrokeColor
+            }
+            // 线宽
+            if (data.Style.LineWidth) {
+                this.lineWidth = data.Style.LineWidth
+            }
         }
+
     }
     /**
      * 鼠标按下事件
@@ -67,8 +79,11 @@ export class SBaseLineEdit extends SLineEdit {
     } // 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.Line = Line;
-         return this.data
+        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.Line = Line;
+        this.data.Style.StrokeColor = this.strokeColor.value;
+        this.data.Style.LineWidth = this.lineWidth;
+        // this.data.Style.
+        return this.data
     }
 }

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

@@ -131,6 +131,7 @@ export class SLineEdit extends SGraphEdit {
         return this._lineWidth;
     }
     set lineWidth(v: number) {
+        console.log('lineWidth',v)
         this._lineWidth = v;
         this.update();
     }
@@ -510,7 +511,7 @@ export class SLineEdit extends SGraphEdit {
         painter.pen.color = this.strokeColor;
         if (this.line.length == 2) {
             // 绘制直线
-            painter.pen.color = new SColor(this.strokeColor);
+            painter.pen.color = this.strokeColor;
             if (this.lineStyle == SLineStyle.Dashed) {
                 painter.pen.lineDash = [
                     painter.toPx(this.lineWidth * 3),

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

@@ -3,7 +3,7 @@ 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 { SGraphSelectContainer, SLineStyle } from "@persagy-web/graph";
 import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
 import { uuid, rgbaNum } from "./../big-edit/until";
 
@@ -372,13 +372,17 @@ export class PTopoScene extends SBaseEditScene {
         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]));
+            styleValue = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255);
+        } else if (styleType == "lineStyle") {
+            styleValue = SLineStyle[changeStyle]
+        } else {
+            styleValue = changeStyle
         }
         List.forEach((item: SGraphEdit, index: number) => {
             if (item instanceof SGraphSelectContainer) {
                 return
             }
-            item[styleType] = styleValue
+            item[styleType] = styleValue;
         })
 
     }
@@ -428,6 +432,7 @@ export class PTopoScene extends SBaseEditScene {
         console.log('this.root.children', this.root.children)
         this.root.children.forEach(item => {
             if (!(item instanceof SGraphSelectContainer) && MarkType.includes(item.data.Properties.Type)) {
+                console.log('item.toData()', item.toData())
                 Markers.push(item.toData())
             }
         });

src/components/editview/baseTopoEditer.vue

@@ -134,8 +134,8 @@ export default {
     // 读取拓扑图
     readtopoMsg() {
       let obj = {
-        GraphId: "3d5f5125ff8a430092e6e3648d911fcd",
-        Id: "5b05bc54ab3a42828ef5bdc52551b945",
+        GraphId: "6500f7d6db5a40d4be4313ea654b1373",
+        Id: "d6c1926ee74b438d87c6b06fec9806c6",
       };
       readGroup(obj).then((res) => {
         console.log("resssssss", res);
@@ -145,6 +145,7 @@ export default {
         parse.Markers.forEach((item) => {
           this.scene.addItem(item);
         });
+        console.log(this.scene);
       });
     },
   },

src/components/editview/rightPropertyBar/baseLinePro.vue

@@ -8,21 +8,16 @@
         <div class="property">
           <div class="color-box">
             <div class="cololorSelect">
-              <el-color-picker
-                show-alpha
-                @change="changeColor"
-                class="fix-box-1"
-                v-model="strokeColor"
-              ></el-color-picker>
+              <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="color"></el-color-picker>
             </div>
             <span>颜色</span>
           </div>
           <div class="line-width">
             <el-input-number
               style="width:80px"
-              v-model="lineWidth"
+              v-model="linewidth"
               controls-position="right"
-              @change="handleChange"
+              @change="changeWidth"
               size="mini"
               :min="1"
               :max="20"
@@ -33,9 +28,9 @@
           <div class="line-width">
             <a-select
               style="width: 80px"
-              v-model="lineStyle"
+              v-model="linestyle"
               :default-value="borderLineOption[0].id"
-              @change="changeBorder"
+              @change="changeLineStyle"
             >
               <a-select-option
                 v-for="item in borderLineOption"
@@ -56,9 +51,12 @@
 <script>
 import bus from "@/bus/bus";
 export default {
-  props:['strokeColor','lineStyle','lineWidth'],
+  props: ["strokeColor", "lineStyle", "lineWidth"],
   data() {
     return {
+      color: "",
+      linewidth: "",
+      linestyle: "",
       borderLineOption: [
         {
           id: "Solid",
@@ -76,25 +74,33 @@ export default {
     };
   },
   methods: {
-    // 改变文本大小
-    updateSize(val) {
-      bus.$emit("baseTextSize", val);
+    // 改变线宽
+    changeWidth(val) {
+      bus.$emit("updateStyle", "lineWidth", val);
     },
-    // 输入文本
-    handleChangeText() {},
-    handleChange() {},
-    // 改变文字颜色
+    // 改变颜色
     changeColor(val) {
-      bus.$emit('updateStyle','strokeColor',val)
+      bus.$emit("updateStyle", "strokeColor", val);
     },
-    handleClick(tab, event) {
-      console.log(tab, event);
+    // 改变线样式
+    changeLineStyle(val) {
+       bus.$emit("updateStyle", "lineStyle", val);
     },
-    changeBorder() {},
   },
   mounted() {
     // console.log(Select)
   },
+  watch: {
+    strokeColor(val) {
+      this.color = val;
+    },
+    lineWidth(val) {
+      this.linewidth = val;
+    },
+    lineStyle(val) {
+      this.linestyle = val;
+    },
+  },
 };
 </script>
 <style lang="less" scoped>

src/components/editview/rightPropertyBar/property.vue

@@ -2,7 +2,12 @@
 <template>
   <div class="propertys">
     <baseTextProVue v-show="itemType == 'BaseText'"></baseTextProVue>
-    <baseLinePro v-show="itemType == 'BaseLine'" :strokeColor="strokeColor" :lineStyle="lineStyle" :lineWidth="lineWidth"></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>
@@ -26,9 +31,9 @@ export default {
   data() {
     return {
       itemType: "",
-      strokeColor: "#cccccc", //填充色
+      strokeColor: "", //填充色
       lineStyle: "solid", //线条样式
-      lineWidth:1, //线宽
+      lineWidth: 1, //线宽
     };
   },
   mounted() {
@@ -50,9 +55,9 @@ export default {
     linkStyle(itemList) {
       const item = itemList[0];
       if (this.itemType == "BaseLine") {
-        this.strokeColor = item.strokeColor.toRgb();
+        this.strokeColor = item.strokeColor.toRgba();
         this.lineStyle = lineStyle[item.lineStyle];
-        this.lineWidth = item.lineWidth
+        this.lineWidth = item.lineWidth;
         console.log("  this.lineStyle", this.lineStyle);
       }
     },