Ver código fonte

edit:fix>调整接口

YaolongHan 4 anos atrás
pai
commit
27e1b686ef

+ 4 - 0
src/api/editer.ts

@@ -38,3 +38,7 @@ export function queryCategory(postParams: any): any {
 export function queryLegend(postParams: any): any {
     return httputils.postJson(`/meiku/legend/query`, postParams)
 }
+// 查询设备信息点
+export function queryEquipMsg(postParams: any): any {
+    return httputils.postJson(`/datacenter/object/equip/query`, postParams)
+}

+ 4 - 2
src/components/editClass/big-edit/SBaseEditScene.ts

@@ -181,7 +181,7 @@ export class SBaseEditScene extends SGraphEditScene {
             /** 名称 */
             name: '基础设备',
             /** 返回物理世界对象 ID 列表 */
-            attachObjectIds: [],
+            attachObjectIds: ['Eq1101050029e0adfc41c06f4a4cbd4b1c2c95c3129e'],
             size: { width: 50, height: 50 },
             /** 图标 (Image),线类型 (Line) */
             type: "Image",
@@ -190,12 +190,14 @@ export class SBaseEditScene extends SGraphEditScene {
             /** 由应用自己定义 */
             properties: {
                 type: "BaseEquipment",
+                infoMsgList:[{
+
+                }]
             },
             style: {
                 default: {
                     strokecolor: "#c0ccda",
                     url: require('./../../../assets/images/equip/' + legendObj.url),
-                    text: 'xxxxxx'
                 }
             }
         }

+ 8 - 8
src/components/editClass/big-edit/items/SBaseEquipment.ts

@@ -110,16 +110,16 @@ export class SBaseEquipment extends SBaseIconTextEdit {
 
 
         this.showAnchor = false;
-        this.textItem.text = this.legendData.style.default.text || '';
-        this.textItem.font.size = this.legendData.style.default.font || 12;
+        // this.textItem.text = this.legendData.style.default.text || '';
+        // this.textItem.font.size = this.legendData.style.default.font || 12;
         this.img.url = this.legendData.style.default.url;
         this.x = this.legendData.pos.x;
         this.y = this.legendData.pos.y;
         // 偏移二分之一文本高度
-        this.textItem.moveTo(
-            this.img.width * 0.5,
-            -(this.font.size * 1.25 * 0.5)
-        );
+        // this.textItem.moveTo(
+        //     this.img.width * 0.5,
+        //     -(this.font.size * 1.25 * 0.5)
+        // );
         this.moveable = true;
         this.selectable = true;
     }// Function initData()
@@ -141,7 +141,7 @@ export class SBaseEquipment extends SBaseIconTextEdit {
      */
     removeInfoMsg(index: number) {
         this._infoPointList.splice(index, 1);
-        this.removeTextItem()
+        // this.removeTextItem()
     }
 
     /**
@@ -189,7 +189,7 @@ export class SBaseEquipment extends SBaseIconTextEdit {
                 }
             }
             // 反馈文本
-            this.legendData.style.default.text = this.textItem.text ? this.textItem.text : '';
+            // this.legendData.style.default.text = this.textItem.text ? this.textItem.text : '';
             // 文本大小
             this.legendData.style.default.font = this.font.size;
             // 位置

Diferenças do arquivo suprimidas por serem muito extensas
+ 28 - 4
src/components/editClass/edit/SGraphEditScene.ts


+ 104 - 52
src/components/editClass/edit/items/SBaseIconTextEdit.ts

@@ -41,7 +41,7 @@ import {
     SFont,
     SPoint
 } from "@persagy-web/draw";
-import { SGraphEdit } from "..";
+import { SGraphEdit, SBaseTextEdit } from "..";
 import { Marker } from "../type/Marker";
 
 /**
@@ -71,15 +71,21 @@ export class SBaseIconTextEdit extends SGraphEdit {
         this._status = v;
         if (v == SItemStatus.Normal) {
             this.moveable = true;
-            this.textItem.moveable = false;
+            this.textItemList.map(item => {
+                item.moveable = false
+            });
             this.img.moveable = false;
         } else if (v == SItemStatus.Edit) {
             this.moveable = false;
-            this.textItem.moveable = true;
+            this.textItemList.map(item => {
+                item.moveable = true
+            });
             this.img.moveable = true;
         } else if (v == SItemStatus.Create) {
             this.moveable = true;
-            this.textItem.moveable = false;
+            this.textItemList.map(item => {
+                item.moveable = false
+            });
             this.img.moveable = false;
         }
 
@@ -100,9 +106,13 @@ export class SBaseIconTextEdit extends SGraphEdit {
 
         this._showText = v;
         if (v) {
-            this.textItem.show();
+            this.textItemList.map(item => {
+                item.show()
+            });
         } else {
-            this.textItem.hide();
+            this.textItemList.map(item => {
+                item.hide()
+            });
         }
     } // Set showText
 
@@ -137,11 +147,15 @@ export class SBaseIconTextEdit extends SGraphEdit {
         this._isActive = v;
         if (v) {
             this.cursor = "pointer";
-            this.textItem.cursor = "pointer";
+            this.textItemList.map(item => {
+                item.cursor = "pointer"
+            });
             this.img.cursor = "pointer";
         } else {
             this.cursor = "auto";
-            this.textItem.cursor = "auto";
+            this.textItemList.map(item => {
+                item.cursor = "auto"
+            });
             this.img.cursor = "auto";
         }
 
@@ -218,36 +232,41 @@ export class SBaseIconTextEdit extends SGraphEdit {
         });
     } // Set showAnchor
 
-    /** 文本内容 */
-    get text(): string {
-        return this.textItem.text;
-    } // Get text
-    set text(v: string) {
-        this.textItem.text = v;
-        this.update();
-    } // Set text
-
     /** 文本颜色 */
     get color(): SColor {
-        return this.textItem.color;
+        if (this.textItemList.length) {
+            return this.textItemList[0].color;
+        } else {
+            return new SColor();
+        }
     } // Get color
     set color(v: SColor) {
-        this.textItem.color = v;
+        this.textItemList.forEach(item => {
+            item.color = v;
+        })
         this.update();
     } // Set color
 
     /** 文本字体 */
     get font(): SFont {
-        return this.textItem.font;
+        if (this.textItemList.length) {
+            return this.textItemList[0].font
+        } else {
+            return new SFont
+        }
     } // Get font
+
     set font(v: SFont) {
-        this.textItem.font = v;
+        this.textItemList.forEach(item => {
+            item.font = v
+        })
         this.update();
     } // Set font
     /** 图像 */
     img: SImageItem = new SImageItem(this);
-    /** 文本 */
-    textItem: STextItem = new STextItem(this);
+
+    /** 文本数组 */
+    textItemList: SBaseTextEdit[] = [];
 
     /**
      * 构造体
@@ -283,23 +302,61 @@ export class SBaseIconTextEdit extends SGraphEdit {
         });
 
         this.showAnchor = false;
-        this.textItem.text = this.data.style.default.text || '';
-        this.textItem.font.size = this.data.style.default.font || 12;
+        // 对文本数据进行处理
+        if (this.data.style && this.data.style.default && this.data.style.default.textList) {
+            const textList = this.data.style.default.textList;
+            if (textList.length) {
+                const textItemList: any[] = [];
+                textList.forEach((item: any, index: number) => {
+                    let obj = new SBaseTextEdit(this, null);
+                    obj.propertyData = item;
+                    obj.text = item.text;
+                    if (item.pos) {
+                        obj.moveTo(item.pos.x, item.pos.x)
+                    } else {
+                        obj.moveTo(
+                            this.img.width * 0.5,
+                            -(this.font.size * 1.25 * 0.5) + (index) * 10
+                        );
+                    }
+                    obj.font.size = item.font;
+                    obj.strokeColor = new SColor(item.color);
+                    textItemList.push(obj)
+                })
+                this.textItemList = textItemList
+            }
+        }
         this.img.url = this.data.style.default.url;
-        // this.img.width = 100;
-        // this.img.height = 100;
+
         this.x = this.data.pos.x;
         this.y = this.data.pos.y
-        // 偏移二分之一文本高度
-        this.textItem.moveTo(
-            this.img.width * 0.5,
-            -(this.font.size * 1.25 * 0.5)
-        );
+
         this.moveable = true;
         this.selectable = true;
     }// Function initData()
 
     /**
+     * 添加文本
+     *
+     * @param item 文本图例
+     */
+    addTextItem(item: SBaseTextEdit) {
+        this.textItemList.push(item)
+    }// Function addTextItem
+
+    /**
+     * 删除文本
+     *
+     * @param index 索引
+     */
+    removeTextItem(index: number) {
+        let [delteItem] = this.textItemList.splice(index, 1);
+        if (this.scene) {
+            this.scene.removeItem(delteItem)
+        }
+    }// Function removeTextItem
+
+    /**
      * 计算并移动锚点的位置
      */
     private changeAnchorPoint(): void {
@@ -373,13 +430,14 @@ export class SBaseIconTextEdit extends SGraphEdit {
             .boundingRect()
             .adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
         if (this.showText) {
-            rect = rect.unioned(
-                this.textItem
-                    .boundingRect()
-                    .adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0)
-            );
+            this.textItemList.forEach(item => {
+                rect = rect.unioned(
+                    item
+                        .boundingRect()
+                        .adjusted(item.pos.x, item.pos.y, 0, 0)
+                );
+            })
         }
-
         return rect.adjusted(-5, -5, 10, 10);
     } // Function boundingRect()
 
@@ -441,7 +499,7 @@ export class SBaseIconTextEdit extends SGraphEdit {
                 this.data.size.width = this.sWidth;
                 this.data.size.height = this.sHeight;
             }
-            this.data.style.default.text = this.textItem.text;
+            this.data.style.default.text = this.textItemList.text;
             this.data.pos.x = this.pos.x;
             this.data.pos.y = this.pos.y;
             this.data.style.default.zorder = this.zOrder;
@@ -460,18 +518,12 @@ export class SBaseIconTextEdit extends SGraphEdit {
             return item;
         });
 
-        this.textItem.font.size = this.data.style.default.font || 12;
-        this.img.url = this.data.style.default.url;
-        // this.img.width = 100;
-        // this.img.height = 100;
-        this.x = this.data.pos.x;
-        this.y = this.data.pos.y
-        // 偏移二分之一文本高度
-        this.textItem.moveTo(
-            this.img.width * 0.5,
-            -(this.font.size * 1.25 * 0.5)
-        );
-        this.moveable = true;
-        this.selectable = true;
+        // this.textItemList.font.size = this.data.style.default.font || 12;
+        // this.img.url = this.data.style.default.url;
+        if (this.data) {
+            this.x = this.data.pos.x;
+            this.y = this.data.pos.y
+
+        }
     } // Function toData()
 } // Class SBaseIconTextEdit

