Explorar o código

feat: 添加删除信息点功能

yx %!s(int64=4) %!d(string=hai) anos
pai
achega
330df7ab68

+ 5 - 2
src/components/baseEditer.vue

@@ -518,7 +518,6 @@ export default {
                     // this.scene.equipmentItem.push(item);
                     this.scene.Nodes.push(item)
                 })
-                window.vm = this
                 // this.scene.addEquipment(event);
             })
             // 添加本地json文件
@@ -528,7 +527,6 @@ export default {
             })
             // TODO: 修改底图
             bus.$on('changeImgUrl', (val) => {
-                window.vm = this
                 let url = '/serve/topology-wanda/Picture/query/' + val
                 console.log(url)
                 this.scene.setBackgroundImgItem(url)
@@ -685,6 +683,11 @@ export default {
                 console.log('baseEditer addEquipmentInfo')
                 this.scene.addEquipmentInfo()
             })
+            // 删除信息点
+            bus.$on('deleteEquipmentInfo', () => {
+                this.scene.deleteEquipmentInfo()
+            })
+            
             // 改变图例名称
             bus.$on('changeImageNum', (val) => {
                 this.scene.upadatImageNum(val)

+ 17 - 8
src/components/edit/equipmentAttr.vue

@@ -15,21 +15,22 @@
         <div class='contain' v-for='(item,index) in info' :key='index'>
             <div class='row'>
                 <div>信息点名称:</div>
-                <a-input v-model='info[index]' class='input' @change='changeInfoName(index)' />
+                <a-input v-model='info[index].Name' class='input' @change='changeInfoName(index)' />
             </div>
             <div class='row'>
                 <div class='row-tit'>字号</div>
                 <div class='grid-content'>
-                    <a-input-number :min='1' style='width: 128px' />
+                    <a-input-number v-model='info[index].FontSize' @change='changeInfoName(index)' :min='1' :max='100' style='width: 128px' />
                 </div>
                 <div class='color-choice'>
-                    <swatches popover-x='left' />
+                    <swatches v-model='info[index].Color' popover-x='left' @close='changeInfoName(index)' />
                 </div>
             </div>
         </div>
         <!-- 添加信息点 信息 -->
         <div class='row'>
-            <a-button @click='addInfo'>添加信息点</a-button>
+            <a-button @click='addInfo' type='primary'>添加信息点</a-button>
+            <a-button @click='delInfo' v-show='info.length' type='danger'>删除信息点</a-button>
         </div>
     </div>
 </template>
@@ -69,8 +70,13 @@ export default {
             console.log(this.focusItemList)
             this.init()
         },
+        delInfo() {
+            bus.$emit('deleteEquipmentInfo')
+            this.init()
+        },
         init() {
             // 设置设备名称
+            window.vuem = this
             // window._focusItem = this.focusItemList.itemList[0]
             this.equipmentData = this.focusItemList.itemList[0].toData()
             this.equipmentName = this.equipmentData.Name
@@ -78,7 +84,9 @@ export default {
             this.InfoList = JSON.parse(JSON.stringify(this.equipmentData.InfoList))
             this.info = []
             this.InfoList.map((item) => {
-                this.info.push(item.Name)
+                let { Name, FontSize, Color } = item
+                // this.info.push(item.Name)
+                this.info.push({ Name, FontSize, Color })
             })
             // console.log(this.equipmentData)
         },
@@ -87,9 +95,10 @@ export default {
         },
         // 更改信息点名称
         changeInfoName(index) {
-            let name = this.info[index]
-            console.log(index, name)
-            bus.$emit('changeInfoName', { index, name })
+            let info = this.info[index]
+            let { Name, FontSize, Color } = info
+            console.log(index, info.Name)
+            bus.$emit('changeInfoName', { index, Name, FontSize, Color })
         },
     },
 }

+ 13 - 3
src/components/mapClass/EditScence.ts

@@ -152,7 +152,7 @@ export class EditScence extends SGraphScene {
         } else if (obj.itemList[0] instanceof SEquipmentItem) {
             itemType = "Equipment";
         }
-         else {
+        else {
             itemType = ''
         };
         if (obj.itemList.length == 1) {
@@ -714,9 +714,19 @@ export class EditScence extends SGraphScene {
             this.focusItem.info = val
         }
     }
+    /**
+     * 添加信息点
+     */
     addEquipmentInfo(): void {
         // @ts-ignore
-        this.focusItem.addEquipmentInfo()
+        this.focusItem && this.focusItem.addEquipmentInfo()
+    }
+    /**
+     * 删除信息点
+     */
+    deleteEquipmentInfo() {
+        // @ts-ignore
+        this.focusItem && this.focusItem.deleteEquipmentInfo()
     }
     /**
      * 更改item Num数量
@@ -1707,7 +1717,7 @@ export class EditScence extends SGraphScene {
                 item instanceof SImageMarkerItem ||
                 item instanceof SZoneLegendItem ||
                 item instanceof SFHFQZoneLegendItem ||
-                item instanceof SSCPZZoneLegendItem || 
+                item instanceof SSCPZZoneLegendItem ||
                 item instanceof SEquipmentItem
             ) {
                 let scenePoint = item.mapFromScene(event.x, event.y);

+ 28 - 27
src/lib/items/SEquipmentItem.ts

@@ -82,16 +82,26 @@ export class SEquipmentItem extends SObjectItem {
         // @ts-ignore
         return this._info
     }
+    /**
+     * @param data 修改信息点信息
+     */
     set info(data) {
         // @ts-ignore
-        let { index, name } = data
+        let { index, Name, FontSize, Color } = data
         // 更新信息点名称
         if (this.epData && index < this.epData.InfoList.length) {
-            this.textArr[index + 1].text = name
-            this.epData.InfoList[index].Name = name
+            // this.textArr[index + 1].text = Name
+            // this.epData.InfoList[index].Name = Name
         }
+        // item对象属性修改
+        this.textArr[index + 1].text = Name
+        this.textArr[index + 1].font.size = FontSize
+        this.textArr[index + 1].color = Color
+        // 数据修改
+        this.epData.InfoList[index].Name = Name
+        this.epData.InfoList[index].FontSize = FontSize
+        this.epData.InfoList[index].Color = Color
         this.update();
-
     }
 
     /**
@@ -109,27 +119,7 @@ export class SEquipmentItem extends SObjectItem {
         this.textArr = [];
         // 有信息点信息时,绘制信息点信息
         // 加载设备
-        if (epData && epData?.Pos) {
-            this.loadEquipment(epData);
-        } else if (epData) {
-            //绘制设备
-            this.img.url = `/serve/topology-wanda/Picture/query/14d978b7edd346f088d6cfb53ada4070`;
-            this.img.width = 24;
-            this.img.height = 24;
-            //添加设备
-            let index = 0;
-            for (let key in epData) {
-                let textItem = new STextItem(this);
-                textItem.moveable = true;
-                textItem.backgroundColor = SColor.White;
-                textItem.font.size = 14;
-                textItem.moveTo(17, index * 20 - 10);
-                // @ts-ignore
-                textItem.text = `${key} : ${epData[key]}`;
-                this.textArr.push(textItem);
-                index++;
-            }
-        }
+        this.loadEquipment(epData);
     }
     /**
      * 加载设备
@@ -215,6 +205,9 @@ export class SEquipmentItem extends SObjectItem {
         }
         return rect.adjusted(-5, -5, 10, 10);
     } // Function boundingRect()
+    /**
+     * 转换成data
+     */
     toData(): EquipmentData {
         //  更新相关数据
         this.epData.Name = this.name;
@@ -239,7 +232,6 @@ export class SEquipmentItem extends SObjectItem {
      */
     addEquipmentInfo() {
         let { InfoList } = this.epData;
-        console.log('::::::::::::::::', InfoList)
         let textItem = new STextItem(this);
         let Name, X, Y, Width, Height, FontSize, Background, Color, TextAlign
         if (InfoList.length) {
@@ -268,7 +260,7 @@ export class SEquipmentItem extends SObjectItem {
             TextAlign = 'center'
             Name = '请输入'
         }
-
+        // 信息点对象 属性修改
         textItem.backgroundColor = new SColor(Background);
         textItem.width = Width;
         textItem.height = Height;
@@ -292,6 +284,15 @@ export class SEquipmentItem extends SObjectItem {
         })
         this.update()
     }
+    // 删除信息点
+    deleteEquipmentInfo() {
+        this.epData.InfoList.pop()
+        if (this.textArr.length) {
+            this.textArr[this.textArr.length - 1].text = '';
+            this.textArr.pop()
+        }
+        this.update()
+    }
     /**
      * Item绘制操作
      *