diff --git a/src/api/map/index.js b/src/api/map/index.js
index ffc5612..51219d1 100644
--- a/src/api/map/index.js
+++ b/src/api/map/index.js
@@ -1,6 +1,13 @@
 import request from '@/utils/request'
 import qs from 'qs'
 
+// 地图列表
+export function FetchMapTree(params) {
+  return request({
+    url: 'api/fengmap/getMapTree' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
 export function add(data) {
   return request({
     url: 'api/fengmap/editMap',
@@ -17,13 +24,13 @@ export function edit(data) {
   })
 }
 
-// export function del(ids) {
-//   return request({
-//     url: 'api/libraryRegion/delLibraryRegion',
-//     method: 'post',
-//     data: ids
-//   })
-// }
+export function del(ids) {
+  return request({
+    url: 'api/fengmap/deleteMaps',
+    method: 'post',
+    data: ids
+  })
+}
 
 // 根据id查询地图详情
 export function FetchMapDetails(params) {
@@ -33,4 +40,10 @@ export function FetchMapDetails(params) {
   })
 }
 
-export default { add, edit, FetchMapDetails }
+export default {
+  FetchMapTree,
+  add,
+  edit,
+  del,
+  FetchMapDetails
+}
diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index d3c2e0e..8546ab1 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -2079,4 +2079,14 @@ input[type ='number'] {
       font-size: 16px;
     }
   }
+}
+
+.map-dialog{
+  .el-dialog{
+    width: 1200px;
+    height: 800px;
+    .el-dialog__body{
+      padding: 0 !important;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/deviceManage/area/areaClassifyRelated.vue b/src/views/deviceManage/area/areaClassifyRelated.vue
new file mode 100644
index 0000000..dccd23c
--- /dev/null
+++ b/src/views/deviceManage/area/areaClassifyRelated.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="app-container">
+    <div class="venue-header">
+      <h4><i class="iconfont icon-hangzhengquyuguanli" />区域列表</h4>
+      <p><i class="iconfont icon-gongsi" />{{ user.fonds.fondsName }}</p>
+    </div>
+    <div class="venue-content">
+      <div class="venue-left">
+        <div class="head-container">
+          <div class="head-search">
+            <!-- 搜索 -->
+            <el-select v-model="query.floorId" clearable size="small" placeholder="楼层" class="filter-item" style="width: 80px" @change="changeInitFloorValue($event)">
+              <el-option v-for="item in floorOptions" :key="item.id" :label="item.floorName" :value="item.id" />
+            </el-select>
+            <el-input v-model="query.search" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @clear="crud.toQuery" @keyup.enter.native="crud.toQuery" />
+            <rrOperation />
+          </div>
+        </div>
+        <div>
+          <el-table
+            ref="table"
+            v-loading="crud.loading"
+            :data="crud.data"
+            style="width: 100%;"
+            height="506"
+            @selection-change="crud.selectionChangeHandler"
+            @row-click="clickRowHandler"
+          >
+            <el-table-column type="selection" align="center" width="55" />
+            <el-table-column type="index" label="排序" />
+            <el-table-column prop="regionName" label="区域名称" />
+            <el-table-column prop="regionCode" label="区域编码" />
+            <el-table-column prop="floorName" label="所在楼层" />
+            <el-table-column prop="booksheflCount" label="书架" />
+            <el-table-column prop="signPoint" label="关联分类" />
+          </el-table>
+          <!--分页组件-->
+          <pagination v-if="crud.data.length!==0" />
+        </div>
+      </div>
+      <div class="venue-right">
+        <div class="container-right tab-content">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <ul class="tab-nav">
+            <li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">关联列表<i /></li>
+            <!-- 最右侧装饰img -->
+            <span class="tab-right-img" />
+            <el-button size="mini" class="venue-mark">
+              <i class="iconfont icon-bendiguajie" />
+              关联设置
+            </el-button>
+          </ul>
+          <div v-if="activeIndex == 0" class="venue-preview">
+            111
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- form -->
+    <el-dialog :close-on-click-modal="false" :append-to-body="true" title="关联图书分类" :visible.sync="relatedVisible">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-table :data="relatedTableData" class="file-sort" style="width: 100%;max-height: 70vh;" row-key="id">
+          <el-table-column type="index" label="序号" width="100" align="center" />
+          <el-table-column prop="regionName" label="图书分类">
+            <template slot-scope="scope">
+              <span>{{ scope.row.regionName +' [ '+ scope.row.floorName+' ] ' }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="handleCloseDialog">取消</el-button>
+          <el-button type="primary" @click="crud.submitCU">保存</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { FetchLibraryFloorListAll } from '@/api/floor/index'
+import crudRegion from '@/api/area/index'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import pagination from '@crud/Pagination'
+import { mapGetters } from 'vuex'
+
+const defaultForm = { id: null }
+export default {
+  name: 'Bookshelf',
+  components: { rrOperation, pagination },
+  cruds() {
+    return CRUD({ title: '区域', url: 'api/libraryRegion/initLibraryRegionList', crudMethod: { ...crudRegion }, sort: [], optShow: {
+      add: true,
+      edit: true,
+      del: false,
+      download: false,
+      group: false,
+      reset: false
+    }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      floorOptions: [],
+      permission: {
+        add: ['admin', 'floor:add'],
+        edit: ['admin', 'floor:edit'],
+        del: ['admin', 'floor:del']
+      },
+      activeIndex: 0,
+      relatedTableData: [], // 排序data
+      relatedVisible: false, // 排序dialog
+      currentData: null
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'user',
+      'baseApi'
+    ])
+  },
+  watch: {
+  },
+  beforeDestroy() {
+    window.removeEventListener('beforeunload', this.clearLocalStorage)
+  },
+  methods: {
+    clearLocalStorage() {
+      const key = 'formFloor'
+      if (localStorage.getItem(key)) {
+        localStorage.removeItem(key)
+      }
+    },
+    [CRUD.HOOK.beforeRefresh]() {
+      this.getLibraryFloorListAll()
+      if (this.$route.query.formFloor) {
+        const formFloor = JSON.parse(localStorage.getItem('formFloor'))
+        if (formFloor) {
+          this.crud.query.floorId = formFloor.id
+        }
+      }
+    },
+    [CRUD.HOOK.afterRefresh](crud) {
+      console.log('crud.data', crud.data)
+      if (crud.data.length !== 0) {
+        this.clickRowHandler(crud.data[0])
+        this.activeIndex = 0
+      }
+    },
+
+    // 提交前的验证
+    [CRUD.HOOK.afterValidateCU](crud) {
+      this.$refs.uploadCoverRefs.fileNames = ''
+      return true
+    },
+    // 获取楼层数据
+    getLibraryFloorListAll() {
+      FetchLibraryFloorListAll().then(res => {
+        this.floorOptions = res
+      }).catch(() => {
+      })
+    },
+    changeInitFloorValue(value) {
+      if (this.$route.query.formFloor) {
+        localStorage.removeItem('formFloor')
+      }
+
+      this.crud.query.floorId = value
+      this.crud.toQuery()
+      console.log('value', value)
+    },
+    clickRowHandler(row) {
+      this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row)
+      this.currentData = row
+      if (this.activeIndex === 0) {
+        console.log('列表数据', row)
+      }
+    },
+    changeActiveTab(data) {
+      this.activeIndex = data
+    },
+    toDelete(datas) {
+      this.$confirm('此操作将删除当前所选区域<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.crud.delAllLoading = true
+        const ids = []
+        datas.forEach(val => {
+          ids.push(val.id)
+        })
+        console.log(ids)
+        crudRegion.del(ids).then(res => {
+          console.log(res)
+          this.$message({ message: res, type: 'success', offset: 8 })
+          this.crud.delAllLoading = false
+          this.crud.refresh()
+        }).catch(err => {
+          this.crud.delAllLoading = false
+          console.log(err)
+        })
+      }).catch(() => {
+        this.crud.delAllLoading = false
+      })
+    },
+    handleCloseDialog() {
+      this.relatedVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tab-content{
+  min-height: calc(100vh - 232px) !important;
+}
+</style>
diff --git a/src/views/deviceManage/floor/index.vue b/src/views/deviceManage/floor/index.vue
index 85a1819..148223f 100644
--- a/src/views/deviceManage/floor/index.vue
+++ b/src/views/deviceManage/floor/index.vue
@@ -43,9 +43,15 @@
             <el-table-column type="index" label="排序" />
             <el-table-column prop="floorName" label="楼层名称" />
             <el-table-column prop="regionCount" label="区域" />
+            <el-table-column prop="mapType" label="地图类型">
+              <template slot-scope="scope">
+                <span>{{ scope.row.mapType === 1 ? '2D' : '3D' }}</span>
+              </template>
+            </el-table-column>
             <el-table-column prop="floorMap" label="地图">
               <template slot-scope="scope">
-                <span :class="['row-state', scope.row.floorMap ? 'end-state' : 'cancel-state' ]">{{ scope.row.floorMap ? '已上传': '未上传' }}</span>
+                <span v-if="scope.row.mapType === 1" :class="['row-state', scope.row.floorMap ? 'end-state' : 'cancel-state' ]">{{ scope.row.floorMap ? '已上传': '未上传' }}</span>
+                <span v-else :class="['row-state', scope.row.mapLevel ? 'end-state' : 'cancel-state' ]">{{ scope.row.mapLevel ? '已绑定': '未绑定' }}</span>
               </template>
             </el-table-column>
           <!-- <el-table-column prop="floorDescription" label="说明">
@@ -73,10 +79,13 @@
             <span class="tab-right-img" />
           </ul>
           <!-- v-loading="imgLoading"  -->
-          <div class="venue-preview">
+          <div v-if="crurrentRow.mapType===1" class="venue-preview">
             <!-- <img src="~@/assets/images/system/default-img.jpg" alt=""> -->
             <img :src="imageUrl" :onerror="defaultImg" alt="">
           </div>
+          <div v-else class="venue-preview">
+            <PreviewMapRight ref="rightMap" :map-data="currentMapData" />
+          </div>
         </div>
       </div>
     </div>
@@ -101,22 +110,23 @@
           </el-form-item>
           <UploadCover v-if="form.mapType===1" :label-name="labelName" :form="form" upload-type="other" @childCover="handleCover" />
 
-          <el-form-item v-if="form.mapType===2" label="选择3D地图" prop="appID">
-            <el-select v-model="form.appID" placeholder="请选择" style="width: 580px;">
+          <el-form-item v-if="form.mapType===2" label="选择3D地图" prop="mapData">
+            <el-select v-model="form.mapData" placeholder="请选择" value-key="id" style="width: 580px;" @change="changeMap3d">
               <el-option
                 v-for="(item,index) in mapOptions"
                 :key="index"
-                :label="item.name"
-                :value="item.id"
+                :label="item.appName"
+                :value="item"
               />
             </el-select>
           </el-form-item>
-          <el-form-item v-if="form.mapType===2" label="楼层绑定" prop="bindFloor">
-            <el-button size="mini">
+          <el-form-item v-if="form.mapType===2" label="楼层绑定" prop="mapLevel">
+            <p v-if="mapLevelName">当前已选择：{{ mapLevelName }}</p>
+            <el-button v-if="form.mapLevel" size="mini" @click="handleBindMapFloor">
               <i class="iconfont icon-sulan" />
               已绑定，点击查看/重新绑定
             </el-button>
-            <el-button size="mini" style="color: #fff; background-color: #0348f3;">
+            <el-button v-else size="mini" style="color: #fff; background-color: #0348f3;" @click="handleBindMapFloor">
               <i class="iconfont icon-bendiguajie" />
               未绑定，点击按钮完成绑定
             </el-button>
@@ -144,11 +154,23 @@
         </div>
       </div>
     </el-dialog>
+
+    <el-dialog class="map-dialog" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :before-close="handleClose" :visible.sync="mapPreviewVisible" :title="mapPreviewTitle">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <PreviewMap ref="map" :map-data="form.mapData" @refreshLevel="handleLevel" />
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click.native="saveLevel">确定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import crudFloor from '@/api/floor/index'
+import { FetchMapTree, FetchMapDetails } from '@/api/map/index'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
 import rrOperation from '@crud/RR.operation'
@@ -158,10 +180,13 @@ import Sortable from 'sortablejs'
 import { mapGetters } from 'vuex'
 import defaultImg from '@/assets/images/system/default-img.jpg'
 
-const defaultForm = { id: null, floorName: null, floorDescription: null, floorMap: null, mapType: 1, appID: null }
+import PreviewMap from '../map3d/map'
+import PreviewMapRight from '../map3d/mapRight'
+
+const defaultForm = { id: null, floorName: null, floorDescription: null, floorMap: null, mapId: null, mapAppId: null, mapType: 1, mapData: null, mapLevel: null }
 export default {
   name: 'Floor',
-  components: { crudOperation, rrOperation, pagination, UploadCover },
+  components: { crudOperation, rrOperation, pagination, UploadCover, PreviewMap, PreviewMapRight },
   cruds() {
     return CRUD({ title: '楼层', url: 'api/libraryFloor/initLibraryFloorList', crudMethod: { ...crudFloor }, sort: [], optShow: {
       add: true,
@@ -189,12 +214,20 @@ export default {
         mapType: [
           { required: true, message: '请选择地图类型', trigger: 'change' }
         ]
+        // mapData: [
+        //   { required: true, message: '请选择3D地图', trigger: 'change' }
+        // ]
       },
+      crurrentRow: {},
       defaultImg: defaultImg,
       imageUrl: defaultImg,
       sortTableData: [], // 排序data
       sortVisible: false, // 排序dialog
-      mapOptions: []
+      mapOptions: [],
+      mapPreviewVisible: false,
+      mapPreviewTitle: '3D地图绑定',
+      mapLevelName: null,
+      currentMapData: null
     }
   },
   computed: {
@@ -203,6 +236,9 @@ export default {
       'baseApi'
     ])
   },
+  mounted() {
+    this.getMapTree()
+  },
   methods: {
     [CRUD.HOOK.beforeRefresh]() {
 
@@ -213,11 +249,52 @@ export default {
         this.clickRowHandler(crud.data[0])
       }
     },
+    // 新增前
+    [CRUD.HOOK.beforeToAdd](crud, form) {
+      this.mapLevelName = null
+    },
+    // 编辑前
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      if (form.mapId) {
+        const matchedItem = this.mapOptions.find(item => item.id === form.mapId)
+        if (matchedItem) {
+          this.form.mapData = matchedItem
+        }
+      } else {
+        this.form.mapData = null
+      }
+    },
     // 提交前的验证
     [CRUD.HOOK.afterValidateCU](crud) {
       console.log(crud.form)
+      if (crud.form.mapType === 2 && crud.form.mapData) {
+        crud.form.mapId = crud.form.mapData.id
+        crud.form.mapAppId = crud.form.mapData.appId
+        delete this.crud.form.mapData
+      }
+      this.mapLevelName = null
       return true
     },
+    handleLevel(level, levelName) {
+      this.crud.form.mapLevel = level
+      this.mapLevelName = levelName
+      console.log('mapLevel', level)
+    },
+    getMapTree() {
+      const params = {
+        'libcode': this.user.fonds.fondsNo
+      }
+      FetchMapTree(params).then(res => {
+        this.mapOptions = res
+      }).catch(() => {
+      })
+    },
+    changeMap3d(val) {
+      if (val) {
+        // this.selectFloorVal = val
+        // this.crud.query.floorId = val.id
+      }
+    },
     handleCover(value) {
       console.log('value', value)
       this.crud.form.floorMap = value
@@ -225,13 +302,40 @@ export default {
     clickRowHandler(row) {
       this.$refs.table.clearSelection()
       this.$refs.table.toggleRowSelection(row)
-      // http://192.168.99.67:12010/api/fileRelevant/getImg?imgType=1&imgId=f6d3ecea-0456-4429-ba77-1a4921d5c806
-      if (row.floorMap) {
-        this.imageUrl = this.baseApi + '/api/fileRelevant/getImg?imgType=1&imgId=' + row.floorMap
+      this.crurrentRow = row
+      if (row.mapType === 1) {
+        // http://192.168.99.67:12010/api/fileRelevant/getImg?imgType=1&imgId=f6d3ecea-0456-4429-ba77-1a4921d5c806
+        if (row.floorMap) {
+          this.imageUrl = this.baseApi + '/api/fileRelevant/getImg?imgType=1&imgId=' + row.floorMap
+        } else {
+          this.imageUrl = this.defaultImg
+        }
       } else {
-        this.imageUrl = this.defaultImg
+        console.log('3D地图')
+        this.getMapDetails(row.mapId)
       }
     },
+
+    getMapDetails(id) {
+      const params = {
+        'id': id
+      }
+      FetchMapDetails(params).then(res => {
+        this.currentMapData = res
+        this.$nextTick(() => {
+          if (this.$refs.rightMap) {
+            this.$refs.rightMap.dispose()
+          }
+          if (this.crurrentRow.mapLevel) {
+            this.$refs.rightMap.level = Number(this.crurrentRow.mapLevel)
+          } else {
+            this.$refs.rightMap.level = 1
+          }
+          this.$refs.rightMap.initMap()
+        })
+      }).catch(() => {
+      })
+    },
     onRowDblclick(row) {
       // crudShelf.FetchBookShelfDetails({ 'shelfId': row.shelfId }).then(res => {
       //   this.$router.push({ path: '/bookshelf/bookshelfPosition', query: { 'floorName': row.floorName, 'regionName': row.regionName }})
@@ -301,6 +405,38 @@ export default {
         this.$message({ message: '保存成功', type: 'success', offset: 8 })
         this.crud.refresh()
       })
+    },
+    handleBindMapFloor() {
+      console.log('this.crud.form', this.crud.form)
+      if (this.crud.form.mapData) {
+        const row = this.crud.form.mapData
+        this.mapPreviewTitle = '3D地图绑定 - 【' + row.appId + '】 ' + row.appName
+        this.mapPreviewVisible = true
+        this.$nextTick(() => {
+          console.log('this.crud.form.mapLevel', this.crud.form.mapLevel)
+          if (this.crud.form.mapLevel) {
+            this.$refs.map.level = Number(this.crud.form.mapLevel)
+          } else {
+            this.$refs.map.level = 1
+          }
+          this.$refs.map.initMap()
+        })
+      } else {
+        this.$message({ message: '请先选择3D地图', type: 'error', offset: 8 })
+      }
+    },
+    saveLevel() {
+      if (this.$refs.map) {
+        this.$refs.map.getCurrentLevel()
+        this.handleClose()
+      }
+    },
+    handleClose() {
+      this.mapPreviewVisible = false
+      this.mapData = {}
+      if (this.$refs.map) {
+        this.$refs.map.dispose()
+      }
     }
   }
 }
@@ -310,4 +446,10 @@ export default {
 .tab-content{
   min-height: calc(100vh - 232px) !important;
 }
+::v-deep .el-dialog__footer{
+  padding: 0;
+  .dialog-footer{
+    margin-top: 0;
+  }
+}
 </style>
diff --git a/src/views/deviceManage/map3d/index.vue b/src/views/deviceManage/map3d/index.vue
index acf1a0e..79579e1 100644
--- a/src/views/deviceManage/map3d/index.vue
+++ b/src/views/deviceManage/map3d/index.vue
@@ -32,7 +32,7 @@
             <el-tag v-else type="danger">离线</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="createTime" label="操作">
+        <el-table-column prop="createTime" label="操作" width="140">
           <template slot-scope="scope">
             <el-button size="mini" @click="handlePreviewMap(scope.row)">
               <i class="iconfont icon-yulan" />
@@ -177,6 +177,7 @@ export default {
     },
     handlePreviewMap(row) {
       console.log('row', row)
+      this.mapPreviewTitle = '3D地图预览 - 【' + row.appId + '】 ' + row.appName
       this.mapPreviewVisible = true
       this.mapData = row
       this.$nextTick(() => {
@@ -195,18 +196,18 @@ export default {
         datas.forEach(val => {
           ids.push(val.id)
         })
-        // crudColumn.del(ids).then((res) => {
-        //   if (res.code !== 500) {
-        //     this.$message({ message: '删除成功', type: 'success', offset: 8 })
-        //     this.crud.refresh()
-        //   } else {
-        //     this.$message({ message: '删除失败', type: 'error', offset: 8 })
-        //   }
-        //   this.crud.delAllLoading = false
-        // }).catch(err => {
-        //   this.crud.delAllLoading = false
-        //   console.log(err)
-        // })
+        crudMap.del(ids).then((res) => {
+          if (res.code !== 500) {
+            this.$message({ message: '删除成功', type: 'success', offset: 8 })
+            this.crud.refresh()
+          } else {
+            this.$message({ message: '删除失败', type: 'error', offset: 8 })
+          }
+          this.crud.delAllLoading = false
+        }).catch(err => {
+          this.crud.delAllLoading = false
+          console.log(err)
+        })
       }).catch(() => {
       })
     },
@@ -239,13 +240,5 @@ export default {
     color: #0348F3;
   }
 }
-.map-dialog{
-  ::v-deep .el-dialog{
-    width: 1200px;
-    height: 800px;
-    .el-dialog__body{
-      padding: 0 !important;
-    }
-  }
-}
+
 </style>
diff --git a/src/views/deviceManage/map3d/map.vue b/src/views/deviceManage/map3d/map.vue
index 17ffb05..ce6b0fe 100644
--- a/src/views/deviceManage/map3d/map.vue
+++ b/src/views/deviceManage/map3d/map.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative; width: 100%; height: 720px; ">
+  <div style="position: relative; width: 100%; height: 680px; ">
     <div id="fengmap" />
     <div class="rightMask" />
   </div>
@@ -24,6 +24,7 @@ export default {
     return {
       map: null,
       level: null,
+      levelName: null,
       levels: null,
       marker: null,
       scrollFloorControl: null,
@@ -46,13 +47,18 @@ export default {
   },
   methods: {
     dispose() {
-      this.scrollFloorControl.remove()
-      this.map.dispose()
-      this.map = null
+      if (this.scrollFloorControl) {
+        this.scrollFloorControl.remove()
+      }
+      if (this.map) {
+        this.map.dispose()
+        this.map = null
+      }
     },
     initMap() {
       window.vueInstance = null
       try {
+        console.log('this.level', this.level)
         console.log('开始初始化地图')
         const options = {
           container: document.getElementById('fengmap'),
@@ -62,6 +68,7 @@ export default {
           // mapURL: '/fengmap/data/',
           // themeID: '1574346301450625025',
           // themeURL: '/fengmap/data/theme/',
+          level: this.level,
           mapZoom: 19.5,
           backgroundColor: '#fff'
         }
@@ -106,7 +113,6 @@ export default {
           }
           this.scaleBar = new FMScaleBar(scrollScaleBarCtlOpt)
           this.scaleBar.addTo(this.map)
-
           window.vueInstance = this
           console.log('Vue实例已全局挂载：', window.vueInstance)
         }, { passive: true })
@@ -120,11 +126,28 @@ export default {
           console.error('地图初始化错误:', err)
           this.debugInfo = `地图初始化错误: ${err.message}`
         })
+
+        this.map.on('levelChanged', function(event) {
+          console.log('levelChanged:', event)
+          console.log('当前楼层:', event.level)
+          console.log('楼层name2', window.vueInstance.map.getFloor(event.level).name)
+        })
       } catch (error) {
         console.error('初始化地图失败:', error)
         this.debugInfo = `初始化失败: ${error.message}`
       }
+    },
+    getCurrentLevel() {
+      this.level = this.map.getLevel()
+      this.levelName = this.map.getFloor(this.level).name
+      // floorID level name
+      console.log('楼层info', this.map.getFloor(this.level))
+      console.log('楼层name1', this.map.getFloor(this.level).name)
+      // 所有
+      console.log('getFloorInfos', this.map.getFloorInfos())
+      window.vueInstance.$emit('refreshLevel', this.level, this.levelName)
     }
+
   }
 }
 </script>
diff --git a/src/views/deviceManage/map3d/mapRight.vue b/src/views/deviceManage/map3d/mapRight.vue
new file mode 100644
index 0000000..1fc2d84
--- /dev/null
+++ b/src/views/deviceManage/map3d/mapRight.vue
@@ -0,0 +1,174 @@
+<template>
+  <div :style="{position: 'relative', width: '100%', height: '640px'}">
+    <div id="fengmapRight" />
+    <div class="rightMask" />
+  </div>
+</template>
+
+<script>
+import fengmap from '@/assets/fengmap/fengmap.map.min'
+import { FMControlPosition, FMToolbar, FMScaleBar } from '@/assets/fengmap/fengmap.plugin.ui.min.js'
+
+export default {
+  name: 'FengMap',
+  props: {
+    mapData: {
+      type: Object,
+      require: true,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      map: null,
+      level: null,
+      levelName: null,
+      levels: null,
+      marker: null,
+      scrollFloorControl: null,
+      scaleBar: null
+    }
+  },
+  watch: {
+    mapData: {
+      handler(newVal, oldVal) {
+        if (!newVal) {
+          console.log('newVal-null')
+          return
+        }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    console.log('mapData', this.mapData)
+  },
+  methods: {
+    dispose() {
+      if (this.scrollFloorControl) {
+        this.scrollFloorControl.remove()
+      }
+      if (this.map) {
+        this.map.dispose()
+        this.map = null
+      }
+    },
+    initMap() {
+      window.vueInstance = null
+      try {
+        console.log('this.level', this.level)
+        console.log('开始初始化地图')
+        const options = {
+          container: document.getElementById('fengmapRight'),
+          appName: this.mapData && this.mapData.appName,
+          key: this.mapData && this.mapData.mapKey,
+          mapID: this.mapData && this.mapData.appId,
+          // mapURL: '/fengmap/data/',
+          // themeID: '1574346301450625025',
+          // themeURL: '/fengmap/data/theme/',
+          level: this.level,
+          mapZoom: 19.5,
+          backgroundColor: '#fff'
+        }
+        console.log('地图配置:', options)
+
+        this.map = new fengmap.FMMap(options)
+        console.log('地图实例已创建')
+
+        // this.map.on('loadingProcess', (event) => {
+        //   console.log('加载进度:', event.progress)
+        //   this.debugInfo = `加载进度: ${event.progress}%`
+        // })
+
+        this.map.on('loaded', () => {
+          console.log('地图加载完成')
+          this.map.setViewMode(fengmap.FMViewMode.MODE_3D)
+
+          // 楼层控件
+          const scrollFloorCtlOpt = {
+            position: FMControlPosition.RIGHT_TOP,
+            floorButtonCount: 5,
+            offset: {
+              x: -20,
+              y: 150
+            },
+            viewModeControl: true,
+            floorModeControl: true,
+            needAllLayerBtn: true
+          }
+          this.scrollFloorControl = new FMToolbar(scrollFloorCtlOpt)
+          this.scrollFloorControl.addTo(this.map)
+
+          // 比例尺控件
+          const scrollScaleBarCtlOpt = {
+            fontSize: 18,
+            height: 30,
+            position: FMControlPosition.LEFT_BOTTOM,
+            offset: {
+              x: 20,
+              y: -20
+            }
+          }
+          this.scaleBar = new FMScaleBar(scrollScaleBarCtlOpt)
+          this.scaleBar.addTo(this.map)
+          window.vueInstance = this
+          console.log('Vue实例已全局挂载：', window.vueInstance)
+        }, { passive: true })
+
+        this.map.on('click', (e) => {
+          this.marker && this.marker.remove()
+          this.marker = null
+        }, { passive: true })
+
+        this.map.on('mapInitError', (err) => {
+          console.error('地图初始化错误:', err)
+          this.debugInfo = `地图初始化错误: ${err.message}`
+        })
+
+        this.map.on('levelChanged', function(event) {
+          console.log('levelChanged:', event)
+          console.log('当前楼层:', event.level)
+          console.log('楼层name2', window.vueInstance.map.getFloor(event.level).name)
+        })
+      } catch (error) {
+        console.error('初始化地图失败:', error)
+        this.debugInfo = `初始化失败: ${error.message}`
+      }
+    },
+    getCurrentLevel() {
+      this.level = this.map.getLevel()
+      this.levelName = this.map.getFloor(this.level).name
+      // floorID level name
+      console.log('楼层info', this.map.getFloor(this.level))
+      console.log('楼层name1', this.map.getFloor(this.level).name)
+      // 所有
+      console.log('getFloorInfos', this.map.getFloorInfos())
+      window.vueInstance.$emit('refreshLevel', this.level, this.levelName)
+    }
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "~@/assets/fengmap/toolBarStyle.css";
+
+#fengmapRight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #f5f5f5;
+}
+.rightMask{
+  width: 162px;
+  height: 42px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: #fff;
+}
+</style>