YaolongHan 4 лет назад
Родитель
Сommit
a848dab6f7
2 измененных файлов с 257 добавлено и 257 удалено
  1. 5 10
      src/App.vue
  2. 252 247
      src/components/floorMap/index.vue

+ 5 - 10
src/App.vue

@@ -7,7 +7,7 @@
 <script>
 import { mapGetters, mapActions, mapMutations } from "vuex";
 import { SFengParser } from "@saga-web/feng-map";
-window.fengmap = null;
+window.fengmapData = null;
 export default {
   data() {
     return {
@@ -52,17 +52,17 @@ export default {
       this.getMap();
     },
     getMap() {
-      if (!window.fengmap) {
-        window.fengmap = new SFengParser(
+      if (!window.fengmapData) {
+        window.fengmapData = new SFengParser(
           `fengMap${this.id}`,
           `${this.mapServerURL}/fmap/${this.fmapID}`,
           this.key,
           this.appName,
           null
         );
-        window.fengmap.loadMap(this.fmapID, () => {
+        window.fengmapData.loadMap(this.fmapID, () => {
           // 获取主题数据
-          window.fengmap
+          window.fengmapData
             .loadTheme(
               `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
             )
@@ -74,11 +74,6 @@ export default {
       }
     }
   },
-  watch: {
-    haveFengMap(val) {
-      alert(val);
-    }
-  }
 };
 </script>
 <style lang="less">

+ 252 - 247
src/components/floorMap/index.vue

@@ -1,270 +1,275 @@
 
 <!-- 底图 -->
 <template>
-    <div id='floor_base' v-loading='loading' ref='graphy'>
-        <div :id='`fengMap${id}`' class='fengMap'></div>
-        <canvas :id='`canvas${id}`' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
-        <!-- 地图底部操作按钮 -->
-        <div class='strip-bottom'>
-            <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' ref='canvasFun'></canvasFun>
-        </div>
-        <room-box ref='boxRoom'></room-box>
+  <div id="floor_base" v-loading="loading" ref="graphy">
+    <canvas :id="`canvas${id}`" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
+    <!-- 地图底部操作按钮 -->
+    <div class="strip-bottom">
+      <canvasFun
+        @fit="fit"
+        @savePng="savePng"
+        @saveSvg="saveSvg"
+        @saveJson="saveJson"
+        @scale="scale"
+        ref="canvasFun"
+      ></canvasFun>
     </div>
+    <room-box ref="boxRoom"></room-box>
+  </div>
 </template>
 <script>
-import { SFengParser } from '@saga-web/feng-map'
-import { SFloorParser } from '@saga-web/big'
-import { FloorView } from '@/lib/FloorView'
-import { FloorScene } from '@/lib/FloorScene'
-import RoomBox from '@/views/room/index'
-import canvasFun from '@/components/floorMap/canvasFun'
-import { readGroup } from '@/api/public'
-import { STopologyParser } from '@/lib/parsers/STopologyParser'
-import { mapGetters, mapActions } from 'vuex'
-import { SImageItem } from '@saga-web/graph/lib'
+import { SFengParser } from "@saga-web/feng-map";
+import { SFloorParser } from "@saga-web/big";
+import { FloorView } from "@/lib/FloorView";
+import { FloorScene } from "@/lib/FloorScene";
+import RoomBox from "@/views/room/index";
+import canvasFun from "@/components/floorMap/canvasFun";
+import { readGroup } from "@/api/public";
+import { STopologyParser } from "@/lib/parsers/STopologyParser";
+import { mapGetters, mapActions } from "vuex";
+import { SImageItem } from "@saga-web/graph/lib";
 // import { uuid } from "@/components/mapClass/until";
-let fengmap = null
 
 export default {
-    data() {
-        return {
-            appName: '万达可视化系统',
-            key: '23f30a832a862c58637a4aadbf50a566',
-            mapServerURL: `/wdfn`,
-            canvasWidth: 1100,
-            canvasHeight: 800,
-            loading: false, // 限制重复查询
-            view: null,
-            urlMsg: {},
-            canvasID: 'canvas'
-            // fmapID:'1001012_42',
-        }
-    },
-    props: {
-        id: {
-            default: '1',
-            type: String
-        },
-        loadName: null,
-        type: null
+  data() {
+    return {
+      appName: "万达可视化系统",
+      key: "23f30a832a862c58637a4aadbf50a566",
+      mapServerURL: `/wdfn`,
+      canvasWidth: 1100,
+      canvasHeight: 800,
+      loading: false, // 限制重复查询
+      view: null,
+      urlMsg: {},
+      canvasID: "canvas",
+      floorid: "" //楼层id
+    };
+  },
+  props: {
+    id: {
+      default: "1",
+      type: String
     },
-    components: { RoomBox, canvasFun },
-    computed: {
-        ...mapGetters(['plazaId', 'fmapID'])
-    },
-    methods: {
-        ...mapActions(['getfmapID']),
-        init(floorid) {
-            if (this.loading) {
-                //console.log('正在查询...')
-                return
-            }
-            this.loading = true
-            if (!this.fmapID) {
-                this.getfmapID().then(() => {
-                    this.urlMsg.fmapID = this.fmapID
-                    this.getMap(floorid)
-                })
-                return
-            }
-            this.getMap(floorid)
-        },
-        getMap(floorid) {
-            this.clearGraphy()
-            this.scene = new FloorScene()
-            this.scene.selectContainer.connect('listChange', this, this.listChange)
-            if (!fengmap || this.canvasID != `canvas${this.id}`) {
-                this.canvasID = `canvas${this.id}`
-                fengmap = new SFengParser(`fengMap${this.id}`, `${this.mapServerURL}/fmap/${this.fmapID}`, this.key, this.appName, null)
-                fengmap.loadMap(this.fmapID, () => {
-                    this.parserData(floorid)
-                    this.readGroup(floorid).then(data => {
-                        if (data.Data.length > 0) {
-                            //console.log(data.data.Data[0].ID)
-                            this.$cookie.set('graphId', data.Data[0].ID, 3)
-                        }
-                        const parserData = new STopologyParser(null)
-                        parserData.parseData(data.Data[0].Elements)
-                        // 多边形
-                        parserData.zoneLegendList.forEach(t => {
-                            this.scene.addItem(t)
-                        })
-                        // 增加文字
-                        parserData.textMarkerList.forEach(t => {
-                            this.scene.addItem(t)
-                        })
-                        // 增加图片
-                        parserData.imageMarkerList.forEach(t => {
-                            this.scene.addItem(t)
-                        })
-                        // 增加直线
-                        parserData.lineMarkerList.forEach(t => {
-                            this.scene.addItem(t)
-                        })
-                        // 增加图标类图例
-                        parserData.imageLegendList.forEach(t => {
-                            this.scene.addItem(t)
-                        })
-                        // 增加管线类
-                        // 增加图标类图例
-                        parserData.relationList.forEach(t => {
-                            this.scene.addItem(t)
-                        })
-                        this.view.fitSceneToView()
-                    })
-                })
-                // 获取主题数据
-                fengmap.loadTheme(`${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`).then(res => {
-                    //console.log('获取rf成功', res)
-                })
-            } else {
-                this.parserData(floorid)
-            }
-        },
-        parserData(floor) {
-            if (floor == 'g80') {
-                // 屋顶
-                if (fengmap.frImg) {
-                    let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`)
-                    this.scene.addItem(imgItem)
-                    this.view.scene = this.scene
-                    this.view.fitSceneToView()
-                    this.view.minScale = this.view.scale
-                    if (this.$refs.canvasFun) {
-                        this.$refs.canvasFun.everyScale = this.view.scale
-                    }
-                    this.loading = false
-                }
-            } else {
-                if (fengmap.gnameToGid[floor]) {
-                    fengmap.parseData(fengmap.gnameToGid[floor], res => {
-                        if (res.err) {
-                            //console.log(res.err)
-                            return
-                        }
-                        const fParser = new SFloorParser(null)
-                        fParser.parseData(res)
-                        fParser.spaceList.forEach(t => {
-                            //   t.selectable = true;
-                            this.scene.addItem(t)
-                        })
-                        fParser.wallList.forEach(t => this.scene.addItem(t))
-                        fParser.virtualWallList.forEach(t => this.scene.addItem(t))
-                        fParser.doorList.forEach(t => this.scene.addItem(t))
-                        fParser.columnList.forEach(t => this.scene.addItem(t))
-                        fParser.casementList.forEach(t => this.scene.addItem(t))
-                        this.view.scene = this.scene
-                        this.view.fitSceneToView()
-                        this.view.minScale = this.view.scale
-                        if (this.$refs.canvasFun) {
-                            this.$refs.canvasFun.everyScale = this.view.scale
-                        }
-                        this.loading = false
-                        //console.log('success')
-                    })
-                } else {
-                    //console.log('楼层不正确')
-                }
-            }
-        },
-        clearGraphy() {
-            if (this.view) {
-                this.view.scene = null
-                return
-            }
-            this.view = new FloorView(`canvas${this.id}`)
-        },
-        listChange(item, ev) {
-            let name = ev[0][0].data.Name
-            if (name.slice(name.length - 2, name.length) == '机房') {
-                this.$refs.boxRoom.open({ name: name, type: this.type })
-            }
-        },
-        // 适配底图到窗口
-        fit() {
-            this.view.fitSceneToView()
-        },
-        // 保存为png
-        savePng() {
-            this.view.saveImage(`${this.loadName}.png`, 'png')
-            //console.log(`${this.loadName}.png`)
-        },
-        // 保存为svg
-        saveSvg() {
-            this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
-        },
-        // 保存为json
-        saveJson() {
-            this.view.saveFloorJson(`${this.loadName}.json`)
-        },
-        // 缩放
-        scale(val) {
-            if (!this.view) {
-                return
-            }
-            let scale = this.view.scale
-            console.log(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
-            this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
-        },
-        // 读取数据
-        readGroup(FloorID) {
-            const data = {
-                BuildingID: '1',
-                FloorID: FloorID,
-                categoryId: this.$cookie.get('categoryId'),
-                projectId: this.urlMsg.ProjectID
-            }
-            return readGroup(data)
-        },
-        // 地图尺寸
-        mapSize() {
-            if (window.screen.height == '768') {
-                this.canvasWidth = this.$refs.graphy.offsetWidth
-                this.canvasHeight = this.$refs.graphy.offsetHeight - 100
-            } else {
-                this.canvasWidth = this.$refs.graphy.offsetWidth
-                this.canvasHeight = 900
-            }
+    loadName: null,
+    type: null
+  },
+  components: { RoomBox, canvasFun },
+  computed: {
+    ...mapGetters(["plazaId", "fmapID", "haveFengMap"])
+  },
+  methods: {
+    ...mapActions(["getfmapID"]),
+    init(floorid) {
+      this.loading = true;
+      this.floorid = floorid;
+      setTimeout(() => {
+        if (this.haveFengMap) {
+          this.clearGraphy();
+          this.scene = new FloorScene();
+          this.scene.selectContainer.connect(
+            "listChange",
+            this,
+            this.listChange
+          );
+          if (this.canvasID != `canvas${this.id}`) {
+            this.canvasID = `canvas${this.id}`;
+          }
+          this.parserData(floorid);
         }
+      },100);
     },
-    watch: {
-        'view.scale': {
-            handler(n) {
-                if (this.$refs.canvasFun) {
-                    let s = (n * 10) / this.view.minScale
-                    this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
-                }
+    parserData(floor) {
+      if (floor == "g80") {
+        // 屋顶
+        if (window.fengmapData.frImg) {
+          let imgItem = new SImageItem(
+            null,
+            `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`
+          );
+          this.scene.addItem(imgItem);
+          this.view.scene = this.scene;
+          this.view.minScale = this.view.scale;
+          if (this.$refs.canvasFun) {
+            this.$refs.canvasFun.everyScale = this.view.scale;
+          }
+          this.view.fitSceneToView();
+        }
+      } else {
+        if (window.fengmapData.gnameToGid[floor]) {
+          window.fengmapData.parseData(
+            window.fengmapData.gnameToGid[floor],
+            res => {
+              if (res.err) {
+                console.log("errr", res.err);
+                return;
+              }
+              const fParser = new SFloorParser(null);
+              fParser.parseData(res);
+              fParser.spaceList.forEach(t => {
+                //   t.selectable = true;
+                this.scene.addItem(t);
+              });
+              fParser.wallList.forEach(t => this.scene.addItem(t));
+              fParser.virtualWallList.forEach(t => this.scene.addItem(t));
+              fParser.doorList.forEach(t => this.scene.addItem(t));
+              fParser.columnList.forEach(t => this.scene.addItem(t));
+              fParser.casementList.forEach(t => this.scene.addItem(t));
+              this.view.scene = this.scene;
+              this.view.minScale = this.view.scale;
+              if (this.$refs.canvasFun) {
+                this.$refs.canvasFun.everyScale = this.view.scale;
+              }
+              this.view.fitSceneToView();
+              //console.log('success')
             }
+          );
+        } else {
+          console.log("楼层不正确");
         }
+      }
+      this.readGroup(this.floorid).then(data => {
+        this.loading = false;
+        if (data.Data.length > 0) {
+          //console.log(data.data.Data[0].ID)
+          this.$cookie.set("graphId", data.Data[0].ID, 3);
+        }
+        const parserData = new STopologyParser(null);
+        parserData.parseData(data.Data[0].Elements);
+        // 多边形
+        parserData.zoneLegendList.forEach(t => {
+          this.scene.addItem(t);
+        });
+        // 增加文字
+        parserData.textMarkerList.forEach(t => {
+          this.scene.addItem(t);
+        });
+        // 增加图片
+        parserData.imageMarkerList.forEach(t => {
+          this.scene.addItem(t);
+        });
+        // 增加直线
+        parserData.lineMarkerList.forEach(t => {
+          this.scene.addItem(t);
+        });
+        // 增加图标类图例
+        parserData.imageLegendList.forEach(t => {
+          this.scene.addItem(t);
+        });
+        // 增加管线类
+        // 增加图标类图例
+        parserData.relationList.forEach(t => {
+          this.scene.addItem(t);
+        });
+        this.view.fitSceneToView();
+      });
+    },
+    clearGraphy() {
+      if (this.view) {
+        this.view.scene = null;
+        return;
+      }
+      this.view = new FloorView(`canvas${this.id}`);
+    },
+    listChange(item, ev) {
+      let name = ev[0][0].data.Name;
+      if (name.slice(name.length - 2, name.length) == "机房") {
+        this.$refs.boxRoom.open({ name: name, type: this.type });
+      }
+    },
+    // 适配底图到窗口
+    fit() {
+      this.view.fitSceneToView();
+    },
+    // 保存为png
+    savePng() {
+      this.view.saveImage(`${this.loadName}.png`, "png");
+      //console.log(`${this.loadName}.png`)
+    },
+    // 保存为svg
+    saveSvg() {
+      this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800);
+    },
+    // 保存为json
+    saveJson() {
+      this.view.saveFloorJson(`${this.loadName}.json`);
     },
-    mounted() {
-        this.mapSize()
+    // 缩放
+    scale(val) {
+      if (!this.view) {
+        return;
+      }
+      let scale = this.view.scale;
+      console.log(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
+      this.view.scaleByPoint(
+        val / scale,
+        this.canvasWidth / 2,
+        this.canvasHeight / 2
+      );
     },
-    created() {
-        this.urlMsg = {
-            categoryId: this.$cookie.get('categoryId'),
-            ProjectID: this.plazaId,
-            BuildingID: '1',
-            FloorID: this.$cookie.get('floorMapId') || 'f1',
-            fmapID: this.fmapID
+    // 读取数据
+    readGroup(FloorID) {
+      const data = {
+        BuildingID: "1",
+        FloorID: FloorID,
+        categoryId: this.$cookie.get("categoryId"),
+        projectId: this.urlMsg.ProjectID
+      };
+      return readGroup(data);
+    },
+    // 地图尺寸
+    mapSize() {
+      if (window.screen.height == "768") {
+        this.canvasWidth = this.$refs.graphy.offsetWidth;
+        this.canvasHeight = this.$refs.graphy.offsetHeight - 100;
+      } else {
+        this.canvasWidth = this.$refs.graphy.offsetWidth;
+        this.canvasHeight = 900;
+      }
+    }
+  },
+  watch: {
+    "view.scale": {
+      handler(n) {
+        if (this.$refs.canvasFun) {
+          let s = (n * 10) / this.view.minScale;
+          this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
         }
+      }
+    },
+    haveFengMap(val) {
+      if (val) {
+        this.init(this.floorid);
+      }
     }
-}
+  },
+  mounted() {
+    this.mapSize();
+  },
+  created() {
+    this.urlMsg = {
+      categoryId: this.$cookie.get("categoryId"),
+      ProjectID: this.plazaId,
+      BuildingID: "1",
+      FloorID: this.$cookie.get("floorMapId") || "f1",
+      fmapID: this.fmapID
+    };
+  }
+};
 </script>
 <style lang="less" scoped>
 #floor_base {
-    position: relative;
-    .fengMap {
-        position: fixed;
-        width: 100px;
-        height: 100px;
-        z-index: -1;
-    }
-    .strip-bottom {
-        position: absolute;
-        right: 0;
-        bottom: 40px;
-        width: 100%;
-    }
+  position: relative;
+  .fengMap {
+    position: fixed;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+  .strip-bottom {
+    position: absolute;
+    right: 0;
+    bottom: 40px;
+    width: 100%;
+  }
 }
 </style>