浏览代码

fix:优化删除功能

YaolongHan 4 年之前
父节点
当前提交
5ff2dd5437

+ 30 - 31
src/components/baseEditer.vue

@@ -14,7 +14,7 @@ import { EditScence } from "./mapClass/EditScence";
 import bus from "@/bus";
 import { saveGroup, readGroup } from "@/api/editer.js";
 import { STopologyParser } from "./../lib/parsers/STopologyParser";
-import { uuid } from "@/components/mapClass/until"
+import { uuid } from "@/components/mapClass/until";
 
 let fengmap = null;
 
@@ -60,17 +60,17 @@ export default {
       this.scene = new EditScence();
       fengmap = new SFengParser(
         "fengMap",
-        this.mapServerURL + '/'+this.fmapID,
+        this.mapServerURL + "/" + this.fmapID,
         this.key,
         this.appName,
         null
       );
-      const floorid = 'f1';
+      const floorid = "f1";
       fengmap.loadMap(this.fmapID, resp => {
-        console.log('load-map-succ', resp)
-        this.floorList = resp
-        this.parserData(floorid)
-      })
+        console.log("load-map-succ", resp);
+        this.floorList = resp;
+        this.parserData(floorid);
+      });
       this.readGroup().then(data => {
         const parserData = new STopologyParser(null);
         parserData.parseData(data.data.Data[0].Elements);
@@ -101,28 +101,28 @@ export default {
       if (this.floorList[floor]) {
         fengmap.parseData(this.floorList[floor], res => {
           if (res.err) {
-            console.log(res.err)
-            return
+            console.log(res.err);
+            return;
           }
-          this.fParser = new SFloorParser(null)
-          this.fParser.parseData(res)
+          this.fParser = new SFloorParser(null);
+          this.fParser.parseData(res);
           this.fParser.spaceList.forEach(t => {
-            t.selectable = true
-            this.scene.addItem(t)
-          })
-          this.fParser.wallList.forEach(t => this.scene.addItem(t))
-          this.fParser.virtualWallList.forEach(t => this.scene.addItem(t))
-          this.fParser.doorList.forEach(t => this.scene.addItem(t))
-          this.fParser.columnList.forEach(t => this.scene.addItem(t))
-          this.fParser.casementList.forEach(t => this.scene.addItem(t))
-          this.view.scene = this.scene
-          this.view.fitSceneToView()
-          this.loading = false
-          this.isQuerying = false
-          console.log('success')
-        })
+            t.selectable = true;
+            this.scene.addItem(t);
+          });
+          this.fParser.wallList.forEach(t => this.scene.addItem(t));
+          this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
+          this.fParser.doorList.forEach(t => this.scene.addItem(t));
+          this.fParser.columnList.forEach(t => this.scene.addItem(t));
+          this.fParser.casementList.forEach(t => this.scene.addItem(t));
+          this.view.scene = this.scene;
+          this.view.fitSceneToView();
+          this.loading = false;
+          this.isQuerying = false;
+          console.log("success");
+        });
       } else {
-        console.log('楼层不正确')
+        console.log("楼层不正确");
       }
     },
     // 监听变化
