瀏覽代碼

空间样式修改

zhangyu 4 年之前
父節點
當前提交
61dea52b76
共有 4 個文件被更改,包括 133 次插入50 次删除
  1. 9 10
      src/components/editview/rightPropertyBar/BaseZone.vue
  2. 2 4
      src/lib/item/SPlanEquipment.ts
  3. 116 30
      src/lib/item/SPlanZone.ts
  4. 6 6
      vue.config.js

+ 9 - 10
src/components/editview/rightPropertyBar/BaseZone.vue

@@ -145,13 +145,7 @@ export default {
     computed: {
         formula: {
             get: function () {
-                return this.ZoneItem.formula;
-            },
-            set: function (val) {
-                const oldVal = this.ZoneItem.formula;
-                const newVal = val;
-                bus.$emit("undoAttr", this.ZoneItem, "formula", oldVal, newVal);
-                this.ZoneItem.formula = newVal;
+                return JSON.stringify(this.ZoneItem.formula.map(info => {return info.name;}));
             },
         },
         color: {
@@ -232,8 +226,8 @@ export default {
             },
         },
     },
-    mounted() {
-        window.yu = this;
+    created() {
+        this.ZoneItem.moveText = this.setStyle;
     },
     methods: {
         ...mapMutations(["ADDSTYLE"]),
@@ -277,7 +271,12 @@ export default {
                     strokeColor: this.ZoneItem.strokeColor.value,
                     lineWidth: this.ZoneItem.lineWidth,
                     lineStyle: this.ZoneItem.lineStyle,
-                    formula: this.ZoneItem.formula,
+                    formula: this.ZoneItem.textItemList.map(item => {
+                        const obj = Object.assign(item.propertyData, {
+                            pos: { x: item.x, y: item.y }
+                        })
+                        return obj
+                    }),
                 },
             };
             this.ADDSTYLE(style);

+ 2 - 4
src/lib/item/SPlanEquipment.ts

@@ -66,7 +66,7 @@ export class SPlanEquipment extends SBaseIconTextEdit {
             // const textList = JSON.parse(this._formula);
             if (this.scene) {
                 this.textItemList.forEach((textItem) => {
-                    this.scene.removeItem(textItem);
+                    this.scene?.removeItem(textItem);
                 });
             }
             if (this._formula.length) {
@@ -75,7 +75,7 @@ export class SPlanEquipment extends SBaseIconTextEdit {
                 this._formula.forEach((item: any, index: number) => {
                     // textList.forEach((item: any, index: number) => {
                     let obj = new SBaseTextEdit(this, null);
-                    obj.propertyData = item;
+                    obj.propertyData = { ...item };
                     obj.text = item.name;
                     if (item.pos) {
                         obj.moveTo(item.pos.x, item.pos.y);
@@ -89,8 +89,6 @@ export class SPlanEquipment extends SBaseIconTextEdit {
                     obj.color = this.color;
                     obj.isTransform = false;
                     obj.showSelect = false;
-                    console.log(obj);
-
                     textItemList.push(obj);
                 });
                 this.textItemList = textItemList;

+ 116 - 30
src/lib/item/SPlanZone.ts

@@ -24,10 +24,11 @@
  * *********************************************************************************************************************
  */
 
-import { SGraphItem, STextItem, SLineStyle, STextOrigin, Point } from "@persagy-web/graph";
+import { SGraphItem, SLineStyle, STextOrigin, Point } from "@persagy-web/graph";
 import { SColor, SFont, SPainter, SLineCapStyle, SPoint, SPath, SPolygonUtil, SRect } from "@persagy-web/draw";
 import { Example } from "../index";
 import { SGraphEdit, SBaseTextEdit } from "@persagy-web/edit";
+import { SItemStatus } from "@persagy-web/big";
 /**
  * 编辑基础空间类
  *
@@ -46,8 +47,8 @@ export class SPlanZone extends SGraphEdit {
     private pointList: SPoint[][][] = [];
     /** path 对象 */
     private pathList: SPath[] = [];
-    /** text item   */
-    textItem: SBaseTextEdit = new SBaseTextEdit(this, null);
+    /** 文本数组 */
+    textItemList: SBaseTextEdit[] = [];
 
     /** 是否可移动 */
     set moveable(val: boolean) {
@@ -63,6 +64,25 @@ export class SPlanZone extends SGraphEdit {
         return this._legendData;
     } // get legendData()
 
+    /** item 状态 */
+    _status: SItemStatus = SItemStatus.Normal;
+    get status(): SItemStatus {
+        return this._status;
+    }
+    set status(v: SItemStatus) {
+        this._status = v;
+        if (v == SItemStatus.Normal) {
+            this.textItemList.map((item) => {
+                item.moveable = false;
+            });
+        } else if (v == SItemStatus.Edit) {
+            this.textItemList.map((item) => {
+                item.moveable = true;
+            });
+        }
+        this.update();
+    }
+
     /** 边框颜色 */
     _strokeColor: SColor = SColor.Black;
     get strokeColor(): SColor {
@@ -106,32 +126,33 @@ export class SPlanZone extends SGraphEdit {
     /** 宽度是否像素 */
     widthIsPx: boolean = false;
 
-    /**文本内容 */
-    get text(): string {
-        return this.textItem.text;
-    } // Get text
-    set text(v: string) {
-        this.textItem.text = v;
-        this.update();
-    } // Set text
-    /**文本颜色 */
+    /** 文本颜色 */
     private _color: SColor = new SColor();
     get color(): SColor {
         return this._color;
     } // Get color
     set color(v: SColor) {
         this._color = v;
-    } // Set color
-    /**文本样式 */
+        this.textItemList.forEach((item) => {
+            item.color = v;
+        });
+        this.update();
+    }
+
+    /** 文本字体 */
     private _font: SFont = new SFont("sans-serif", 12);
     get font(): SFont {
         return this._font;
     } // Get font
     set font(v: SFont) {
         this._font = v;
+        this.textItemList.forEach((item: SBaseTextEdit, index: number) => {
+            item.font = v;
+        });
+        this.update();
     } // Set font
 
-    /** 是否显示文字  */
+    /** 是否显示文字 */
     _showText: boolean = true;
     get showText(): boolean {
         return this._showText;
@@ -142,18 +163,60 @@ export class SPlanZone extends SGraphEdit {
         }
         this._showText = v;
         if (v) {
-            this.textItem.show();
+            this.textItemList.map((item) => {
+                item.show();
+            });
         } else {
-            this.textItem.hide();
+            this.textItemList.map((item) => {
+                item.hide();
+            });
         }
     }
 
     /** 公式 */
-    private _formula: string = "";
+    private _formula: any[] = [];
     set formula(val) {
         this._formula = val;
+        try {
+            if (this.scene) {
+                this.textItemList.forEach((textItem) => {
+                    this.scene?.removeItem(textItem);
+                });
+            }
+            if (val.length) {
+                const textItemList: any[] = [];
+                val.forEach((item: any, index: number) => {
+                    let obj = new SBaseTextEdit(this, null);
+                    obj.propertyData = { ...item };
+                    obj.text = item.name;
+                    if (item.pos) {
+                        obj.moveTo(item.pos.x, item.pos.y);
+                    } else {
+                        const avgPos = this.getAverageVal();
+                        // console.log(avgPos.avgY - this.font.size * (0.5 * val.length - 0.5 - index))
+                        obj.moveTo(avgPos.avgX, avgPos.avgY - this.font.size * (0.5 * val.length - 0.5 - index));
+                    }
+
+                    obj.connect("onMove", this, this.textMove.bind(this));
+                    obj.font = this.font;
+                    obj.color = this.color;
+                    obj.originPosition = STextOrigin.Center;
+                    obj.isTransform = false;
+                    obj.moveable = true;
+                    obj.showSelect = false;
+                    textItemList.push(obj);
+                });
+                this.textItemList = textItemList;
+            } else {
+                this.textItemList = [];
+            }
+            this.update();
+        } catch (error) {
+            console.error("公式数据错误", error);
+        }
     } // set formula()
-    get formula(): string {
+    // get formula(): string {
+    get formula(): any[] {
         return this._formula;
     } // get formula()
 
@@ -168,8 +231,6 @@ export class SPlanZone extends SGraphEdit {
      */
     constructor(parent: SGraphItem | null, data: Example) {
         super(parent);
-        this.textItem.originPosition = STextOrigin.Center;
-        this.textItem.isTransform = false;
         this.zOrder = 9700;
         this.selectable = true;
         this.showSelect = false;
@@ -183,9 +244,8 @@ export class SPlanZone extends SGraphEdit {
         if (!this.legendData) return;
         this.id = this.legendData.id ? this.legendData.id : "";
         this.anotherMsg = this.legendData?.properties?.anotherMsg ? this.legendData.properties.anotherMsg : "";
-        this.textItem.text = this.legendData.localName ? this.legendData.localName : "";
         if (this.legendData?.outline?.length && this.legendData.outline[0] && this.legendData.outline[0]?.length) {
-            let tempArr = this.legendData.outline.map((t): Point[][] => {
+            let outline = this.legendData.outline.map((t): Point[][] => {
                 return t.map((it): Point[] => {
                     return it.map(
                         (item): Point => {
@@ -194,13 +254,12 @@ export class SPlanZone extends SGraphEdit {
                     );
                 });
             });
-            this.minX = tempArr[0][0][0].x;
+            this.minX = outline[0][0][0].x;
             this.maxX = this.minX;
-            this.minY = tempArr[0][0][0].y;
+            this.minY = outline[0][0][0].y;
             this.maxY = this.minY;
-            this.textItem.moveTo(this.minX, this.minY);
             // 处理轮廓点数组,同时计算最大最小值
-            this.pointList = tempArr.map((t): SPoint[][] => {
+            this.pointList = outline.map((t): SPoint[][] => {
                 let sPath = new SPath();
                 let tempArr = t.map((it): SPoint[] => {
                     let array = it.map(
@@ -229,10 +288,38 @@ export class SPlanZone extends SGraphEdit {
                 return tempArr;
             });
         }
-        if (this.legendData.properties?.textPos?.x && this.legendData.properties?.textPos?.y) {
-            this.textItem.moveTo(this.legendData.textPos.x, this.legendData.textPos.y);
+    }
+
+    /**
+     * 获取轮廓线第一块区域的坐标平均值
+     */
+    getAverageVal() {
+        let avgX = 0,
+            avgY = 0;
+        if (this.pointList[0] && this.pointList[0][0] && this.pointList[0][0].length) {
+            const firstOutline = this.pointList[0][0];
+            avgX =
+                firstOutline.reduce((val, pos) => {
+                    return val + pos.x;
+                }, 0) / firstOutline.length;
+            avgY =
+                firstOutline.reduce((val, pos) => {
+                    return val + pos.y;
+                }, 0) / firstOutline.length;
         }
+        return { avgX, avgY };
+    }
+
+    /**
+     * 文本位置移动回调函数
+     *
+     * @param textItem 移动的文本元素
+     * @param pointList 移动前后位置坐标信息
+     */
+    textMove(textItem: SBaseTextEdit, pointList: SPoint[]) {
+        this.moveText();
     }
+    moveText() {}
 
     /**
      * Item 对象边界区域
@@ -286,7 +373,6 @@ export class SPlanZone extends SGraphEdit {
                 attachObjectIds: [this.id],
                 properties: {
                     id: this.id,
-                    textPos: { x: this.textItem.x, y: this.textItem.y },
                     anotherMsg: this.anotherMsg,
                 },
             };

+ 6 - 6
vue.config.js

@@ -10,32 +10,32 @@ module.exports = {
         open: true,
         proxy: {
             "/labsl": {
-                target: "http://60.205.177.43:8080",
+                target: "http://60.205.177.43:28888",
                 changeOrigin: true,
                 secure: false,
             },
             "/meiku": {
-                target: "http://60.205.177.43:8080",
+                target: "http://60.205.177.43:28888",
                 changeOrigin: true,
                 secure: false,
             },
             "/datacenter": {
-                target: "http://60.205.177.43:8080",
+                target: "http://60.205.177.43:28888",
                 changeOrigin: true,
                 secure: false,
             },
             "/equip-component": {
-                target: "http://60.205.177.43:8080",
+                target: "http://60.205.177.43:28888",
                 changeOrigin: true,
                 secure: false,
             },
             // 图片服务器
             "/image-service": {
-                target: "http://api.sagacloud.cn",
+                target: "http://39.97.179.199:8888",
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {
-                    "^/image-service": "/dp-auxiliary/image-service/",
+                    "^/image-service": "/image-service/",
                 },
             },
         },