debug

src/components/editClass/big-edit/SBaseEditScene.ts

@@ -193,6 +193,7 @@ export class SBaseEditScene extends SGraphEditScene {
                 default: {
                     strokecolor: "#c0ccda",
                     url: require('./../../../assets/images/equip/' + legendObj.url),
+                    text: 'xxxxxx'
                 }
             }
         }
@@ -418,15 +419,15 @@ export class SBaseEditScene extends SGraphEditScene {
                     this.view.update()
                 }
                 console.log(1);
-                
+
                 return true;
             }
             console.log(2);
-            
+
             return this.grabItem.onMouseUp(event);
         }
         console.log(3);
-        
+
         return super.onMouseUp(event)
     } // Function onMouseUp()
 

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

@@ -25,7 +25,6 @@
  */
 
 import { SGraphItem, SAnchorItem } from "@persagy-web/graph/lib";
-import { Marker } from "./../types/Marker";
 import { Legend } from "./../types/Legend";
 import { SBaseIconTextEdit } from './../../edit/';
 

src/components/editClass/persagy-edit/PTopoParser.ts

@@ -99,7 +99,7 @@ export class PTopoParser extends SParser {
                 case "BasePolygon":
                     this.markers.push(this.factory.createBasePolygonEdit(data));
                     break;
-                case "BaseArrowPolygon": 
+                case "BaseArrowPolygon":
                     this.markers.push(this.factory.createBasePolygonArrowEdit(data));
             }
         }
@@ -111,12 +111,17 @@ export class PTopoParser extends SParser {
      * @param data Legend 图例类型数据
      */
     addNode(data: Legend) {
+        let node = null;
         if (data.properties && data.properties.type) {
             switch (data.properties.type) {
                 case "BaseEquipment":
-                    this.nodes.push(this.factory.createBaseEquipment(data));
+                    node = this.factory.createBaseEquipment(data)
                     break;
             }
         }
+        if (node) {
+            this.nodes.push(node);
+        }
+        return node
     }
 }

src/components/editview/baseTopoEditer.vue

@@ -193,6 +193,10 @@ export default {
       bus.$on("setItemStatus", (val) => {
         this.scene.setItemStatus();
       });
+      // 手动添加设备实例
+      bus.$on("addEquipment", (val) => {
+        this.addEquipmentList(val);
+      });
     },
     // 读取拓扑图
     readtopoMsg() {
@@ -229,7 +233,42 @@ export default {
         item.connect("onContextMenu", this, this.scene.getItem);
         this.scene.addItem(item);
       });