+ 16 - 3
src/components/editClass/edit/items/SBaseTextEdit.ts

@@ -39,7 +39,9 @@ export class SBaseTextEdit extends SGraphEdit {
     /////////////////////////////////////////////////////////////////////////////////////////////////////////////
     //属性
     /**编辑相关操作的数据 */
-    data: Marker;
+    data: Marker | null = null;
+    /** 存储相关的信息数据 */
+    propertyData: any
     /** 起始锚点 */
     startItem: SGraphItem | null = null;
     /** 结束锚点 */
@@ -196,8 +198,19 @@ export class SBaseTextEdit extends SGraphEdit {
      * @param parent    指向父 Item
      * @param data      文本数据
      */
-    constructor(parent: SGraphItem | null, data: Marker) {
+    constructor(parent: SGraphItem | null, data: Marker | null) {
         super(parent);
+        if (data) {
+            this.initData(data)
+        }
+    } // Constructor
+
+    /**
+     * 初始化 当data传入时设置相关状态
+     *
+     * @param data      Mark 数据
+     */
+    initData(data: Marker) {
         this.showSelect = false;
         this.zOrder = ItemOrder.textOrder;
         this.isTransform = false;
@@ -230,7 +243,7 @@ export class SBaseTextEdit extends SGraphEdit {
                 this.backgroundColor = new SColor(data.style.default.backgroundColor);
             }
         }
-    } // Constructor
+    }
 
     /**
      * 宽高发发生变化

+ 3 - 4
src/components/editClass/persagy-edit/PTopoScene.ts

@@ -94,8 +94,8 @@ export class PTopoScene extends SBaseEditScene {
             this.clearCmdStatus();
         }
         else if (this.editCmd == "EditBasePipe") {
-            this.addBasePipe(event);
-            // this.addBaseIconTextItem(event)
+            // this.addBasePipe(event);
+            this.addBaseIconTextItem(event)
             this.clearCmdStatus();
         } else if (this.editCmd == "EditEuqipment" || this.legendObj) {
             this.addEuqipment(event, this.legendObj)
@@ -167,6 +167,7 @@ export class PTopoScene extends SBaseEditScene {
         this.selectContainer.clear();
         this.selectContainer.toggleItem(item);
     } // Function finishCreated()
+
     /**
      * 修改 cmdstatus 函数;常在在业务中调用
      *
@@ -236,13 +237,11 @@ export class PTopoScene extends SBaseEditScene {
                     markers.push(item.toData())
                 }
                 if (item.legendData && NodeType.includes(item.legendData.properties.type)) {
-                    console.log('nodes',item.toData())
                     nodes.push(item.toData())
                 }
                 if (item.relationData && RelationType.includes(item.data.properties.type)) {
                     relations.push(item.toData())
                 }
-                console.log('nodes',item)
             }
         });
         return {

+ 2 - 1
src/components/editview/baseTopoEditer.vue

@@ -203,6 +203,7 @@ export default {
     },
     // 读图成功回调
     getDataSuc(res) {
+      if(res.result == "failure") return;
       this.SETCATEGROY(res.content.categoryId);
       this.topoContent = res.content;
       const parse = new PTopoParser();
@@ -330,7 +331,7 @@ export default {
     addEquipmentList(list) {
       const parse = new PTopoParser();
       list.forEach((item, i) => {
-        x = (i + 1) * 100;
+       const x = (i + 1) * 100;
         let data = {
           /** 名称 */
           name: "基础设备",

+ 1 - 0
src/components/editview/leftToolBar/addItemModel.vue

@@ -307,6 +307,7 @@ export default {
       this.equipData.forEach((item) => {
         categoryList.push(item.id);
       });
+      // 获取设备得图片
       const categoryListString = JSON.stringify(categoryList);
       let data = {
         cascade: [

+ 17 - 2
src/components/editview/leftToolBar/legendList.vue

@@ -15,9 +15,8 @@
     <addItemModel
       @closeModel="showAddItemModel = false"
       :showAddItemModel="showAddItemModel"
-      :filtIdList="[]"
+      :filtIdList="filtIdList"
     ></addItemModel>
-    <!-- :showAddItemModel="showAddItemModel" -->
   </div>
 </template>
 <script>
@@ -25,15 +24,31 @@ import pipeList from "./pipeList.vue";
 import equipmentList from "./equipmentList.vue";
 import addItemModel from "./addItemModel.vue";
 import addBaseItem from "./addBaseItem.vue";
+import { mapMutations, mapState } from "vuex";
 export default {
   components: { pipeList, equipmentList, addItemModel, addBaseItem },
   props: ["chiceStatus"],
   data() {
     return {
       showAddItemModel: false,
+      filtIdList: [], // 需要筛选得 id 数组
       // choiceLegend: "" //选中绘制类型
     };
   },
+  watch: {
+    "$store.state.equipmentList": {
+      handler: function (val) {
+        if (!val.length) return;
+        const idList = [];
+        val.forEach((item) => {
+          idList.push(item.id);
+        });
+        this.filtIdList = idList;
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
 };
 </script>
 <style scoped lang="less">

+ 9 - 3
src/components/editview/rightPropertyBar/BaseEquipment.vue

@@ -111,7 +111,7 @@
 </template>
 <script>
 import { msgData } from "./msgData.js";
-//
+import { queryEquipMsg } from "@/api/editer";
 export default {
   props: ["InfoPointList", "EquipId"],
   data() {
@@ -161,7 +161,13 @@ export default {
   },
   watch: {
     EquipId(val) {
-      console.log("EquipId", val);
+      const data = {
+        Filters: `id = '${val}'`,
+      };
+      queryEquipMsg(data).then((res) => {
+        console.log("获取到相应的信息点数据", res);
+      });
+
       // 模拟接口
       setTimeout(() => {
         let arr = [];
@@ -210,7 +216,7 @@ export default {
           }
         });
         this.msgData = arr;
-        console.log('this.msgData',this.msgData )
+        console.log("this.msgData", this.msgData);
       }, 1000);
     },
   },

+ 2 - 2
src/components/editview/rightPropertyBar/property.vue

@@ -28,7 +28,7 @@
         itemType == 'BaseRect' ||
         itemType == 'BaseTriangle' ||
         itemType == 'BaseCircle' ||
-        itemType == 'BasePolygon' || 
+        itemType == 'BasePolygon' ||
         itemType == 'BaseArrowPolygon'
       "
     ></BaseGraphy>
@@ -171,7 +171,7 @@ export default {
         } else {
           this.infoPointList = [];
         }
-        this.equipId = item.legendData.id;
+        this.equipId = item.legendData.attachObjectIds[0];
       }
     },
   },

+ 5 - 0
vue.config.js

@@ -16,6 +16,11 @@ module.exports = {
                 changeOrigin: true,
                 secure: false,
             },
+            '/datacenter': {
+                target: 'http://39.102.40.239:8080',
+                changeOrigin: true,
+                secure: false,
+            },
             // 图片服务器
             '/image-service': {
                 target: 'http://adm.sagacloud.cn',