zhangyu 4 years ago
parent
commit
fa7256ae5f

+ 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)
 }

+ 9 - 0
src/components/baseEditer.vue

@@ -82,6 +82,11 @@ 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)
+        });
         parserData.zoneLegendList.forEach(t => {
           this.scene.addItem(t);
           this.scene.Nodes.push(t)
@@ -207,6 +212,10 @@ export default {
       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,8 @@
         <div class="grid-content">
           <a-upload-dragger
             name="file"
-            :multiple="true"
-            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+            :customRequest="customRequest"
+            action="https://jsonplaceholder.typicode.com/posts/"
             @change="changeImage"
           >
             <p class="icon-image">
@@ -192,6 +192,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 +287,23 @@ 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.$set(this.ruleForm, 'Url', 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);
       }

+ 39 - 27
src/components/mapClass/EditScence.ts

@@ -3,6 +3,7 @@ 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"
@@ -154,19 +155,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,
@@ -206,16 +195,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: '嗡嗡嗡',
             }
         }
@@ -228,6 +217,7 @@ export class EditScence extends SGraphScene {
         this.grabItem == null;
         this.focusItem = item;
         this.cmd = 'choice';
+        // this.Markers.push(item)
     }
 
     /**
@@ -236,15 +226,15 @@ export class EditScence extends SGraphScene {
     addTextItem(event: SMouseEvent): void {
         const data = {
             /** ID */
-            ID:'456',
+            ID: '456',
             /** 名称  */
             Name: '文本',
             /** 图标(Image),线类型(Line) */
             Type: "Text",
             /** 位置  */
-            Pos: {X: event.x, Y: event.y},
+            Pos: { X: event.x, Y: event.y },
             /** 由应用自己定义  */
-            Properties:{
+            Properties: {
                 Text: '请在右侧属性栏输入文字!'
             }
         }
@@ -256,13 +246,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);
     }
 
     /**
@@ -389,6 +387,16 @@ 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;
+            alert(url)
+        }
+    }
+    /**
      * 删除指定item
      */
     deleiteItem(): void {
@@ -421,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
     }
@@ -476,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;