瀏覽代碼

分支图

zhulizhen1111 4 年之前
父節點
當前提交
244a183ac8
共有 4 個文件被更改,包括 296 次插入342 次删除
  1. 22 5
      src/components/Legend/src/legend.vue
  2. 14 21
      src/components/floorList.vue
  3. 245 269
      src/components/floorMap/index.vue
  4. 15 47
      src/views/equipment/fenbuPic.vue

+ 22 - 5
src/components/Legend/src/legend.vue

@@ -6,7 +6,7 @@
 <template>
     <div>
         <div class='legend-container'>
-            <div class='legend' @click='showTl' v-if='type==1'>图例</div>
+            <div class='legend' @click='showTl' v-if='type==1 || floors.length>0'>图例</div>
             <el-collapse-transition>
                 <div class='legend-tab' v-if='show'>
                     <div class='legend-table'>
@@ -77,7 +77,7 @@
         <div class='select-floor' v-if='isFloor'>
             <p class='p1'>请选择需要创建“消防泵房引出管路分布图”的楼层</p>
             <p class='p2'>
-                <Select width='240' tipPlace='top' caption='楼层:' size='mini' :selectdata='floorSelect' :placeholder='"请选择"'></Select>
+                <Select width='240' tipPlace='top' caption='楼层:' size='mini' :selectdata='floorSelectAble' :placeholder='"请选择"'></Select>
             </p>
             <p class='p3'>
                 <span @click='cancel'>取消</span>
