Browse Source

'数据流逻辑添加'

zhangyu 4 years ago
parent
commit
15c6a5131e
5 changed files with 175 additions and 187 deletions
  1. 126 84
      src/components/editview/basePlanEditer.vue
  2. 4 91
      src/components/editview/planEditer.vue
  3. 2 1
      src/lib/index.ts
  4. 43 1
      src/store/index.ts
  5. 0 10
      vue.config.js

+ 126 - 84
src/components/editview/basePlanEditer.vue

@@ -13,7 +13,7 @@
 <script>
 import { SFloorParser, getJsonz } from "@persagy-web/big";
 import { SImageItem, SImageShowType } from "@persagy-web/graph";
-import { SPlanView, SPlanParser, SPlanScene } from "@/lib";
+import { SPlanView, SPlanParser, SPlanScene, SPlanEquipment } from "@/lib";
 import { SBaseEquipment } from "@/components/editClass/big-edit";
 import topoTooltip from "./topoTooltip.vue";
 import { mapState, mapMutations } from "vuex";
@@ -25,16 +25,6 @@ import { publishGraph } from "@/api/home";
 export default {
     components: { topoTooltip },
     props: {
-        elements: {
-            type: Object,
-            default: () => {
-                return {
-                    objExtInfo: [],
-                    markers: [],
-                    relations: []
-                }
-            }
-        },
         // 1.底图颜色
         baseMapStyle: {
             type: Object,
@@ -83,7 +73,7 @@ export default {
         };
     },
     computed: {
-        ...mapState(["editCmd", "legendObj", "graphId", "id", "isPub", "categoryId", "projectId", "version"]),
+        ...mapState(["editCmd", "legendObj", "graphId", "id", "isPub", "categoryId", "projectId", "version", "equipItemList"]),
     },
     created() {
         this.clearImg();
@@ -118,7 +108,20 @@ export default {
         }, 120000);
     },
     methods: {
-        ...mapMutations(["SETCHOICELEHEND", "SETLEGENDOBJ", "SETPROJECT", "SETCATEGROY", "SETISPUB", "ADDEQUIPITEM", "EDITEQUIPITEM", "SETVERSION"]),
+        ...mapMutations([
+            "SETCHOICELEHEND",
+            "SETLEGENDOBJ",
+            "SETPROJECT",
+            "SETCATEGROY",
+            "SETISPUB",
+            "ADDEQUIPITEM",
+            "EDITEQUIPITEM",
+            "SETVERSION",
+            "ADDEQUIP",
+            "DELETEQUIP",
+            "INITSTYLE",
+            "INITEQUIPOS",
+        ]),
 
         // 清空画布
         clearImg() {
@@ -137,9 +140,7 @@ export default {
             // 获取压缩包数据并解压
             this.getMapBlob();
             // 读取底图
-            // this.readtopoMsg();
-            // 加载基本元素
-            this.loadBasElements();
+            this.readtopoMsg();
         },
         // 请求获取地图的压缩包
         getMapBlob() {
@@ -154,7 +155,7 @@ export default {
                 });
             }
         },
-         // 获取图片
+        // 获取图片
         getImage(url) {
             const imgItem = new SImageItem(null, url);
             imgItem.showType = SImageShowType.AutoFit;
@@ -173,7 +174,7 @@ export default {
                 //是否显示空间
                 // t.visible = this.isSpaceSelectable;
                 //设置样式
-                Object.assign(t, this.baseMapStyle.default)
+                Object.assign(t, this.baseMapStyle.default);
                 //是否展示名称
                 // t.showBaseName = true;
                 // 是否可选
@@ -346,7 +347,7 @@ export default {
         },
         // 读图成功回调
         getDataSuc(res) {
-            let anchorList = []; //保存锚点对象
+            // let anchorList = []; //保存锚点对象
             if (res.result == "failure") return;
             this.SETCATEGROY(res.content);
             this.topoContent = res.content;
@@ -359,71 +360,118 @@ export default {
                 item.connect("onContextMenu", this, this.scene.getItem);
                 this.scene.addItem(item);
             });
-            parse.nodes.forEach((item) => {
-                item.connect("finishCreated", this.scene, this.scene.finishCreated);
-                item.connect("onContextMenu", this, this.scene.getItem);
-                this.scene.addItem(item);
-                // 如果为设备则存于vuex中便于联动
-                if (item instanceof SBaseEquipment) {
-                    anchorList = anchorList.concat(item.anchorList);
-                    this.ADDEQUIPITEM(item);
-                }
-            });
-            /**
-             * 管线元素最后添加
-             */
-            parse.relations.forEach((t) => {
-                // 设置锚点
-                if (t.anchor1Id) {
-                    let startAnc = null;
-                    anchorList.forEach((aItem) => {
-                        if (aItem.id == t.anchor1Id) {
-                            startAnc = aItem;
-                        }
-                    });
 
-                    if (startAnc) {
-                        startAnc.isConnected = true;
-                        startAnc.parent?.connect("changePos", t, t.changePos);
-                        t.startAnchor = startAnc || null;
-                        console.log("startAnc", startAnc);
-                    }
-                }
-                if (t.anchor12d) {
-                    let endAnc = null;
-                    anchorList.forEach((aItem) => {
-                        if (aItem.id == t.anchor12d) {
-                            endAnc = aItem;
+            // 保存设备位置信息
+            if (res.content.elements && res.content.elements.objExtInfo && res.content.elements.objExtInfo.length) {
+                const equipos = {};
+                res.content.elements.objExtInfo.forEach(item => { equipos[item.id] = item });
+                this.INITEQUIPOS(equipos);
+            }
+
+            // 保存样式信息
+            if (res.content.style) {
+                this.INITSTYLE(res.content.style);
+            }
+
+            // parse.nodes.forEach((item) => {
+            //     item.connect("finishCreated", this.scene, this.scene.finishCreated);
+            //     item.connect("onContextMenu", this, this.scene.getItem);
+            //     this.scene.addItem(item);
+            //     // 如果为设备则存于vuex中便于联动
+            //     if (item instanceof SBaseEquipment) {
+            //         anchorList = anchorList.concat(item.anchorList);
+            //         this.ADDEQUIPITEM(item);
+            //     }
+            // });
+
+            // 管线元素最后添加
+            // parse.relations.forEach((t) => {
+            //     // 设置锚点
+            //     if (t.anchor1Id) {
+            //         let startAnc = null;
+            //         anchorList.forEach((aItem) => {
+            //             if (aItem.id == t.anchor1Id) {
+            //                 startAnc = aItem;
+            //             }
+            //         });
+
+            //         if (startAnc) {
+            //             startAnc.isConnected = true;
+            //             startAnc.parent?.connect("changePos", t, t.changePos);
+            //             t.startAnchor = startAnc || null;
+            //             console.log("startAnc", startAnc);
+            //         }
+            //     }
+            //     if (t.anchor12d) {
+            //         let endAnc = null;
+            //         anchorList.forEach((aItem) => {
+            //             if (aItem.id == t.anchor12d) {
+            //                 endAnc = aItem;
+            //             }
+            //         });
+            //         if (endAnc) {
+            //             endAnc.isConnected = true;
+            //             endAnc.parent?.connect("changePos", t, t.changePos);
+            //             t.endAnchor = endAnc || null;
+            //         }
+            //     }
+            //     t.connect("finishCreated", this.scene, this.scene.finishCreated);
+            //     t.connect("onContextMenu", this, this.scene.getItem);
+            //     this.scene.addItem(t);
+            // });
+
+            if (res.content.ruleList && res.content.ruleList.length) {
+                res.content.ruleList.forEach((rule) => {
+                    if (rule.commond && rule.commond === "query") {
+                        if (rule.returnType && rule.returnType === "equip") {
+                            setTimeout(() => {
+                                console.log("请求设备数据");
+                                // this.mergeEquipData(res.content)
+                            }, parseInt(Math.random() * 10 + 1, 10) * 100);
+                        } else if (rule.returnType && rule.returnType === "zone") {
+                            setTimeout(() => {
+                                console.log("请求空间数据");
+                            }, 1000);
+                        } else if (rule.returnType && rule.returnType === "equipGroup") {
+                            setTimeout(() => {
+                                console.log("请求设备组数据");
+                            }, 1000);
                         }
-                    });
-                    if (endAnc) {
-                        endAnc.isConnected = true;
-                        endAnc.parent?.connect("changePos", t, t.changePos);
-                        t.endAnchor = endAnc || null;
+                    } else if (rule.commond && rule.commond === "delete") {
+                        console.log("删除命令!!!", rule);
                     }
-                }
-                t.connect("finishCreated", this.scene, this.scene.finishCreated);
-                t.connect("onContextMenu", this, this.scene.getItem);
-                this.scene.addItem(t);
-            });
+                });
+            }
         },
-
-        // 加载基本元素
-        loadBasElements() {
-            const parse = new SPlanParser();
-            parse.parseData(this.elements);
-            parse.markers.forEach((item) => {
-                item.selectable = true;
-                item.moveable = true;
-                item.connect("finishCreated", this.scene, this.scene.finishCreated);
-                item.connect("onContextMenu", this, this.scene.getItem);
-                this.scene.addItem(item);
+        // 解析设备数据
+        mergeEquipData(equipList) {
+            equipList.forEach((item) => {
+                if (!this.equipItemList[item.id]) {
+                    /**
+                     * 如果未维护BIM坐标,默认显示在什么位置
+                     * 如果未维护BIM坐标,连线原点在什么位置(可能要在item里面处理)
+                     */
+                    if (this.equipos[item.id]) {// 判断设备是否维护位置信息
+                        item.pos = this.equipos[item.id];
+                    } else if (item.bimLocation) {// 判断设备是否维护BIM坐标
+                        item.pos = item.bimLocation;
+                    } else {// 否则显示默认坐标位置
+                        item.pos = {x:0,y:0}
+                    }
+                    const equipItem = new SPlanEquipment(item)
+                    if (this.style[item.id]) {
+                        Object.assign(equipItem, this.style[item.id]);
+                    } else if (this.style[item.classCode]) {
+                        Object.assign(equipItem, this.style[item.calssCode]);
+                    } else {
+                        Object.assign(equipItem, this.style["equipDefault"]);
+                    }
+                    this.scene.addItem(equipItem);
+                    this.equipItemList[item.id] = equipItem;
+                }
             });
         },
 
-
-
-
         // 生成快照并保存草稿
         saveTopoDraft() {
             const uuid = uuidv1();
@@ -584,7 +632,7 @@ export default {
     },
     watch: {
         editCmd(val) {
-            console.trace(val)
+            console.trace(val);
             if (this.scene) {
                 // 设置当前编辑状态
                 this.scene.editCmd = val;
@@ -596,12 +644,6 @@ export default {
             },
             deep: true,
         },
-        elements:{
-            handler(){
-                this.loadBasElements()
-            },
-            deep: true
-        }
     },
     beforeDestroy() {
         clearInterval(this.autoSave);

+ 4 - 91
src/components/editview/planEditer.vue

@@ -5,11 +5,11 @@
         </div>
         <div class="contents">
             <div class="left-bar">
-                <leftToolBar :equipData="equipData" :zoneData="zoneData"></leftToolBar>
+                <leftToolBar></leftToolBar>
             </div>
             <div class="base-topo-editer">
                 <!-- <baseTopoEditer></baseTopoEditer> -->
-                <basePlanEditer :elements="elements"></basePlanEditer>
+                <basePlanEditer></basePlanEditer>
             </div>
             <div class="right-bar">
                 <rightPropertyBar></rightPropertyBar>
@@ -18,106 +18,19 @@
     </div>
 </template>
 <script>
-import { mapState, mapMutations } from "vuex";
 import leftToolBar from "./leftToolBar";
 import rightPropertyBar from "./rightPropertyBar";
 // import baseTopoEditer from "./baseTopoEditer";
 import basePlanEditer from "./basePlanEditer";
 import topToolBar from "./topToolBar";
-import { readGroup, readPubGroup } from "@/api/editer";
-import { SPlanParser } from "@/lib";
 export default {
     // components: {baseTopoEditer },
     components: { leftToolBar, rightPropertyBar, topToolBar, basePlanEditer },
     data() {
-        return {
-            elements: {}, // 平面图数据
-            ruleList: [], // 规则列表
-            style: {
-                dykgg: {
-                    name: "",
-                    strokeColor: "",
-                    fillColor: "",
-                    lineWidth: "",
-                    effect: {},
-                },
-                Eq1254: {
-                    strokeColor: "",
-                    fillColor: "",
-                    lineWidth: "",
-                    effect: {},
-                },
-            }, // 样式
-            equipData: {}, //设备列表
-            zoneData: {}, // 空间列表
-        };
-    },
-    computed: {
-        ...mapState(["editCmd", "legendObj", "graphId", "id", "isPub", "categoryId", "projectId", "version"]),
-    },
-    created() {
-        this.SETPROJECT(this.$route.query);
-        this.SETISPUB(this.$route.query.isPub);
-        this.categoryName = decodeURI(this.$route.query.categoryName);
-        this.readtopoMsg();
+        return {};
     },
     methods: {
-        ...mapMutations(["SETCHOICELEHEND", "SETLEGENDOBJ", "SETPROJECT", "SETCATEGROY", "SETISPUB", "ADDEQUIPITEM", "EDITEQUIPITEM", "SETVERSION"]),
-        // 读取平面图
-        readtopoMsg() {
-            const obj = {
-                graphId: this.graphId,
-                id: this.id,
-            };
-            if (this.isPub == 1) {
-                // 已发布
-                readPubGroup(obj).then((res) => {
-                    this.getDataSuc(res);
-                });
-            } else {
-                readGroup(obj).then((res) => {
-                    this.getDataSuc(res);
-                });
-            }
-        },
-        // 读图成功回调
-        getDataSuc(res) {
-            if (res.result == "failure") return;
-            this.SETCATEGROY(res.content);
-            this.elements = res.content.elements;
-            if (res.content.ruleList && res.content.ruleList.length) {
-                this.ruleList = res.content.ruleList;
-                this.ruleList.forEach((rule) => {
-                    if (rule.commond && rule.commond === "query") {
-                        if (rule.returnType && rule.returnType === "equip") {
-                            setTimeout(() =>{
-                                console.log("请求设备数据")
-                            }, parseInt(Math.random()*10+1,10) * 100)
-                        } else if (rule.returnType && rule.returnType === "zone") {
-                            setTimeout(() => {
-                                console.log("请求空间数据");
-                            }, 1000);
-                        } else if (rule.returnType && rule.returnType === "equipGroup") {
-                            setTimeout(() => {
-                                console.log("请求设备组数据");
-                            }, 1000);
-                        }
-                    } else if (rule.commond && rule.commond === "delete") {
-                        console.log("删除命令!!!", rule);
-                    }
-                });
-            }
-        },
-        // 解析设备数据
-        mergeData(list) {
-            const addEquip = [];
-            list.forEach((item) => {
-                if (!this.equipData[item.id]) {
-                    this.equipData[item.id] = item;
-                    addEquip.push(item);
-                }
-            });
-        },
+
     },
 };
 </script>

+ 2 - 1
src/lib/index.ts

@@ -1,4 +1,5 @@
 import { SPlanScene } from "./SPlanScene";
 import { SPlanParser } from "./SPlanParser";
 import { SPlanView } from "./SPlanView";
-export { SPlanParser, SPlanScene, SPlanView };
+import { SPlanEquipment } from "./item/SPlanEquipment";
+export { SPlanParser, SPlanScene, SPlanView, SPlanEquipment };

+ 43 - 1
src/store/index.ts

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { delete } from 'vue/types/umd';
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
@@ -16,7 +17,13 @@ export default new Vuex.Store({
     tupoName: '',  //拓扑图名称
     version: "", //版本号
     equipmentItemList: [], // 图上相关的设备实例
-    equipmentItemNum: 0 //图上相关的设备实例的数量
+    equipmentItemNum: 0, // 图上相关的设备实例的数量
+    equipItemList: {},// 图上相关的设备实例
+    equipItemNum: 0,// 图上相关的设备的数量
+    zoneItemList: {},// 图上相关的空间实例
+    zoneItemNum: 0,// 图上相关的空间实例的数量
+    style: {},// 样式库信息
+    equiPos: {},// 设备位置信息
   },
   mutations: {
     // 修改编辑器命令
@@ -67,6 +74,41 @@ export default new Vuex.Store({
       };
       state.equipmentItemList = arr1;
       state.equipmentItemNum = state.equipmentItemList.length
+    },
+    // 初始化设备位置信息
+    INITEQUIPOS(state, data) {
+        state.equiPos = data;
+    },
+    // 初始化样式库信息
+    INITSTYLE(state, data) {
+        state.style = data;
+    },
+    // 添加样式信息
+    ADDSTYLE(state, data) {
+        // const {id, style} = {...data}
+        // state.style[data.id] = style
+    },
+    // 增加设备实例item
+    ADDEQUIP(state, item): void {
+        // @ts-ignore
+        if (!state.equipItemList[item.id]) {
+            // @ts-ignore
+            state.equipItemList[item.id] = item;
+            state.equipItemNum = Object.keys(state.equipItemList).length;
+        }
+    },
+    DELETEQUIP(state): void {
+        // 如果设备实例数组中parent 为null 则删除该数组
+        let arr1 = Object.keys(state.equipItemList);
+        if (!arr1.length) return;
+        
+        arr1.forEach(key => {
+            // @ts-ignore
+            if (!state.equipItemList[key].parent) {
+                // @ts-ignore
+                delete state.equipItemList[key]
+            }
+        })
     }
   },
   actions: {

+ 0 - 10
vue.config.js

@@ -19,21 +19,11 @@ module.exports = {
                 changeOrigin: true,
                 secure: false,
             },
-            "/datacenter": {
-                target: "http://60.205.177.43:28888",
-                changeOrigin: true,
-                secure: false,
-            },
             "/datacenter4": {
                 target: "http://60.205.177.43:8080",
                 changeOrigin: true,
                 secure: false,
             },
-            "/equip-componnet": {
-                target: "http://60.205.177.43:28888",
-                changeOrigin: true,
-                secure: false,
-            },
             "/equip-component4": {
                 target: "http://60.205.177.43:8080",
                 changeOrigin: true,