Kaynağa Gözat

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

YaolongHan 4 yıl önce
ebeveyn
işleme
e6fc584420

+ 2 - 2
package.json

@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@saga-web/base": "2.1.22",
-    "@saga-web/big": "1.0.54",
+    "@saga-web/big": "1.0.56",
     "@saga-web/draw": "2.1.100",
-    "@saga-web/feng-map": "1.0.11",
+    "@saga-web/feng-map": "1.0.15",
     "@saga-web/graph": "2.1.94",
     "@saga-web/topology": "1.0.84",
     "ant-design-vue": "^1.6.0",

+ 88 - 69
src/components/baseEditer.vue

@@ -21,7 +21,7 @@ import store from "../store";
 import { Loading } from "element-ui";
 import { Message } from 'element-ui';
 let fengmap = null;
-
+//// 底图空间增加字段 isExtracted:boolean true 已被提取过
 export default {
   props: {
     cmdType: {
@@ -91,52 +91,10 @@ export default {
           .then(response => {
             console.log("获取rf成功", response);
             this.parserData(floorid);
+            this.readGraph()
             loadings.close();
           });
         this.view.fitSceneToView();
-
-      });
-      // 获取主题数据
-      this.readGroup().then(data => {
-        this.graphId = data.Data[0].ID;
-        bus.$emit('setGraphId',this.graphId)
-        if (data.Data) {
-          const parserData = new STopologyParser(null);
-          parserData.parseData(data.Data[0].Elements);
-          // 多边形
-          parserData.zoneLegendList.forEach(t => {
-            this.scene.addItem(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);
-          });
-          // 增加图标类图例
-          parserData.imageLegendList.forEach(t => {
-            this.scene.addItem(t);
-            this.scene.Nodes.push(t);
-          });
-          // 增加管线类
-          // 增加图标类图例
-          parserData.relationList.forEach(t => {
-            this.scene.addItem(t);
-            this.scene.Relations.push(t);
-          });
-          this.view.fitSceneToView();
-          bus.$emit("elementDataChange", this.scene);
-        }
       });
       // 获取typeid
       this.getTypeId();
@@ -166,8 +124,11 @@ export default {
             }
             this.fParser = new SFloorParser(null);
             this.fParser.parseData(res);
+            this.scene.fidToItem = {}
             this.fParser.spaceList.forEach(t => {
+              t.zOrder = t.zOrder + t.data.Height;
               t.selectable = true;
+              this.scene.fidToItem[t.data.SourceId] = t;
               this.scene.addItem(t);
             });
             this.scene.spaceList = this.fParser.spaceList;
@@ -190,6 +151,54 @@ export default {
         }
       }
     },