@@ -116,7 +116,8 @@ export default {
             editText: '',
             editSwitch: false,
             isFloor: false,
-            editPmt: true //是否有跳转道图例库的权限
+            editPmt: true, //是否有跳转道图例库的权限
+            floorSelectAble: []
         }
     },
     computed: {
@@ -140,6 +141,20 @@ export default {
     },
     components: { lengendView, legendRemarks, lengendEdit },
     methods: {
+        formatFloor() {
+            this.floorSelectAble = []
+            this.floorSelect.forEach(el => {
+                this.floors.forEach(ele => {
+                    if (el.id == ele.gname) {
+                        this.floorSelectAble.push({
+                            id: ele.gname,
+                            name: ele.code
+                        })
+                    }
+                })
+            })
+            console.log(this.floorSelectAble)
+        },
         testClick(data) {},
         // 编辑备注
         legendClik() {
@@ -295,7 +310,9 @@ export default {
         }
     },
     mounted() {
-        console.log(this.floors)
+        if (this.floors.length > 0) {
+            this.formatFloor()
+        }
     }
 }
 </script>
@@ -345,7 +362,7 @@ export default {
     position: fixed;
     bottom: 28px;
     z-index: 1;
-     right: 28px;
+    right: 28px;
     .edit-icon,
     .edit-icon2 {
         width: 48px;

+ 14 - 21
src/components/floorList.vue

@@ -70,24 +70,14 @@ export default {
     },
     props: {
         floorsArr: {
-            type: Array
-            /*  default: () => {
-                return [
-                    { name: '第6层', code: 'F6', gname: 'f6', gcode: '6F', seq: 600 },
-                    { name: '第5层', code: 'F5', gname: 'f5', gcode: '5F', seq: 500 },
-                    { name: '第4层', code: 'F4', gname: 'f4', gcode: '4F', seq: 400 },
-                    { name: '第3层', code: 'F3', gname: 'f3', gcode: '3F', seq: 300 },
-                    { name: '第2层', code: 'F2', gname: 'f2', gcode: '2F', seq: 200 },
-                    { name: '第1层', code: 'F1', gname: 'f1', gcode: '1F', seq: 100 },
-                    { name: '地下1层', code: 'B1', gname: 'b1', gcode: 'B1', seq: -100 },
-                    { name: '地下2层', code: 'B2', gname: 'b2', gcode: 'B2', seq: -200 },
-                    { name: '地下3层', code: 'B3', gname: 'b3', gcode: 'B3', seq: -300 },
-                    { name: '地下4层', code: 'B4', gname: 'b4', gcode: 'B4', seq: -400 }
-                ]
-            } */
+            type: Array,
+            default: () => {
+                ;[]
+            }
         }
     },
     mounted() {
+        console.log(this.floorsArr)
         this.init()
     },
     watch: {
@@ -180,12 +170,15 @@ export default {
         handleCookie() {
             // return true
             let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
-            this.$cookie.set('floorNow', currentFloor.code, 3)
-            this.$cookie.set('floorMapId', currentFloor.gname, 3)
-            this.$cookie.set('currentFloorId', currentFloor.seq, 3)
-            this.floorId = this.$cookie.get('floorNow') || currentFloor.code
-            this.floorMapIdName = this.$cookie.get('floorMapId') || currentFloor.gname
-            this.$emit('emitFloor', currentFloor)
+            console.log(currentFloor)
+            if (currentFloor) {
+                this.$cookie.set('floorNow', currentFloor.code || '', 3)
+                this.$cookie.set('floorMapId', currentFloor.gname, 3)
+                this.$cookie.set('currentFloorId', currentFloor.seq, 3)
+                this.floorId = this.$cookie.get('floorNow') || currentFloor.code
+                this.floorMapIdName = this.$cookie.get('floorMapId') || currentFloor.gname
+                this.$emit('emitFloor', currentFloor)
+            }
         },
         /**
          * @name tabFloor

+ 245 - 269
src/components/floorMap/index.vue

@@ -1,293 +1,269 @@
 <!-- 底图 -->
 <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 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>
-    <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;
+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
+    data() {
+        return {
+            appName: '万达可视化系统',
+            key: '23f30a832a862c58637a4aadbf50a566',
+            mapServerURL: `/wdfn`,
+            canvasWidth: 1100,
+            canvasHeight: 800,
+            loading: false, // 限制重复查询
+            view: null,
+            urlMsg: {},
+            canvasID: 'canvas'
+            // fmapID:'1001012_42',
+        }
     },
-    loadName: null,
-    type: null
-  },
-  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);
+    props: {
+        id: {
+            default: '1',
+            type: String
+        },
+        loadName: null,
+        type: null
     },
-    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);
-      }
+    components: { RoomBox, canvasFun },
+    computed: {
+        ...mapGetters(['plazaId', 'fmapID'])
     },
-    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;
+    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('楼层不正确')
+                }
             }
-            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;
+        },
+        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
             }
-            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
-      );
+    watch: {
+        'view.scale': {
+            handler(n) {
+                if (this.$refs.canvasFun) {
+                    let s = (n * 10) / this.view.minScale
+                    this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
+                }
+            }
+        }
     },
-    // 读取数据
-    readGroup(FloorID) {
-      const data = {
-        BuildingID: "1",
-        FloorID: FloorID,
-        categoryId: this.$cookie.get("categoryId"),
-        projectId: this.urlMsg.ProjectID
-      };
-      return readGroup(data);
+    mounted() {
+        this.mapSize()
     },
-    // 地图尺寸
-    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;
+    created() {
+        this.urlMsg = {
+            categoryId: this.$cookie.get('categoryId'),
+            ProjectID: this.plazaId,
+            BuildingID: '1',
+            FloorID: this.$cookie.get('floorMapId') || 'f1',
+            fmapID: this.fmapID
         }
-      }
     }
-  },
-  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>

+ 15 - 47
src/views/equipment/fenbuPic.vue

@@ -5,16 +5,8 @@
             <Legend :floors='floors' type='0'></Legend>
         </div>
         <floor-list v-if='floors.length>0' :floorsArr='floors' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
-        <div class='additional-box' v-if='floors.length>0'>
-            <div class='additional' @click='additionalColl'>
-                <img src='../../assets/imgs/bg.png' alt />
-            </div>
-            <el-collapse-transition>
-                <div v-if='show' class='add-img'>我是放附加数据图片哒。。。</div>
-            </el-collapse-transition>
-        </div>
-        <div v-show='floors.length>0'>
-            <floorMap ref='floorMap' :loadName='loadName' :type='"floor"'></floorMap>
+        <div>
+            <floorMap ref='floorMap' :loadName='""' :type='"floor"'></floorMap>
         </div>
         <div class='nodata' v-show='floors.length==0'>
             <img class='img1' src='@/assets/imgs/wtp.png' alt />
@@ -46,6 +38,7 @@ export default {
     },
     methods: {
         emitFloor(item) {
+            console.log(item)
             this.floorInfo = item
             this.$refs.floorMap.init(this.floorInfo.gname)
         },
@@ -70,21 +63,31 @@ export default {
                     this.floorsArr.forEach(el => {
                         floor.forEach(ele => {
                             if (ele.FloorId == el.gname) {
+                                console.log(el)
                                 this.floors.push({
                                     gname: el.gname,
-                                    code: el.code
+                                    gcode: el.gcode,
+                                    name: el.name,
+                                    code: el.code,
+                                    seq: el.seq
                                 })
                             }
                         })
                     })
                 }
                 console.log(this.floors)
+                this.floorInfo = this.floors[0]
+                this.$refs.floorMap.init(this.floorInfo.gname)
+                this.init()
             })
+        },
+        init() {
+            this.loadName = `${this.floorInfo.code}`
         }
     },
     mounted() {
+        console.log(this.floorsArr)
         this.getFloorData()
-        // this.$refs.floorMap.init(this.floorInfo.gname)
     }
 }
 </script>
@@ -100,41 +103,6 @@ export default {
         right: 32px;
         top: 155px;
     }
-    .additional-box {
-        position: relative;
-        .additional {
-            width: 44px;
-            height: 44px;
-            background: rgba(255, 255, 255, 1);
-            box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
-            border-radius: 2px;
-            position: fixed;
-            right: 32px;
-            top: 420px;
-            z-index: 2;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            img {
-                width: 20px;
-                height: 20px;
-            }
-        }
-        .add-img {
-            width: 560px;
-            height: 325px;
-            background: #ffffff;
-            -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
-            box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
-            border-radius: 2px;
-            border: 1px solid #e4e5e7;
-            position: absolute;
-            right: 77px;
-            top: 93px;
-            z-index: 2;
-        }
-    }
     .nodata {
         height: calc(100%-50px);
         .img1 {