@@ -200,10 +200,9 @@ export default {
         const Elements = this.scene.saveMsgItem();
         const data = {
           Elements,
-          ID: "66332f264a5c4c0c95fb68dea93d43fd", // 如果id为空则为地图
           Name: "1", // 名称
-          CategoryID: "", // 图分类ID
-          ProjectID: "2", // 项目ID
+          categoryId: "NTXT",
+          ProjectID: "3", // 项目ID
           BuildingID: "1", // 建筑ID
           FloorID: "1", // 楼层id
           Note: "1" // 图说明
@@ -256,8 +255,8 @@ export default {
     // 读取数据
     readGroup() {
       const data = {
-        graphId: "66332f264a5c4c0c95fb68dea93d43fd",
-        projectId: 2
+        categoryId: "NTXT",
+        projectId: 3
       };
       return readGroup(data);
     }

+ 8 - 7
src/components/edit/attr_select.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="attr-select">
     <!--选中-->
-    <div class="attr-select" v-if="type==='line'">
+    <div class="attr-select" v-if="type==='baseLine'">
       <span class="grid-title">外观</span>
       <div class="row">
         <div class="row-tit">线宽</div>
@@ -36,7 +36,7 @@
       </div>
     </div>
     <!--文字内容-->
-    <div class="attr-select" v-if="type==='text'">
+    <div class="attr-select" v-if="type==='baseText'">
       <span class="grid-title">文字内容</span>
       <div class="grid-content">
         <a-textarea
@@ -65,7 +65,7 @@
       </div>
     </div>
     <!--图片-->
-    <div class="attr-select" v-if="type=='images'">
+    <div class="attr-select" v-if="type=='baseImage'">
       <span class="grid-title">文字内容</span>
       <section class="grid">
         <div class="grid-content">
@@ -104,7 +104,7 @@
     <!--针对“设备/位置/管线/分区”属性示例-->
     <div
       class="attr-select"
-      v-if="type =='equipment' || type =='pipeline' ||type == 'fire-area' ||type == 'position'"
+      v-if="type =='Zone' || type =='Image' ||type == 'fire-Zone' ||type == 'Line'"
     >
       <div class="row-tit" v-if="type == 'fire-area'">颜色</div>
       <div class="row" v-if="type == 'fire-area'">
@@ -159,7 +159,7 @@
     <!--设备/工程信息化ID/工程信息化中的位置类型-->
     <div
       class="attr-select attr-select-bottom"
-      v-if="type =='equipment' || type =='pipeline' || type =='fire-area' ||type == 'position'"
+      v-if="type =='Zone' || type =='Image' ||type == 'fire-Zone' ||type == 'Line'"
     >
       <div class="row">
         <span>{{`工程信息化ID`}}</span>
@@ -321,14 +321,15 @@ export default {
   },
   watch: {
     focusItemList: function(newval) {
+      console.log("newval", newval);
       const Item = newval.itemList[0];
       if (newval.itemList.length == 1) {
-        if (newval.itemType == "text") {
+        if (newval.itemType == "baseText") {
           this.textMsg = Item.text;
           this.fontSize = Item.font.size;
           this.fontColor = Item.color;
           this.backColor = Item.backgroundColor;
-        } else if (newval.itemType == "line") {
+        } else if (newval.itemType == "baseLine") {
           this.lineWidth = Item.lineWidth;
           this.borderColor = Item.strokeColor;
         }

+ 55 - 49
src/components/edit/top_toolbar.vue

@@ -30,14 +30,23 @@
           <a-dropdown :trigger="['click']">
             <div class="ant-dropdown-link dropdown-flex" @click="e => e.preventDefault()">
               <div>
-                <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt/>
+                <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
                 <div>对齐</div>
               </div>
-              <a-icon type="caret-down" class="down-icon"/>
+              <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)">
-                <img style="width: 16px;margin-right: 5px;" :src="require(`./../../assets/images/`+item.img+`.png`)" alt/> <span>{{item.label}}</span>
+              <a-menu-item
+                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>
             </a-menu>
           </a-dropdown>
@@ -74,52 +83,53 @@
 </template>
 <script>
 import bus from "@/bus";
-import {SGraphLayoutType} from "@saga-web/graph/lib";
+import { SGraphLayoutType } from "@saga-web/graph/lib";
 export default {
   data() {
     return {
       isLock: false, //是否锁定
       focusItem: null,
-      alignmentOptions:[  //对齐数据
+      alignmentOptions: [
+        //对齐数据
         {
-          value:SGraphLayoutType.Left,
-          label:'左对齐',
+          value: SGraphLayoutType.Left,
+          label: "左对齐",
           img: "t-left"
         },
         {
-          value:SGraphLayoutType.Right,
-          label:'右对齐',
+          value: SGraphLayoutType.Right,
+          label: "右对齐",
           img: "t-right"
         },
         {
-          value:SGraphLayoutType.Top,
-          label:'顶对齐',
+          value: SGraphLayoutType.Top,
+          label: "顶对齐",
           img: "t-top"
         },
         {
-          value:SGraphLayoutType.Bottom,
-          label:'底对齐',
+          value: SGraphLayoutType.Bottom,
+          label: "底对齐",
           img: "t-bottom"
         },
         {
-          value:SGraphLayoutType.Center,
-          label:'水平居中对齐',
-          img:'t-center'
+          value: SGraphLayoutType.Center,
+          label: "水平居中对齐",
+          img: "t-center"
         },
         {
-          value:SGraphLayoutType.Middle,
-          label:'垂直居中对齐',
-          img:'t-topandbottm'
+          value: SGraphLayoutType.Middle,
+          label: "垂直居中对齐",
+          img: "t-topandbottm"
         },
         {
-          value:SGraphLayoutType.Vertical,
-          label:'垂直分布',
-          img:'t-vertical'
+          value: SGraphLayoutType.Vertical,
+          label: "垂直分布",
+          img: "t-vertical"
         },
         {
-          value:SGraphLayoutType.Horizontal,
-          label:'水平分布',
-          img:'t-level'
+          value: SGraphLayoutType.Horizontal,
+          label: "水平分布",
+          img: "t-level"
         }
       ]
     };
@@ -128,14 +138,8 @@ export default {
     FocusItemChanged(itemMsg) {
       this.focusItem = null;
       if (itemMsg.itemList.length == 1) {
-        if (
-          itemMsg.itemType == "images" ||
-          itemMsg.itemType == "text" ||
-          itemMsg.itemType == "position"
-        ) {
-          this.isLock = itemMsg.itemList[0].moveable;
-          this.focusItem = itemMsg.itemList[0];
-        }
+        this.isLock = itemMsg.itemList[0].moveable;
+        this.focusItem = itemMsg.itemList[0];
       }
     },
     lockItem() {
@@ -148,10 +152,11 @@ export default {
     },
     saveMsg() {
       // this.$message.success("保存成功!", 1);
-       bus.$emit("saveMsgItem");
+      bus.$emit("saveMsgItem");
     },
     // 删除item
     deleteItem() {
+      console.log(this.focusItem);
       if (this.focusItem) {
         bus.$emit("deleiteItem");
         this.focusItem = null;
@@ -162,11 +167,12 @@ export default {
     },
     // 对齐item
     changeAlignItem(val) {
-      bus.$emit("changeAlignItem",val);
+      bus.$emit("changeAlignItem", val);
     }
   },
   mounted() {
     bus.$on("FocusItemChanged", itemMsg => {
+      console.log("itemMsg", itemMsg);
       this.FocusItemChanged(itemMsg);
     });
   }
@@ -212,25 +218,25 @@ li {
           width: 16px;
           height: 16px;
         }
-        .percentage{
-          border-bottom: 1px solid #C3C7CB;
+        .percentage {
+          border-bottom: 1px solid #c3c7cb;
           margin: 0 13px;
           font-size: 14px;
         }
-        .dropdown-flex{
+        .dropdown-flex {
           display: flex;
           align-items: center;
-          .down-icon{
+          .down-icon {
             margin-left: 12px;
           }
         }
       }
-      li:hover{
-        background: #F5F6F7;
+      li:hover {
+        background: #f5f6f7;
       }
-      .zoom-window{
-        border-left:1px solid #8D9399;
-        border-right:1px solid #8D9399;
+      .zoom-window {
+        border-left: 1px solid #8d9399;
+        border-right: 1px solid #8d9399;
       }
     }
   }
@@ -250,8 +256,8 @@ li {
     }
   }
 }
-  /deep/ .ant-dropdown-menu-item{
-    display: flex;
-    align-items: center;
-  }
+/deep/ .ant-dropdown-menu-item {
+  display: flex;
+  align-items: center;
+}
 </style>

+ 24 - 20
src/components/mapClass/EditScence.ts

@@ -65,26 +65,28 @@ export class EditScence extends SGraphScene {
     };
     set setlegend(obj: any) {
         this._legend = obj;
+        console.log('aaaaaa', obj)
     }
     /**
      * 监听变化
      * @param obj 变化后的对象
      */
     listChange(obj: any) {
-        console.log('obj', obj)
-        let itemType: string = 'equipment'
+        let itemType: string = 'equipment';
+
         if (obj.itemList[0] instanceof STextMarkerItem) {
-            itemType = 'text'
+            itemType = 'baseText'
+            console.log('obj.itemList[0]', itemType, obj.itemList[0])
         } else if (obj.itemList[0] instanceof SImageMarkerItem) {
-            itemType = 'images'
+            itemType = 'baseImage'
         } else if (obj.itemList[0] instanceof SLineMarkerItem) {
-            itemType = 'line'
-        } else if (obj.itemList[0] instanceof SPolylineItem) {
-            itemType = 'pipeline'
+            itemType = 'baseLine'
         } else if (obj.itemList[0] instanceof SZoneLegendItem) {
-            itemType = 'position'
-        } else if (obj.itemList[0] instanceof SImgTextItem) {
-            itemType = 'equipment'
+            itemType = 'Zone'
+        } else if (obj.itemList[0] instanceof SImageLegendItem) {
+            itemType = 'Image'
+        } else if (obj.itemList[0] instanceof TipelineItem) {
+            itemType = 'Line'
         } else {
             itemType = ''
         };
@@ -120,7 +122,6 @@ export class EditScence extends SGraphScene {
                 Line: [{ x: event.x, y: event.y }]
             }
         }
-
         const item = new SLineMarkerItem(null, data);
         item.status = SItemStatus.Create;
         item.zOrder = ItemOrder.lineOrder;
@@ -254,6 +255,7 @@ export class EditScence extends SGraphScene {
      * 增加图标
      */
     addIconItem(event: SMouseEvent): void {
+        console.log('this._legend.url', this._legend)
         const LegendData: Legend = {
             ID: uuid(),
             Name: this._legend.Name,
@@ -266,7 +268,7 @@ export class EditScence extends SGraphScene {
             Rolate: { X: 0, Y: 0, Z: 0 },
             Size: { Width: 0, Height: 0 },         // 大小
             Properties: {
-                url: '/serve/topology-wanda/Picture/query/' + this._legend.url;
+                Url: '/serve/topology-wanda/Picture/query/' + this._legend.url
             },
         }
         const item = new SImageLegendItem(null, LegendData);
@@ -436,26 +438,29 @@ export class EditScence extends SGraphScene {
     deleiteItem(): void {
         if (this.focusItem) {
             this.removeItem(this.focusItem);
-            let i = -1
+            let a = -1
             this.Nodes.forEach((item: any, index: number) => {
                 if (item.id == this.focusItem.id) {
-                    i = index
+                    a = index
                 }
             });
-            this.Nodes.splice(i, 1);
+            this.Nodes.splice(a, 1);
+            let b = -1;
             this.Markers.forEach((item: any, index: number) => {
                 if (item.id == this.focusItem.id) {
-                    i = index
+                    b = index
                 }
             });
-            this.Markers.splice(i, 1);
+            this.Markers.splice(b, 1);
+            let c = -1;
             this.Relations.forEach((item: any, index: number) => {
                 if (item.id == this.focusItem.id) {
-                    i = index
+                    c = index
                 }
             });
-            this.Relations.splice(i, 1);
+            this.Relations.splice(c, 1);
             this.focusItem = null;
+           console.log('this.Nodes',this.Nodes)
         }
         if (this.view) {
             this.view.update();
@@ -467,7 +472,6 @@ export class EditScence extends SGraphScene {
      * @param v
      */
     changeAlignItem(v: any): void {
-        console.log(v);
         this.selectContainer.layout(v);
     }
 

+ 0 - 1
src/components/mapClass/SPolygonItem.ts

@@ -101,7 +101,6 @@ export class SPolygonItem extends SGraphItem {
     }
     set lineWidth(v: number) {
         this._lineWidth = v;
-        alert(v)
         this.update();
     };
     /** 鼠标移动点  */

+ 1 - 0
src/views/editer.vue

@@ -60,6 +60,7 @@ export default {
     },
     setCmdType(cmdType) {
       this.cmdType = cmdType;
+      console.log(cmdType,'12313')
     },
     changeFocusItem(item) {
       this.focusItemList = item;