Selaa lähdekoodia

Merge branch 'develop' of http://39.106.8.246:3003/web/wanda-editer into develop

haojianlong 4 vuotta sitten
vanhempi
commit
ff251515b7

+ 6 - 0
src/api/editer.js

@@ -19,4 +19,10 @@ export function saveGroup(postParams) {
 //查询系统图展示所需数据
 export function readGroup(postParams) {
     return httputils.fetchJson(`${testApi}/graph/read`, postParams)
+}
+//上传图片
+export function uploadImg({
+    postParams
+}) {
+    return httputils.postJson(`${testApi}/Picture/create`, postParams)
 }

+ 43 - 22
src/components/baseEditer.vue

@@ -74,9 +74,25 @@ export default {
       this.readGroup().then(data => {
         const parserData = new STopologyParser(null);
         parserData.parseData(data.data.Data[0].Elements);
+        // 多边形
         parserData.zoneLegendList.forEach(t => {
           this.scene.addItem(t);
-          this.scene.Nodes.push(t)
+          this.scene.Nodes.push(t);
+        });
+        // 增加文字
+        parserData.textMarkerList.forEach(t => {
+          this.scene.addItem(t);
+          this.scene.Markers.push(t);
+        });
+        // 增加图片
+        parserData.imageMarkerList.forEach(t => {
+          this.scene.addItem(t);
+          this.scene.Markers.push(t);
+        });
+        // 增加直线
+        parserData.lineMarkerList.forEach(t => {
+          this.scene.addItem(t);
+          this.scene.Markers.push(t);
         });
       });
       this.scene.emitChange = this.emitChange;
@@ -185,7 +201,7 @@ export default {
         const Elements = this.scene.saveMsgItem();
         const data = {
           Elements,
-          ID: "a36a8b30423a44bba03be989ddc36737",  // 如果id为空则为地图
+          ID: "a36a8b30423a44bba03be989ddc36737", // 如果id为空则为地图
           Name: "1", // 名称
           CategoryID: "", // 图分类ID
           ProjectID: "1", // 项目ID
@@ -198,36 +214,41 @@ export default {
         });
       });
       bus.$on("exportByKey", val => {
-        const list = this.fParser.spaceList.map(t => {
-          if (t.data.Type == val.key) {
-            return {
-              ID: uuid(),
-              Name: t.name,
-              GraphElementType: 'Zone',
-              GraphElementId: "273d633cc5c54a4882794b34843d1a00",
-              AttachObjectIds: [],
-              Pos: { x: t.x, y: t.y },
-              OutLine: t.pointArr,
-              Properties: {
-                strokeColor: '#3d73c0',
-                fillColor: '#eda986'
-              },
-              Num: 123
-            };
-          }
-        }).filter(item => item);
-        console.log(list)
+        const list = this.fParser.spaceList
+          .map(t => {
+            if (t.data.Type == val.key) {
+              return {
+                ID: uuid(),
+                Name: t.name,
+                GraphElementType: "Zone",
+                GraphElementId: "273d633cc5c54a4882794b34843d1a00",
+                AttachObjectIds: [],
+                Pos: { x: t.x, y: t.y },
+                OutLine: t.pointArr,
+                Properties: {
+                  strokeColor: "#3d73c0",
+                  fillColor: "#eda986"
+                },
+                Num: 123
+              };
+            }
+          })
+          .filter(item => item);
         const parserData = new STopologyParser(null);
         parserData.parseData({ Nodes: list });
         parserData.zoneLegendList.forEach(t => {
           this.scene.addItem(t);
-          this.scene.Nodes.push(t)
+          this.scene.Nodes.push(t);
         });
       });
       // 设备图例样式对象
       bus.$on("setLenged", obj => {
         this.scene.setlegend = obj;
       });
+      //  修改图片url
+      bus.$on("upadataImageUrl", val => {
+        this.scene.upadataImageUrl(val);
+      });
     },
     // 读取数据
     readGroup() {

+ 18 - 2
src/components/edit/attr_select.vue

@@ -71,8 +71,9 @@
         <div class="grid-content">
           <a-upload-dragger
             name="file"
-            :multiple="true"
-            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+            :customRequest="customRequest"
+            :showUploadList="false"
+            action="https://jsonplaceholder.typicode.com/posts/"
             @change="changeImage"
           >
             <p class="icon-image">
@@ -192,6 +193,7 @@ import Swatches from "vue-swatches";
 import bus from "@/bus";
 import "vue-swatches/dist/vue-swatches.css";
 import { ItemColor } from "@saga-web/big/lib";
+import { uploadImg } from "@/api/editer.js";
 export default {
   name: "attr_select",
   props: ["type", "focusItemList"],
@@ -286,8 +288,22 @@ export default {
     changebackColor(color){
       bus.$emit("changebackColor", color);
     },
+    customRequest(info){
+      const formData = new FormData()
+      formData.append('file', info.file)
+      const postParams = formData;
+      uploadImg({ postParams }).then(res => {
+        if (res.Result == 'success') {
+          bus.$emit('upadataImageUrl',res.EntityList[0])
+          this.$message.success(`${info.file.name} file uploaded successfully.`);
+        }else{
+          this.$message.error(`${info.file.name} file upload failed.`);
+        }
+      })
+    },
     changeImage(info) {
       const status = info.file.status;
+      console.log(status);
       if (status !== "uploading") {
         console.log(info.file, info.fileList);
       }

+ 73 - 31
src/components/mapClass/EditScence.ts

@@ -3,12 +3,15 @@ import { SGraphScene, SGraphLayoutType } from '@saga-web/graph/lib';
 import { SFloorParser, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big";
 import { SGraphItem, SImageItem, STextItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
 import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem";
+import { SImageLegendItem } from "@/lib/items/SImageLegendItem";
 import { TipelineItem } from "@/lib/items/TipelineItem";
 import { SImgTextItem } from "@/lib/items/SImgTextItem";
 import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem"
 import { SPoint, SFont } from '@saga-web/draw/lib';
 import { Legend } from '@/lib/types/Legend';
 import { uuid } from "@/components/mapClass/until";
+import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
+import { SLineMarkerItem } from '@/lib/items/SLineMarkerItem';
 
 /**
  * 在线绘图
@@ -70,11 +73,11 @@ export class EditScence extends SGraphScene {
      */
     listChange(obj: any) {
         let itemType: string = 'equipment'
-        if (obj.itemList[0] instanceof STextItem) {
+        if (obj.itemList[0] instanceof STextMarkerItem) {
             itemType = 'text'
-        } else if (obj.itemList[0] instanceof SImageItem) {
+        } else if (obj.itemList[0] instanceof SImageMarkerItem) {
             itemType = 'images'
-        } else if (obj.itemList[0] instanceof SLineItem) {
+        } else if (obj.itemList[0] instanceof SLineMarkerItem) {
             itemType = 'line'
         } else if (obj.itemList[0] instanceof SPolylineItem) {
             itemType = 'pipeline'
@@ -103,15 +106,30 @@ export class EditScence extends SGraphScene {
      * 增加线段item
      */
     addLine(event: SMouseEvent): boolean {
+        const data = {
+            /** ID */
+            ID:'789',
+            /** 名称  */
+            Name: '直线',
+            /** 图标(Image),线类型(Line) */
+            Type: "Line",
+            /** 位置  */
+            Pos: {X: 0, Y: 0},
+            /** 由应用自己定义  */
+            Properties:{
+                Line: [{x:event.x, y:event.y}]
+            }
+        }
 
-        const item = new SLineItem(null, new SPoint(event.x, event.y));
+        const item = new SLineMarkerItem(null, data);
         item.status = SItemStatus.Create;
         item.zOrder = ItemOrder.lineOrder;
         item.selectable = true;
         this.addItem(item);
         item.connect("finishCreated", this, this.finishCreated);
         this.grabItem = item;
-        this.undoStack.push(new SGraphAddCommand(this, item));
+        this.Markers.push(item)
+        // this.undoStack.push(new SGraphAddCommand(this, item));
         // item.connect("onMove", this, this.onItemMove.bind(this));
         return true
     }
@@ -138,19 +156,7 @@ export class EditScence extends SGraphScene {
      * 增加多边形item
      */
     addPolygonItem(event: SMouseEvent): void {
-        //创建item
-        const Legend = {
-            Name: "哈哈",
-            GraphElementType: 'Zone',
-            GraphElementId: '123',
-            Pos: { x: 0, y: 0 },
-            OutLine: [[new SPoint(event.x, event.y)]],
-            Properties: {
-                strokeColor: '#3d73c0',
-                fillColor: '#eda986'
-            },
-            Num: 123
-        }
+
         const LegendData: Legend = {
             ID: uuid(),
             Name: this._legend.Name,
@@ -181,7 +187,7 @@ export class EditScence extends SGraphScene {
         Polylines.connect("finishCreated", this, this.finishCreated);
         this.grabItem = Polylines;
         this.focusItem = Polylines;
-        this.Nodes.push(Polylines)
+        this.Nodes.push(Polylines);
     }
 
     /**
@@ -190,16 +196,16 @@ export class EditScence extends SGraphScene {
     addImgItem(event: SMouseEvent) {
         const data = {
             /** ID */
-            ID:'123',
+            ID: '123',
             /** 名称  */
             Name: '嗡嗡嗡',
             /** 图标(Image),线类型(Line) */
             Type: "Image",
             /** 位置  */
-            Pos: {X: event.x, Y: event.y},
+            Pos: { X: event.x, Y: event.y },
             /** 由应用自己定义  */
-            Properties:{
-                Url:require('./../../assets/logo.png'),
+            Properties: {
+                Url: '/serve/topology-wanda/Picture/query/' + '1bcff19d6f3547488673dcba7dd9507f',
                 Name: '嗡嗡嗡',
             }
         }
@@ -212,13 +218,28 @@ export class EditScence extends SGraphScene {
         this.grabItem == null;
         this.focusItem = item;
         this.cmd = 'choice';
+        this.Markers.push(item)
     }
 
     /**
      * 增加文字item
      */
     addTextItem(event: SMouseEvent): void {
-        const item = new STextItem(null, '请在右侧属性栏输入文字!');
+        const data = {
+            /** ID */
+            ID: '456',
+            /** 名称  */
+            Name: '文本',
+            /** 图标(Image),线类型(Line) */
+            Type: "Text",
+            /** 位置  */
+            Pos: { X: event.x, Y: event.y },
+            /** 由应用自己定义  */
+            Properties: {
+                Text: '请在右侧属性栏输入文字!'
+            }
+        }
+        const item = new STextMarkerItem(null, data);
         item.moveTo(event.x, event.y);
         item.selectable = true;
         item.moveable = true;
@@ -226,13 +247,21 @@ export class EditScence extends SGraphScene {
         this.addItem(item);
         this.grabItem == null
         this.cmd = 'choice';
+        this.Markers.push(item)
     }
 
     /**
      * 增加图标
      */
-    addIconItem(): void {
-
+    addIconItem(event: SMouseEvent): void {
+        const item = new SImageLegendItem(null, '请在右侧属性栏输入文字!');
+        this.grabItem == null
+        this.cmd = 'choice';
+        item.selectable = true;
+        item.moveable = true;
+        item.zOrder = ItemOrder.markOrder;
+        item.moveTo(event.x, event.y);
+        this.addItem(item);
     }
 
     /**
@@ -359,6 +388,15 @@ export class EditScence extends SGraphScene {
     }
 
     /**
+     * 更改item Url
+     * @param url string 图片key
+     */
+    upadataImageUrl(url: string): void {
+        if (this.focusItem) {
+            this.focusItem.url = '/serve/topology-wanda/Picture/query/' + url;
+        }
+    }
+    /**
      * 删除指定item
      */
     deleiteItem(): void {
@@ -391,12 +429,16 @@ export class EditScence extends SGraphScene {
      * 保存数据
      */
     saveMsgItem(): any {
-        const Nodes: any = []
+        const Nodes: any = [];
+        const Markers: any = [];
         this.Nodes.forEach(e => {
             Nodes.push(e.toData())
         });
+        this.Markers.forEach(e => {
+            Markers.push(e.toData())
+        });
         let element = {
-            Nodes
+            Nodes, Markers
         }
         return element
     }
@@ -446,9 +488,9 @@ export class EditScence extends SGraphScene {
             case 'Zone':
                 this.addPolygonItem(event);
                 break;
-            // case 'Image':
-            //     this.addPolylineItem(event);
-            //     break;
+            case 'Image':
+                this.addIconItem(event);
+                break;
             case 'Line':
                 this.addPolylineItem(event);
                 break;

+ 28 - 85
src/lib/items/SLineMarkerItem.ts

@@ -1,7 +1,7 @@
 
 import { SGraphItem } from "@saga-web/graph/lib";
 import { SPoint } from "@saga-web/draw/lib";
-import { SPolylineItem } from '@saga-web/big/lib';
+import { SLineItem } from '@saga-web/big/lib';
 import { Marker } from '../types/Marker';
 
 /**
@@ -9,79 +9,10 @@ import { Marker } from '../types/Marker';
  *
  * * @author  张宇(taohuzy@163.com)
  */
-export class SLineMarkerItem extends SPolylineItem {
+export class SLineMarkerItem extends SLineItem {
     /** 标识对象数据 */
     data: Marker;
 
-    /** x轴缩放属性 */
-    // _scaleX: number = 1;
-    // get scaleX(): number {
-    //     return this._scaleX;
-    // }
-    // set scaleX(v: number) {
-    //     this._scaleX = v;
-    //     if (this.data.Scale) {
-    //         this.data.Scale.X = v;
-    //     }
-    //     this.update();
-    // }
-
-    /** y轴缩放属性 */
-    // _scaleY: number = 1;
-    // get scaleY(): number {
-    //     return this._scaleY;
-    // }
-    // set scaleY(v: number) {
-    //     this._scaleY = v;
-    //     if (this.data.Scale) {
-    //         this.data.Scale.Y = v;
-    //     }
-    //     this.update();
-    // }
-
-    /** y轴旋转属性 */
-    // _rolate: number = 0;
-    // get rolate(): number {
-    //     return this._rolate;
-    // }
-    // set rolate(v: number) {
-    //     this._rolate = v;
-    //     if (this.data.Rolate) {
-    //         this.data.Rolate.Z = v;
-    //     }
-    //     this.update();
-    // }
-
-    set name(v: string) {
-        this.data.Name = v;
-    }
-
-    set line(arr: SPoint[]) {
-        if (this.data.Properties) {
-            this.data.Properties.Line = arr;
-        }
-    }
-
-    set x(v: number) {
-        this.data.Pos.X = v;
-    }
-
-    set y(v: number) {
-        this.data.Pos.Y = v;
-    }
-
-    set width(v: number) {
-        if (this.data.Size) {
-            this.data.Size.Width = v;
-        }
-    }
-
-    set height(v: number) {
-        if (this.data.Size) {
-            this.data.Size.Height = v;
-        }
-    }
-
     /**
      * 构造函数
      *
@@ -89,24 +20,36 @@ export class SLineMarkerItem extends SPolylineItem {
      * @param data      标识对象数据
      */
     constructor(parent: SGraphItem | null, data: Marker) {
-        super(parent,[]);
+        super(parent);
         this.data = data;
         this.id = data.ID;
+        this.name = data.Name;
         this.moveTo(data.Pos.X, data.Pos.Y);
-        // if (data.Scale) {
-        //     this.scaleX = data.Scale.X;
-        //     this.scaleY = data.Scale.Y;
-        // }
-        // if (data.Rolate && data.Rolate.Z) {
-        //     this.rolate = data.Rolate.Z;
-        // }
-        if (data.Size) {
-            this.width = data.Size.Width;
-            this.height = data.Size.Height;
-        }
         if (data.Properties && data.Properties.Line) {
-            this.line = data.Properties.Line;
+            let setPointList: SPoint[];
+            setPointList = data.Properties.Line.map(i => {
+                return new SPoint(i.x, i.y)
+            })
+            this.line = setPointList;
+        }
+        if (data.Properties && data.Properties.LineWidth) {
+            this.lineWidth = data.Properties.LineWidth;
+        }
+        if (data.Properties && data.Properties.LineStyle) {
+            this.lineStyle = data.Properties.LineStyle;
+        }
+        if (data.Properties && data.Properties.StrokeColor) {
+            this.strokeColor = data.Properties.StrokeColor;
         }
     } // Constructor
-    
+
+    toData(): Marker {
+        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Properties.Line = this.line;
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.Properties.StrokeColor = this.strokeColor;
+        this.data.Properties.LineStyle = this.lineStyle;
+        return this.data;
+    }
+
 } // Class SLineMarkerItem

+ 9 - 81
src/lib/items/STextMarkerItem.ts

@@ -32,75 +32,6 @@ export class STextMarkerItem extends STextItem {
         this.update();
     }
 
-    /** x轴缩放属性 */
-    // _scaleX: number = 1;
-    // get scaleX(): number {
-    //     return this._scaleX;
-    // }
-    // set scaleX(v: number) {
-    //     this._scaleX = v;
-    //     if (this.data.Scale) {
-    //         this.data.Scale.X = v;
-    //     }
-    //     this.update();
-    // }
-
-    /** y轴缩放属性 */
-    // _scaleY: number = 1;
-    // get scaleY(): number {
-    //     return this._scaleY;
-    // }
-    // set scaleY(v: number) {
-    //     this._scaleY = v;
-    //     if (this.data.Scale) {
-    //         this.data.Scale.Y = v;
-    //     }
-    //     this.update();
-    // }
-
-    /** y轴旋转属性 */
-    // _rolate: number = 0;
-    // get rolate(): number {
-    //     return this._rolate;
-    // }
-    // set rolate(v: number) {
-    //     this._rolate = v;
-    //     if (this.data.Rolate) {
-    //         this.data.Rolate.Z = v;
-    //     }
-    //     this.update();
-    // }
-
-    set name(v: string) {
-        this.data.Name = v;
-    }
-
-    set text(v: string) {
-        if (this.data.Properties) {
-            this.data.Properties.Text = v;
-        }
-    }
-
-    set x(v: number) {
-        this.data.Pos.X = v;
-    }
-
-    set y(v: number) {
-        this.data.Pos.Y = v;
-    }
-
-    set width(v: number) {
-        if (this.data.Size) {
-            this.data.Size.Width = v;
-        }
-    }
-
-    set height(v: number) {
-        if (this.data.Size) {
-            this.data.Size.Height = v;
-        }
-    }
-
     /**
      * 构造函数
      *
@@ -111,25 +42,24 @@ export class STextMarkerItem extends STextItem {
         super(parent);
         this.data = data;
         this.id = data.ID;
+        this.name = data.Name;
         this.moveTo(data.Pos.X, data.Pos.Y);
-        // if (data.Scale) {
-        //     this.scaleX = data.Scale.X;
-        //     this.scaleY = data.Scale.Y;
-        // }
-        // if (data.Rolate && data.Rolate.Z) {
-        //     this.rolate = data.Rolate.Z;
-        // }
         if (data.Size) {
             this.width = data.Size.Width;
             this.height = data.Size.Height;
         }
         if (data.Properties && data.Properties.Text) {
-            if (data.Properties.Text instanceof String) {
-                this.text = data.Properties.Text;
-            }
+            this.text = data.Properties.Text;
         }
     } // Constructor
 
+    toData(): Marker {
+        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Size = {Width: this.width, Height: this.height};
+        this.data.Properties.Text = this.text;
+        return this.data;
+    }
+
     /**
      * Item绘制操作
      *
@@ -139,8 +69,6 @@ export class STextMarkerItem extends STextItem {
         // 绘制文本
         painter.brush.color = new SColor(this.color);
         painter.font = this.font;
-        // painter.scale(this.scaleX, this.scaleY);
-        // painter.rotate(this.rolate);
         if (this.borderStyle == SLineStyle.Dashed) {
             painter.pen.lineDash = [
                 painter.toPx(this.lineWidth * 3),

+ 2 - 2
src/lib/items/TipelineItem.ts

@@ -3,7 +3,7 @@ import { SPainter, SColor } from '@saga-web/draw';
 import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib';
 import { Relation } from '../types/Relation';
 import { SPoint } from "@saga-web/draw/lib";
-import {Point} from "@saga-web/big/lib/types/Point";
+import { Point } from "@saga-web/big/lib/types/Point";
 
 /**
  * 管道item
@@ -115,7 +115,7 @@ export class TipelineItem extends SPolylineItem {
   }
 
   /** 获取data数据  */
-  getData(): Relation | null {
+  toData(): Relation | null {
     let pointList:Point[] = this.pointList.map(item => {
       return {
         X: item.x,

+ 3 - 3
src/lib/parsers/STopologyParser.ts

@@ -88,13 +88,13 @@ export class STopologyParser extends SParser {
      * @param   t       标识对象数据
      * */
     private addMarker(t: Marker): void {
-        if (t.Type == SMarkerType.Image) {
+        if (t.Type == "Image") {
             let item = new SImageMarkerItem(null, t);
             this.imageMarkerList.push(item);
-        } else if (t.Type == SMarkerType.Line) {
+        } else if (t.Type == "Line") {
             let item = new SLineMarkerItem(null, t);
             this.lineMarkerList.push(item);
-        } else if (t.Type == SMarkerType.Text) {
+        } else if (t.Type == "Text") {
             let item = new STextMarkerItem(null, t);
             this.textMarkerList.push(item);
         }

+ 1 - 1
src/lib/types/Marker.ts

@@ -35,7 +35,7 @@ export interface Marker {
     /** 名称  */
     Name: string;
     /** 图标(Image),线类型(Line) */
-    Type: SMarkerType;
+    Type: string;
     /** 位置  */
     Pos: Point;
     /** 缩放  */