+    // 读取绘制数据
+    readGraph(){
+      this.readGroup().then(data => {
+        this.graphId = data.Data[0].ID;
+        bus.$emit('setGraphId',this.graphId)
+        if (data.Data) {
+          const parserData = new STopologyParser(null);
+          parserData.parseData(data.Data[0].Elements);
+          // 多边形
+          parserData.zoneLegendList.forEach(t => {
+            this.scene.addItem(t);
+            // 记录提取
+            if (t.data.Properties && t.data.Properties.FID) {
+              this.scene.fidToItem[t.data.Properties.FID].isExtracted = true
+            }
+            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);
+          });
+          // 增加图标类图例
+          parserData.imageLegendList.forEach(t => {
+            this.scene.addItem(t);
+            this.scene.Nodes.push(t);
+          });
+          // 增加管线类
+          // 增加图标类图例
+          parserData.relationList.forEach(t => {
+            this.scene.addItem(t);
+            this.scene.Relations.push(t);
+          });
+          this.view.fitSceneToView();
+          bus.$emit("elementDataChange", this.scene);
+        }
+      });
+    },
     // 监听变化
     emitChange(itemMsg) {
       this.chiceItemList = itemMsg.itemList;
@@ -283,30 +292,34 @@ export default {
         saveGroup(data).then(res => {
           Message.close()
           console.log("aaaaaaaaaaaaaa", res);
+          this.graphId = res.Data;
         });
       });
       bus.$on("exportByKey", val => {
         const list = this.fParser.spaceList
           .map(t => {
             if (t.data.Type == val.key) {
-              return {
-                ID: uuid(),
-                Name: val.name,
-                GraphElementType: val.properties.Type,
-                GraphElementId: "273d633cc5c54a4882794b34843d1a00",
-                AttachObjectIds: [],
-                Pos: { x: t.x, y: t.y },
-                OutLine: t.pointArr[0],
-                SubType: "",
-                Properties: {
-                  StrokeColor: "#3d73c0",
-                  FillColor: "#72f5f980",
-                  font: 0,
-                  color: "",
-                  TextPos: { X: 0, Y: 0 }
-                },
-                Num: 1
-              };
+              if (!t.isExtracted) {
+                t.isExtracted = true
+                return {
+                  ID: uuid(),
+                  Name: val.name,
+                  GraphElementType: val.properties.Type,
+                  GraphElementId: "273d633cc5c54a4882794b34843d1a00",
+                  AttachObjectIds: [],
+                  Pos: { x: t.x, y: t.y },
+                  OutLine: t.pointArr[0],
+                  SubType: "",
+                  Properties: {
+                    StrokeColor: "#3d73c0",
+                    FillColor: "#72f5f980",
+                    font: 0,
+                    color: "",
+                    TextPos: { X: 0, Y: 0 }
+                  },
+                  Num: 1
+                };
+              }
             }
           })
           .filter(item => item);
@@ -377,6 +390,10 @@ export default {
       }),
       //发布图
       bus.$on("publishMap", () => {
+        if(this.graphId==''){
+          this.$message.error('请先保存');
+          return false;
+        }
        this.publishBtn()
       })
       /**
@@ -424,13 +441,15 @@ export default {
       publishGraph(data).then(res => {
         loadings.close();
         if (res.Result == "success") {
-          this.$message.success(res.Message);
-          const data = `categoryId=${this.urlMsg.categoryId}&projectId=${this.urlMsg.projectId}&BuildingID=${this.urlMsg.BuildingID}&FloorID=${this.urlMsg.FloorID}&fmapID=${this.urlMsg.fmapID}`;
-          const url =
-                  window.location.origin +
-                  "/wandaEditer/drafts?" +
-                  encodeURIComponent(data);
-          window.open(url, true);
+          this.$message.success('发布成功');
+         setTimeout(()=>{
+           const data = `categoryId=${this.urlMsg.categoryId}&projectId=${this.urlMsg.projectId}&BuildingID=${this.urlMsg.BuildingID}&FloorID=${this.urlMsg.FloorID}&fmapID=${this.urlMsg.fmapID}`;
+           const url =
+                   window.location.origin +
+                   "/wandaEditer/drafts?" +
+                   encodeURIComponent(data);
+           window.open(url, true);
+         },1000);
         } else {
           this.$message.error(res.Message);
         }

+ 12 - 4
src/components/edit/attr_select.vue

@@ -399,14 +399,20 @@ export default {
     },
     // 改变线的颜色
     changeBorderColor() {
-      bus.$emit("changeBorderColor", this.borderColor);
+      if (this.borderColor) {
+        bus.$emit("changeBorderColor", this.borderColor);
+      }
     },
     // 改变字体颜色
     changeFontColor(color) {
-      bus.$emit("changeFontColor", color);
+      if (color) {
+        bus.$emit("changeFontColor", color);
+      }
     },
     changebackColor(color) {
-      bus.$emit("changebackColor", color);
+      if (color) {
+        bus.$emit("changebackColor", color);
+      }
     },
     customRequest(info) {
       const formData = new FormData();
@@ -450,7 +456,9 @@ export default {
       bus.$emit("changeImageNum", this.imageNum);
     },
     changefillColor() {
-      bus.$emit("changefillColor", this.fillColor);
+      if (this.fillColor) {
+        bus.$emit("changefillColor", this.fillColor);
+      }
     },
     //设置缩小item为编辑状态
     OpenEditStatus() {

+ 13 - 6
src/components/edit/right_toolbar.vue

@@ -97,7 +97,7 @@ export default {
       attrType: "",
       elementData: [],
       key: "",
-      isLock: false,
+      isLock: true,
       aspectRatio: 1,// 元素宽高比
     };
   },
@@ -214,19 +214,26 @@ export default {
           }
           if (item.name == "Width") {
             item.msg = width;
-            // 针对图片
-            if (Item instanceof SImageMarkerItem) {
+            // Icon显示图片宽
+            if (Item instanceof SImageLegendItem) {
+              item.msg = Item.img.width;
+            }
+            // 针对图片及Icon
+            if (Item instanceof SImageMarkerItem || Item instanceof SImageLegendItem) {
               item.disable = false;
-              // item.msg = Item.width;
             } else {
               item.disable = true;
             }
           }
           if (item.name == "Height") {
             item.msg = height;
-            if (Item instanceof SImageMarkerItem) {
+            // Icon显示图片高
+            if (Item instanceof SImageLegendItem) {
+              item.msg = Item.img.height;
+            }
+            // 针对图片及Icon
+            if (Item instanceof SImageMarkerItem || Item instanceof SImageLegendItem) {
               item.disable = false;
-              // item.msg = Item.height;
             } else {
               item.disable = true;
             }

+ 25 - 10
src/components/edit/top_toolbar.vue

@@ -37,7 +37,7 @@
               <a-icon type="caret-down" class="down-icon" />
             </div>
             <a-menu slot="overlay">
-              <a-menu-item v-for="item in alignmentOptions" :key="item.value" @click="changeAlignItem(item.value)">
+              <a-menu-item :disabled='item.disable' v-for="item in alignmentOptions" :key="item.value" @click="changeAlignItem(item.value)">
                 <img style="width: 16px;margin-right: 5px;" :src="require(`./../../assets/images/`+item.img+`.png`)" alt />
                 <span>{{item.label}}</span>
               </a-menu-item>
@@ -89,42 +89,50 @@ export default {
         {
           value: SGraphLayoutType.Left,
           label: "左对齐",
-          img: "t-left"
+          img: "t-left",
+          disable:true,
         },
         {
           value: SGraphLayoutType.Right,
           label: "右对齐",
-          img: "t-right"
+          img: "t-right",
+           disable:true,
         },
         {
           value: SGraphLayoutType.Top,
           label: "顶对齐",
-          img: "t-top"
+          img: "t-top",
+           disable:true,
         },
         {
           value: SGraphLayoutType.Bottom,
           label: "底对齐",
-          img: "t-bottom"
+          img: "t-bottom",
+           disable:true,
         },
         {
           value: SGraphLayoutType.Center,
           label: "水平居中对齐",
-          img: "t-center"
+          img: "t-center",
+           disable:true,
         },
         {
           value: SGraphLayoutType.Middle,
           label: "垂直居中对齐",
-          img: "t-topandbottm"
+          img: "t-topandbottm",
+           disable:true,
         },
         {
           value: SGraphLayoutType.Vertical,
           label: "垂直分布",
-          img: "t-vertical"
+          img: "t-vertical",
+           disable:true,
         },
         {
           value: SGraphLayoutType.Horizontal,
           label: "水平分布",
-          img: "t-level"
+          img: "t-level",
+           disable:true,
         }
       ],
       scale: 0.5, //底图缩放比例
@@ -182,10 +190,17 @@ export default {
       bus.$emit('changeScale', this.scale / oldScale)
     },
     FocusItemChanged(itemMsg) {
-      this.focusItem = null;
+      this.focusItem = null; 
+      this.alignmentOptions.forEach(el=>{
+            el.disable = true
+        })
       if (itemMsg.itemList.length == 1) {
         this.isLock = itemMsg.itemList[0].moveable;
         this.focusItem = itemMsg.itemList[0];
+      }else if (itemMsg.itemList.length > 1) {
+          this.alignmentOptions.forEach(el=>{
+              el.disable = false
+          })
       }
     },
     lockItem() {

+ 62 - 16
src/components/mapClass/EditScence.ts

@@ -81,6 +81,9 @@ export class EditScence extends SGraphScene {
         this._legend = obj;
         console.log('aaaaaa', obj)
     }
+    /** fid=>item映射,由解析器存入   */
+    fidToItem = {}
+
     /**
      * 监听变化
      * @param obj 变化后的对象
@@ -140,7 +143,8 @@ export class EditScence extends SGraphScene {
             /** 由应用自己定义  */
             Properties: {
                 IconUrl: require("../../assets/images/t-line-hover.png"),
-                Line: [{ X: event.x, Y: event.y }]
+                Line: [{ X: event.x, Y: event.y }],
+                LineWidth: 2
             }
         }
         const item = new SLineMarkerItem(null, data);