-      this.view.fitSceneToView()
+      this.view.fitSceneToView();
+    },
+    // 手动添加设备
+    addEquipmentList(list) {
+      const parse = new PTopoParser();
+      list.forEach((item, i) => {
+        x = (i + 1) * 100;
+        let data = {
+          /** 名称 */
+          name: "基础设备",
+          /** 返回物理世界对象 ID 列表 */
+          attachObjectIds: [item.id],
+          size: { width: 50, height: 50 },
+          /** 图标 (Image)，线类型 (Line) */
+          type: "Image",
+          /** 位置 */
+          pos: { x: x, y: 100 },
+          /** 由应用自己定义 */
+          properties: {
+            type: "BaseEquipment",
+          },
+          style: {
+            default: {
+              strokecolor: "#c0ccda",
+              url: require("./../../assets/images/equip/lengganji.svg"),
+            },
+          },
+        };
+        parse.addNode(data);
+        parse.nodes.forEach((item) => {
+          item.connect("finishCreated", this.scene, this.scene.finishCreated);
+          item.connect("onContextMenu", this, this.scene.getItem);
+          this.scene.addItem(item);
+        });
+        this.view.fitSceneToView();
+      });
     },
   },
   watch: {

src/components/editview/leftToolBar/addItemModel.vue

@@ -163,6 +163,7 @@ import {
   queryEquip,
   queryLegend,
 } from "@/api/editer";
+import bus from "@/bus/bus";
 export default {
   props: ["showAddItemModel", "filtIdList"],
   computed: {
@@ -336,6 +337,7 @@ export default {
           }
           // // 将选中的设备类存到vuex中
           this.SETEQUIPLIST(this.choiceEquipList);
+          bus.$emit("addEquipment", this.choiceEquipList);
           this.$loading.close(this.local2);
           this.modalClose();
         })

src/components/editview/leftToolBar/equipData.js

@@ -1,107 +0,0 @@
-// 该数据为测试数据
-export const EquipmentList = [
-    {
-        name: "设备名称2",
-        id: 123,
-        showChildren: true,
-        number: 3,
-        children: [{
-            name: '设备实例-SBSL100201131',
-            id: 11,
-            url: '123',
-            porfess: '给排水专业',
-            porfessId: 1,
-            equipType: "设备名称2",
-            equipTypeId: 11
-        },
-        {
-            name: '设备实例-SBSL100201132',
-            id: 11,
-            url: '123',
-            porfess: '给排水专业',
-            porfessId: 1,
-            equipType: "设备名称2",
-            equipTypeId: 11
-        },
-        {
-            name: '设备实例-SBSL100201131',
-            id: 11,
-            url: '123',
-            porfess: '给排水专业',
-            porfessId: 1,
-            equipType: "设备名称2",
-            equipTypeId: 12
-        }]
-    },
-    {
-        name: "设备名称3",
-        id: 123,
-        showChildren: true,
-        number: 3,
-        children: [{
-            name: '设备实例-SBSL100201134',
-            id: 11,
-            url: '123',
-            porfess: '给排水专业',
-            porfessId: 1,
-            equipType: "设备名称2",
-            equipTypeId: 12
-        },
-        {
-            name: '设备实例-SBSL100201135',
-            id: 11,
-            url: '123',
-            porfess: '给排水专业',
-            porfessId: 1,
-            equipType: "设备名称2",
-            equipTypeId: 12
-        },
-        {
-            name: '设备实例-SBSL100201136',
-            id: 11,
-            url: '123',
-            porfess: '给排水专业',
-            porfessId: 1,
-            equipType: "设备名称2",
-            equipTypeId: 12
-        }]
-    }
-]
-
-export const equipmentList = [
-    {
-        name: '设备实例-SBSL100201136',
-        id: 11,
-        url: '123',
-        porfess: '给排水专业',
-        porfessId: 1,
-        equipType: "设备名称2",
-        equipTypeId: 12
-    },
-    {
-        name: '设备实例-SBSL100201136',
-        id: 11,
-        url: '123',
-        porfess: '给排水专业',
-        porfessId: 1,
-        equipType: "设备名称2",
-        equipTypeId: 12
-    }, {
-        name: '设备实例-SBSL100201136',
-        id: 11,
-        url: '123',
-        porfess: '给排水专业',
-        porfessId: 1,
-        equipType: "设备名称2",
-        equipTypeId: 12
-    }
-    , {
-        name: '设备实例-SBSL100201136',
-        id: 11,
-        url: '123',
-        porfess: '给排水专业',
-        porfessId: 1,
-        equipType: "设备名称2",
-        equipTypeId: 12
-    }
-]

src/components/editview/leftToolBar/equipmentList.vue

@@ -49,6 +49,9 @@
     </div>
     <!-- 设备 list -->
     <div class="box-porfess" id="boxPorfess">
+      <!-- 测试代码 开始 -->
+      <div @click="getEquipItem('lengganji.svg')">123</div>
+      <!-- 测试代码 结束-->
       <div class="porfess" v-for="(items, index) in equipmentTree" :key="index">
         <div @click="collapse(items)" class="porfess-title">
           <span>{{ items.aliasName }}</span>

src/components/editview/rightPropertyBar/BaseEquipment.vue

@@ -29,14 +29,37 @@
               class="avatar-uploader"
               action="https://jsonplaceholder.typicode.com/posts/"
               :show-file-list="false"
-
             >
               <i class="el-icon-link"></i>
             </el-upload>
           </div>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="信息点" name="second">信息点</el-tab-pane>
+      <el-tab-pane label="信息点" name="second">
+        <div class="msgPoint-box">
+          <Input
+            class="baseItemInput"
+            :width="188"
+            iconType="search"
+            placeholder="搜索元素名称"
+          />
+          <div class="msgPoint-list">
+            <div class="type-list">
+              <div class="title">
+                <i v-bind:class="['el-icon-caret-bottom']"></i>
+                <!-- item.isShow ? 'caret-icon-active' : 'caret-icon', -->
+                <span>即时状态</span>
+              </div>
+              <ul class="list">
+                <li>
+                  <Checkbox :checked="checked1" @change="handleChange" />
+                  <p>xxx信息点</p>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -45,8 +68,9 @@ export default {
   data() {
     return {
       activeName: "first",
-      width:'',
-      height:''
+      width: "",
+      height: "",
+      checked1: "checked",
     };
   },
   methods: {
@@ -55,7 +79,11 @@ export default {
     },
     changeWidth() {},
     changeHeight() {},
-    eforeAvatarUpload(){},
+    eforeAvatarUpload() {},
+    handleChange(v, obj) {
+      console.log(obj);
+      this.checked1 = v;
+    },
   },
   mounted() {},
 };
@@ -83,5 +111,14 @@ li {
       justify-content: space-around;
     }
   }
+  .msgPoint-box{
+    width: 100%;
+    height: 100%;
+    padding: 0 12px 0 12px;
+    box-sizing: border-box;
+    .msgPoint-list{
+      margin-top: 20px;
+    }
+  }
 }
 </style>

src/main.ts

@@ -6,7 +6,7 @@ import './assets/font/iconfont.css';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);
-import { Input, Modal, Cascader, Popover, Icon, Pagination, Loading } from 'meri-design';
+import { Input, Modal, Cascader, Popover, Icon, Pagination, Loading,Checkbox } from 'meri-design';
 import { Select } from 'ant-design-vue';
 // 按需引入公共组件
 Vue.use(Input)
@@ -16,6 +16,7 @@ Vue.use(Cascader)
 Vue.use(Popover)
 Vue.use(Icon)
 Vue.use(Pagination)
+Vue.use(Checkbox)
 Vue.prototype.$loading = Loading;
 
 Vue.config.productionTip = false;