瀏覽代碼

消除bug

YaolongHan 4 年之前
父節點
當前提交
fae56deb6c

+ 8 - 6
src/components/baseEditer.vue

@@ -100,7 +100,6 @@ export default {
     parserData(floor) {
       if (this.floorList[floor]) {
         fengmap.parseData(this.floorList[floor], res => {
-          console.log('parsedata', res)
           if (res.err) {
             console.log(res.err)
             return
@@ -201,10 +200,10 @@ export default {
         const Elements = this.scene.saveMsgItem();
         const data = {
           Elements,
-          ID: "a36a8b30423a44bba03be989ddc36737", // 如果id为空则为地图
+          ID: "66332f264a5c4c0c95fb68dea93d43fd", // 如果id为空则为地图
           Name: "1", // 名称
           CategoryID: "", // 图分类ID
-          ProjectID: "1", // 项目ID
+          ProjectID: "2", // 项目ID
           BuildingID: "1", // 建筑ID
           FloorID: "1", // 楼层id
           Note: "1" // 图说明
@@ -244,18 +243,21 @@ export default {
       // 设备图例样式对象
       bus.$on("setLenged", obj => {
         this.scene.setlegend = obj;
-        console.log('tshishifas ',this.scene.setlegend)
       });
       //  修改图片url
       bus.$on("upadataImageUrl", val => {
         this.scene.upadataImageUrl(val);
       });
+      // 改变边框样式
+      bus.$on("changeBorder", val => {
+        this.scene.upadataBorder(val);
+      });
     },
     // 读取数据
     readGroup() {
       const data = {
-        graphId: "a36a8b30423a44bba03be989ddc36737",
-        projectId: 1
+        graphId: "66332f264a5c4c0c95fb68dea93d43fd",
+        projectId: 2
       };
       return readGroup(data);
     }

+ 17 - 15
src/components/edit/attr_select.vue

@@ -22,7 +22,7 @@
         <a-select
           style="width: 208px"
           :default-value="borderLineOption[0].id"
-          @change="handleChange"
+          @change="changeBorder"
         >
           <a-select-option
             v-for="item in borderLineOption"
@@ -60,12 +60,12 @@
       <div class="row">
         <div class="row-tit">背景色</div>
         <div class="color-choice">
-          <swatches v-model="backColor" popover-x="left" @close="changebackColor"  />
+          <swatches v-model="backColor" popover-x="left" @close="changebackColor" />
         </div>
       </div>
     </div>
     <!--图片-->
-    <div class="attr-select" v-if="type==='images'">
+    <div class="attr-select" v-if="type=='images'">
       <span class="grid-title">文字内容</span>
       <section class="grid">
         <div class="grid-content">
@@ -217,7 +217,7 @@ export default {
       color: "#1CA085",
       fontColor: "#1CA085", //文字颜色
       borderColor: "", // 边框颜色 直线,折线,多边形等
-      backColor:'', //背景色 用于text文字
+      backColor: "", //背景色 用于text文字
       borderLineOption: [
         {
           id: "solid",
@@ -259,8 +259,8 @@ export default {
     onChange(e) {
       this.precision = e.target.checked === true ? false : true;
     },
-    handleChange(value) {
-      console.log(`selected ${value}`);
+    changeBorder(value) {
+      bus.$emit("changeBorder", value);
     },
     changeNumber() {
       bus.$emit("changeFont", this.fontSize);
@@ -285,21 +285,23 @@ export default {
     changeFontColor(color) {
       bus.$emit("changeFontColor", color);
     },
-    changebackColor(color){
+    changebackColor(color) {
       bus.$emit("changebackColor", color);
     },
-    customRequest(info){
-      const formData = new FormData()
-      formData.append('file', info.file)
+    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{
+        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;

+ 0 - 1
src/components/edit/left_toolbar.vue

@@ -310,7 +310,6 @@ export default {
       });
     },
     getexampleItem(item) {
-      console.log('itemitem',item)
       this.visible = false;
       this.$emit("toolActionClick", item);
     },

+ 59 - 21
src/components/mapClass/EditScence.ts

@@ -1,7 +1,7 @@
 import { SMouseEvent, SUndoStack } from "@saga-web/base";
 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 { SGraphItem, SLineStyle, 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";
@@ -12,7 +12,6 @@ import { Legend } from '@/lib/types/Legend';
 import { uuid } from "@/components/mapClass/until";
 import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
 import { SLineMarkerItem } from '@/lib/items/SLineMarkerItem';
-
 /**
  * 在线绘图
  *
@@ -72,6 +71,7 @@ export class EditScence extends SGraphScene {
      * @param obj 变化后的对象
      */
     listChange(obj: any) {
+        console.log('obj', obj)
         let itemType: string = 'equipment'
         if (obj.itemList[0] instanceof STextMarkerItem) {
             itemType = 'text'
@@ -108,16 +108,16 @@ export class EditScence extends SGraphScene {
     addLine(event: SMouseEvent): boolean {
         const data = {
             /** ID */
-            ID:'789',
+            ID: uuid(),
             /** 名称  */
             Name: '直线',
             /** 图标(Image),线类型(Line) */
             Type: "Line",
             /** 位置  */
-            Pos: {X: 0, Y: 0},
+            Pos: { X: 0, Y: 0 },
             /** 由应用自己定义  */
-            Properties:{
-                Line: [{x:event.x, y:event.y}]
+            Properties: {
+                Line: [{ x: event.x, y: event.y }]
             }
         }
 
@@ -156,7 +156,6 @@ export class EditScence extends SGraphScene {
      * 增加多边形item
      */
     addPolygonItem(event: SMouseEvent): void {
-
         const LegendData: Legend = {
             ID: uuid(),
             Name: this._legend.Name,
@@ -164,14 +163,14 @@ export class EditScence extends SGraphScene {
             Num: 0,
             GraphElementId: this._legend.Id,
             AttachObjectIds: [],
-            Pos: { x: 0, y: 0 },
+            Type: "Zone",
+            Pos: { X: event.x, Y: event.y },
             OutLine: [[new SPoint(event.x, event.y)]],
-            Scale: { X: 1, Y: 1, Z: 1 },          // 缩放
-            Rolate: { X: 0, Y: 0, Z: 0 },
-            Size: { Width: 0, Height: 0 },         // 大小
             Properties: {
                 strokeColor: this._legend.Color,
                 fillColor: this._legend.FillColor,
+                LineDash: this._legend.LineDash,
+                LineWidth: this._legend.LineWidth,
             },
         }
 
@@ -179,10 +178,8 @@ export class EditScence extends SGraphScene {
         Polylines.selectable = true;
         //设置状态
         Polylines.setStatus = SItemStatus.Create;
-        const point = new SPoint(event.x, event.y);
         Polylines.zOrder = ItemOrder.polygonOrder;
-        Polylines.setPointList = [point];
-        Polylines.moveable = true;
+        // Polylines.moveable = true;
         this.addItem(Polylines);
         Polylines.connect("finishCreated", this, this.finishCreated);
         this.grabItem = Polylines;
@@ -196,9 +193,9 @@ export class EditScence extends SGraphScene {
     addImgItem(event: SMouseEvent) {
         const data = {
             /** ID */
-            ID: '123',
+            ID: uuid(),
             /** 名称  */
-            Name: '嗡嗡嗡',
+            Name: '图片',
             /** 图标(Image),线类型(Line) */
             Type: "Image",
             /** 位置  */
@@ -227,16 +224,19 @@ export class EditScence extends SGraphScene {
     addTextItem(event: SMouseEvent): void {
         const data = {
             /** ID */
-            ID: '456',
+            ID: uuid(),
             /** 名称  */
             Name: '文本',
-            /** 图标(Image),线类型(Line) */
+            /** 图标 */
             Type: "Text",
             /** 位置  */
             Pos: { X: event.x, Y: event.y },
             /** 由应用自己定义  */
             Properties: {
-                Text: '请在右侧属性栏输入文字!'
+                Text: '请在右侧属性栏输入文字!',
+                color: '',
+                font: 0,
+                backgroundColor: ''
             }
         }
         const item = new STextMarkerItem(null, data);
@@ -264,9 +264,9 @@ export class EditScence extends SGraphScene {
             Pos: { X: event.x, Y: event.y },
             Scale: { X: 1, Y: 1, Z: 1 },          // 缩放
             Rolate: { X: 0, Y: 0, Z: 0 },
-            // Size: { Width: 0, Height: 0 },         // 大小
+            Size: { Width: 0, Height: 0 },         // 大小
             Properties: {
-                url:this._legend.url
+                url: '/serve/topology-wanda/Picture/query/' + this._legend.url;
             },
         }
         const item = new SImageLegendItem(null, LegendData);
@@ -411,12 +411,50 @@ export class EditScence extends SGraphScene {
             this.focusItem.url = '/serve/topology-wanda/Picture/query/' + url;
         }
     }
+
+    /**
+     * 更改item border
+     * @param val string border类型
+     */
+    upadataBorder(val: string): void {
+        if (this.focusItem) {
+            let borderStyle = null
+            if (val == 'dashed') {
+                borderStyle = SLineStyle.Dashed
+            } else if (val == 'dotted') {
+                borderStyle = SLineStyle.Dotted
+            } else if (val == 'solid') {
+                borderStyle = SLineStyle.Soild
+            }
+            this.focusItem.lineStyle = borderStyle;
+        }
+    }
+
     /**
      * 删除指定item
      */
     deleiteItem(): void {
         if (this.focusItem) {
             this.removeItem(this.focusItem);
+            let i = -1
+            this.Nodes.forEach((item: any, index: number) => {
+                if (item.id == this.focusItem.id) {
+                    i = index
+                }
+            });
+            this.Nodes.splice(i, 1);
+            this.Markers.forEach((item: any, index: number) => {
+                if (item.id == this.focusItem.id) {
+                    i = index
+                }
+            });
+            this.Markers.splice(i, 1);
+            this.Relations.forEach((item: any, index: number) => {
+                if (item.id == this.focusItem.id) {
+                    i = index
+                }
+            });
+            this.Relations.splice(i, 1);
             this.focusItem = null;
         }
         if (this.view) {

+ 4 - 2
src/components/mapClass/SPolygonItem.ts

@@ -100,7 +100,9 @@ export class SPolygonItem extends SGraphItem {
         return this._lineWidth
     }
     set lineWidth(v: number) {
-        this._lineWidth = v
+        this._lineWidth = v;
+        alert(v)
+        this.update();
     };
     /** 鼠标移动点  */
     private lastPoint: SPoint | null = null;
@@ -498,7 +500,7 @@ export class SPolygonItem extends SGraphItem {
             // 对多边形数组做编辑操作
             this.editPolygonPoint(event);
         } else {
-            // return super.onMouseDown(event)
+            return super.onMouseDown(event)
         }
         return true;
 

+ 3 - 3
src/lib/items/SImageLegendItem.ts

@@ -22,9 +22,9 @@ export class SImageLegendItem extends SIconTextItem {
         this.update();
     }
 
-    set name(v: string) {
-        this.data.Name = v;
-    }
+    // set name(v: string) {
+    //     this.data.Name = v;
+    // }
 
     set x(v: number) {
         this.data.Pos.X = v;

+ 14 - 2
src/lib/items/STextMarkerItem.ts

@@ -1,5 +1,5 @@
 import { SGraphItem, STextItem } from "@saga-web/graph/lib";
-import { SPainter, SColor } from "@saga-web/draw";
+import { SPainter, SColor,SFont } from "@saga-web/draw";
 import { Marker } from '../types/Marker';
 import { SLineStyle } from '../enums/SLineStyle';
 
@@ -21,7 +21,7 @@ export class STextMarkerItem extends STextItem {
         this._lineWidth = v;
         this.update();
     }
-    
+
     /** 边框样式    */
     private _borderStyle: SLineStyle = SLineStyle.Soild;
     get borderStyle(): SLineStyle {
@@ -51,12 +51,24 @@ export class STextMarkerItem extends STextItem {
         if (data.Properties && data.Properties.Text) {
             this.text = data.Properties.Text;
         }
+        if (data.Properties && data.Properties.color) {
+            this.color = data.Properties.color
+        }
+        if (data.Properties && data.Properties.font) {
+            this.font = new SFont("sans-serif", data.Properties.font);;
+        }
+        if (data.Properties && data.Properties.backgroundColor) {
+            this.backgroundColor = data.Properties.backgroundColor
+        }
     } // 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;
+        this.data.Properties.color = this.color;
+        this.data.Properties.font = this.font.size
+        this.data.Properties.backgroundColor = this.backgroundColor
         return this.data;
     }
 

+ 13 - 5
src/lib/items/SZoneLegendItem.ts

@@ -78,11 +78,19 @@ export class SZoneLegendItem extends SPolygonItem {
             }
 
             // 设置线宽
-            this.lineWidth = data.LineWidth;
-            console.log('lineWidth',this.lineWidth)
-            // 设置线宽颜色
-            this.strokeColor = data.Properties.strokeColor.includes('#') ? new SColor(data.Properties.strokeColor) : new SColor(hexify(data.Properties.strokeColor));
-            this.fillColor = data.Properties.fillColor.includes('#') ? new SColor(data.Properties.fillColor) : new SColor(hexify(data.Properties.fillColor))
+            if (data.Properties.LineWidth) {
+                this.lineWidth = data.Properties.LineWidth
+            }
+            if (data.Properties.strokeColor) {
+                this.strokeColor = data.Properties.strokeColor.includes('#') ? new SColor(data.Properties.strokeColor) : new SColor(hexify(data.Properties.strokeColor));
+            }
+            if (data.Properties.fillColor) {
+                this.fillColor = data.Properties.fillColor.includes('#') ? new SColor(data.Properties.fillColor) : new SColor(hexify(data.Properties.fillColor))
+            }
+            //    if( data.Properties.LineDash){
+            //     this.LineDash =this._legend.Properties.LineDash
+            //    }
+
         }
     }
     toData(): any {

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

@@ -13,6 +13,7 @@ import { SImageMarkerItem } from '../items/SImageMarkerItem';
 import { SLineMarkerItem } from '../items/SLineMarkerItem';
 import { STextMarkerItem } from '../items/STextMarkerItem';
 import { TipelineItem } from '../items/TipelineItem';
+import { ItemOrder } from "@saga-web/big";
 
 /**
  * 拓扑图信息解析器
@@ -67,16 +68,18 @@ export class STopologyParser extends SParser {
      * @param   t       图例节点数据
      * */
     private addLegend(t: Legend): void {
-        if (t.GraphElementType == SGraphElementType.None) {
+        if (t.GraphElementType == 'None') {
             let item = new SNoneLegendItem(null, t);
             this.noneLegendList.push(item);
-        } else if (t.GraphElementType == SGraphElementType.Line) {
+        } else if (t.GraphElementType == 'Line') {
             let item = new SLineLegendItem(null, t)
             this.lineLegendList.push(item);
         } else if (t.GraphElementType == "Zone") {
             let item = new SZoneLegendItem(null, t);
+            item.selectable = true;
+            item.zOrder == ItemOrder.polygonOrder;
             this.zoneLegendList.push(item);
-        } else if (t.GraphElementType == SGraphElementType.Image) {
+        } else if (t.GraphElementType == 'Image') {
             let item = new SImageLegendItem(null, t);
             this.imageLegendList.push(item);
         }
@@ -91,11 +94,17 @@ export class STopologyParser extends SParser {
         if (t.Type == "Image") {
             let item = new SImageMarkerItem(null, t);
             this.imageMarkerList.push(item);
+            item.selectable = true;
+            item.zOrder = ItemOrder.imageOrder;
         } else if (t.Type == "Line") {
             let item = new SLineMarkerItem(null, t);
+            item.selectable = true;
+            item.zOrder = ItemOrder.lineOrder;
             this.lineMarkerList.push(item);
         } else if (t.Type == "Text") {
             let item = new STextMarkerItem(null, t);
+            item.selectable = true;
+            item.zOrder = ItemOrder.lineOrder;
             this.textMarkerList.push(item);
         }
     } // Function addMarker()

+ 12 - 7
src/views/editer.vue

@@ -11,7 +11,12 @@
       </div>
       <!-- 绘制界面 -->
       <div class="baseEdit">
-        <baseEditer ref="graphy" :cmdType="cmdType" @setCmdType="setCmdType" @changeFocusItem="changeFocusItem"></baseEditer>
+        <baseEditer
+          ref="graphy"
+          :cmdType="cmdType"
+          @setCmdType="setCmdType"
+          @changeFocusItem="changeFocusItem"
+        ></baseEditer>
         <!-- <baseEditertest ref="graphy"></baseEditertest> -->
         <!-- <baseEditerzy ref="graphy"></baseEditerzy> -->
       </div>
@@ -35,8 +40,8 @@ export default {
   name: "wandaEditer",
   data() {
     return {
-      cmdType: 'choice',
-      focusItemList:null,
+      cmdType: "choice",
+      focusItemList: null
     };
   },
   components: {
@@ -50,15 +55,15 @@ export default {
   methods: {
     // 左侧工具栏 点击事件
     toolActionClick(item) {
-     this.cmdType = item.Type;
-     bus.$emit('setLenged',item)
+      this.cmdType = item.Type;
+      bus.$emit("setLenged", item);
     },
     setCmdType(cmdType) {
       this.cmdType = cmdType;
     },
     changeFocusItem(item) {
       this.focusItemList = item;
-    },
+    }
   }
 };
 </script>
@@ -70,7 +75,7 @@ export default {
     width: 100%;
     height: 60px;
     background: rgba(255, 255, 255, 1);
-    box-shadow: 2px  2px 12px 0 rgba(0,0,0,.1);
+    box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.1);
   }
   .content {
     width: 100%;