@@ -180,6 +184,13 @@ export class EditScence extends SGraphScene {
      * 增加管道 lenged
      */
     addTipelineItem(event: SMouseEvent): boolean {
+        const anc = this.clickIsAnchor(event);
+        if (anc) {
+            const p = anc.mapToScene(0, 0)
+            anc.isConnected = true;
+            event.x = p.x;
+            event.y = p.y;
+        }
         const LegendData: Relation = {
             ID: uuid(),
             Name: this._legend.Name,
@@ -205,6 +216,11 @@ export class EditScence extends SGraphScene {
         // this.undoStack.push(new SGraphAddCommand(this, item));
         this.grabItem = item;
         this.focusItem = item;
+        // 起始锚点
+        item.startAnchor = anc;
+        if (anc) {
+            anc.parent?.connect('changePos', item, item.changePos)
+        }
         this.scenceUpdate(this);
         return true
     }
@@ -264,7 +280,9 @@ export class EditScence extends SGraphScene {
         if (this.cmd != 'Zone') {
             return
         }
-        if (this.isSelecting  && this._legend) {
+        if (this.isSelecting && this._legend) {
+            //@ts-ignore
+            item.isExtracted = true
             const SubType = this._legend.SubType ? this._legend.SubType : ''
             const LegendData: Legend = {
                 ID: uuid(),
@@ -285,6 +303,7 @@ export class EditScence extends SGraphScene {
                     LineWidth: this._legend.LineWidth,
                     font: 12,
                     color: '',
+                    FID: item.data.SourceId,
                     TextPos: { X: item.data.Location.Points[0].X, Y: -item.data.Location.Points[0].Y }
                 },
             }
@@ -302,6 +321,7 @@ export class EditScence extends SGraphScene {
             this.addItem(Polylines);
             this.Nodes.push(Polylines);
             Polylines.connect("finishCreated", this, this.finishCreated);
+            this.finishCreated(Polylines)
             this.focusItem = Polylines;
             this.scenceUpdate(this);
         }
@@ -396,7 +416,7 @@ export class EditScence extends SGraphScene {
                 sWidth: 24,  //icon 的宽
                 sHeight: 24,   //icon 的高
                 font: 12,    //font
-                color: ''  //字体颜色
+                color: '',  //字体颜色
             },
         }
         const item = new SImageLegendItem(null, LegendData);
@@ -636,7 +656,7 @@ export class EditScence extends SGraphScene {
                         a = index
                     }
                 });
-                if(a > -1) {
+                if (a > -1) {
                     this.Nodes.splice(a, 1);
                 }
                 let b = -1;
@@ -665,7 +685,7 @@ export class EditScence extends SGraphScene {
             }
         }
     }
-    scenceUpdate(scence: any) {}
+    scenceUpdate(scence: any) { }
 
     /**
      * 对齐指定item
@@ -743,6 +763,10 @@ export class EditScence extends SGraphScene {
             event.y = this.highLight.point.y;
         }
         if (this.grabItem) {
+            // if (this.grabItem instanceof TipelineItem) {
+            //     this.setTipeEndanchor(event)
+            //     return true;
+            // }
             return this.grabItem.onMouseDown(event);
         }
         switch (this.cmd) {
@@ -774,7 +798,7 @@ export class EditScence extends SGraphScene {
         }
     }
 
-    onMouseMove(event: SMouseEvent):boolean {
+    onMouseMove(event: SMouseEvent): boolean {
         if (this.isAbsorbing) {
             if (!this.highLight) {
                 this.highLight = new HighlightItem(null);
@@ -803,6 +827,28 @@ export class EditScence extends SGraphScene {
     }
 
     /**
+     * 设置结束锚点
+     * 
+    */
+    setTipeEndanchor(event: SMouseEvent): void {
+        if (this.grabItem instanceof TipelineItem) {
+            const anc = this.clickIsAnchor(event);
+            if (anc) {
+                const p = anc.mapToScene(0, 0)
+                anc.isConnected = true;
+                event.x = p.x;
+                event.y = p.y;
+                if (this.grabItem.pointList.length) {
+                    this.grabItem.endAnchor = anc;
+                    anc.parent?.connect('changePos', this.grabItem, this.grabItem.changePos)
+                }
+                this.grabItem.status = SItemStatus.Normal;
+            }
+            this.grabItem.onMouseDown(event)
+        }
+    }
+
+    /**
      *  划线时点击位置是否是锚点
      *
      *  @param  event   事件
@@ -815,7 +861,6 @@ export class EditScence extends SGraphScene {
         this.Nodes.forEach(image => {
             if (image.anchorList && image.anchorList.length) {
                 image.anchorList.forEach(anchor => {
-                    console.log(anchor)
                     let anchorPoint = anchor.mapToScene(0, 0);
                     let dis = SMathUtil.pointDistance(
                         event.x,
@@ -835,18 +880,19 @@ export class EditScence extends SGraphScene {
         })
         console.log('-----------------------')
         console.log(minAnchor)
+        console.log('-----------------------')
         return minAnchor;
     }
 
-   /**
-     *  点是否在吸附区域内
-     *
-     *  @param  p       要判断的点
-     *  @param  minX    空间区域
-     *  @param  minY    空间区域
-     *  @param  maxX    空间区域
-     *  @param  maxY    空间区域
-     */
+    /**
+      *  点是否在吸附区域内
+      *
+      *  @param  p       要判断的点
+      *  @param  minX    空间区域
+      *  @param  minY    空间区域
+      *  @param  maxX    空间区域
+      *  @param  maxY    空间区域
+      */
     static isPointInAbsorbArea(
         p: SPoint,
         minX: number,

+ 8 - 0
src/lib/items/SImageLegendItem.ts

@@ -68,6 +68,12 @@ export class SImageLegendItem extends SIconTextItem {
         if (data.Properties && data.Properties.color) {
             this.color = new SColor(data.Properties.color);
         }
+        if (data.Properties.ImgPos) {
+            this.img.moveTo(data.Properties.ImgPos.X, data.Properties.ImgPos.Y);
+        }
+        if (data.Properties.TextPos) {
+            this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+        }
     }
 
     toData(): Legend {
@@ -75,6 +81,8 @@ export class SImageLegendItem extends SIconTextItem {
         this.data.Size = {Width: this.width, Height: this.height};
         this.data.Name = this.name;
         this.data.Properties.Url = this.img.url;
+        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
+        this.data.Properties.ImgPos = {X: this.img.x, Y: this.img.y};
         this.data.Properties.sWidth = this.sWidth;
         this.data.Properties.sHeight = this.sHeight;
         this.data.Properties.font = this.font.size;