diff --git a/src/views/deviceManage/map3d/map.vue b/src/views/deviceManage/map3d/map.vue
index 5bffeb3..0e6f5c6 100644
--- a/src/views/deviceManage/map3d/map.vue
+++ b/src/views/deviceManage/map3d/map.vue
@@ -1,7 +1,8 @@
 <template>
-  <div style="position: relative; width: 100%; height: 680px; ">
-    <div id="fengmap" />
-    <div class="rightMask" />
+  <!-- <div :style="{position: 'relative', width: '100%', height: toShlef ? '784px' :'680px'}"> -->
+  <div style="position: relative;width:100%; height:680px;">
+    <div id="fengmap" :style="{ top: toShlef ? '96px' :'0'}" />
+    <div class="rightMask" :style="{ bottom: toShlef ? '-96px' :'0'}" />
   </div>
 </template>
 
@@ -20,6 +21,10 @@ export default {
       default: function() {
         return {}
       }
+    },
+    toShlef: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -73,7 +78,7 @@ export default {
           // themeID: '1574346301450625025',
           // themeURL: '/fengmap/data/theme/',
           level: this.level,
-          mapZoom: 19.5,
+          mapZoom: this.toShlef ? 19.8 : 19.5,
           backgroundColor: '#fff'
         }
         console.log('地图配置:', options)
@@ -96,7 +101,7 @@ export default {
             floorButtonCount: 5,
             offset: {
               x: -20,
-              y: 150
+              y: this.toShlef ? 200 : 150
             },
             viewModeControl: true,
             floorModeControl: true,
diff --git a/src/views/deviceManage/shelfManage/shelf3dPosition.vue b/src/views/deviceManage/shelfManage/shelf3dPosition.vue
index 8a19d20..4a5288c 100644
--- a/src/views/deviceManage/shelfManage/shelf3dPosition.vue
+++ b/src/views/deviceManage/shelfManage/shelf3dPosition.vue
@@ -1,24 +1,363 @@
 <template>
-  <div class="app-container row-container">
-    架位3D地图定位
+  <div class="app-container" style="position: relative; height: 784px; background-color: #fff;">
+    <div class="position-top" style="display: flex; justify-content: space-between;">
+      <div class="position-top-left">
+        <el-select
+          ref="selectRef"
+          v-model="selectedValue"
+          placeholder="请选择"
+          style="width: 250px;"
+          @visible-change="handleVisibleChange"
+        >
+          <i slot="prefix" class="el-input__icon el-icon-location" />
+          <el-option value="" style="display: none;" />
+          <div class="tree-dropdown">
+            <el-tree
+              ref="treeRef"
+              :data="regionTreeData"
+              :props="treeProps"
+              node-key="id"
+              default-expand-all
+              :expand-on-click-node="false"
+              @node-click="handleTreeNodeClick"
+            >
+              <span slot-scope="{ node, data }" class="custom-tree-node">
+                <span v-if="data.fondsId" style="font-weight: bold;">
+                  <i class="iconfont icon-gongsi" />
+                  {{ data.label }}
+                </span>
+                <span v-else-if="data.floorId">
+                  <i class="iconfont icon-duolouceng" />
+                  {{ data.label }}
+                </span>
+                <span v-else>
+                  <i class="iconfont icon-hangzhengquyuguanli" />
+                  {{ data.label }}
+                </span>
+              </span>
+            </el-tree>
+          </div>
+        </el-select>
+        <el-card class="box-card shelf-bind-card">
+          <ul class="shelf-bind-tab">
+            <li class="active">已绑定（136）</li>
+            <li>未绑定（2）</li>
+          </ul>
+          <ul class="shelf-bind-list">
+            <li v-for="(item,index) in 8" :key="index">
+              <span>{{ index+1 }}</span>
+              <p>FTZN-03-001-A-01-1</p>
+            </li>
+          </ul>
+        </el-card>
+      </div>
+      <div class="position-top-middle">
+        <el-card class="box-card">
+          <el-form ref="form" :model="form" label-width="100px">
+            <el-form-item label="架位筛选" prop="name">
+              <el-select v-model="form.code1" style="width: 190px;">
+                <el-option
+                  v-for="(item,index) in options1"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <el-select v-model="form.code2">
+                <el-option
+                  v-for="(item,index) in selectList"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <el-select v-model="form.toward" style="width: 80px;">
+                <el-option
+                  v-for="(item,index) in abOptions"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+              <el-select v-model="form.code4">
+                <el-option
+                  v-for="(item,index) in selectList"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" />
+            </el-form-item>
+          </el-form>
+          <div class="filter-shelf-list">
+            <el-tag type="success">FTZN-03-001-A-01-1</el-tag>
+            <el-tag type="success">FTZN-03-001-A-01-2</el-tag>
+            <el-tag type="success">FTZN-03-001-A-01-3</el-tag>
+            <el-tag type="success">FTZN-03-001-A-01-4</el-tag>
+            <el-tag type="success">FTZN-03-001-A-01-5</el-tag>
+            <el-tag type="success">FTZN-03-001-A-01-6</el-tag>
+            <el-tag type="success">FTZN-03-001-A-01-7</el-tag>
+            <el-tag type="success">FTZN-03-001-A-01-8</el-tag>
+          </div>
+          <div class="filter-model-select">
+            <div class="model-select-style">已选定位：模型ID【7069947319919185920】</div>
+            <div class="model-select-style">已选架位：<span>6</span></div>
+            <el-button class="filter-item filter-search" size="mini" type="success"><i class="iconfont icon-bangding" />绑定</el-button>
+          </div>
+        </el-card>
+      </div>
+      <div class="position-top-right">
+        <el-card class="box-card">
+          <div class="inquiry-machine-bind-top">
+            <h4>查询机绑定</h4>
+            <div class="inquiry-machine-bind-params">
+              <span style="color: rgb(3, 72, 243); font-weight: bold;">已绑 1</span>
+              <span>/</span>
+              <span style="color: rgb(237, 74, 65); font-weight: bold;">未绑 1</span>
+            </div>
+          </div>
+          <ul class="shelf-bind-list" style="height: 190px;">
+            <li v-for="(item,index) in 8" :key="index">
+              <span>{{ index+1 }}</span>
+              <p>查询机001</p>
+              <span style="color: rgb(3, 72, 243); cursor: pointer;">绑定</span>
+              <!-- <span style="color: #2ecaac; cursor: pointer;">定位</span> -->
+            </li>
+          </ul>
+        </el-card>
+      </div>
+    </div>
+    <PreviewMap ref="map" :map-data="mapData" :to-shlef="true" />
   </div>
 </template>
 
 <script>
+import { FetchRegionTree } from '@/api/deviceVI/index'
+import PreviewMap from '../map3d/map'
 export default {
   name: 'Shelf3dPosition',
+  components: {
+    PreviewMap
+  },
   data() {
     return {
+      selectedValue: '',
+      regionTreeData: [],
+      treeProps: { label: 'label', children: 'children' },
+      form: {
+        code1: null,
+        code2: null,
+        toward: 0,
+        code4: null
+      },
+      selectList: [],
+      options1: [
+        { value: 0, label: '按 “排-单面-架” 筛选' },
+        { value: 1, label: '按 “排-双面-架” 筛选' },
+        { value: 2, label: '按 “排-单面” 筛选' },
+        { value: 3, label: '按 “排-双面” 筛选' }
+      ],
+      abOptions: [
+        { value: 0, name: '双面' },
+        { value: 1, name: 'A面' },
+        { value: 2, name: 'B面' }
+      ],
+      mapData: {}
     }
   },
-  watch: {
-  },
   created() {
+    FetchRegionTree().then(res => {
+      this.regionTreeData = [this.transformData(res)]
+      console.log(this.regionTreeData)
+    }).catch(() => {
+    })
+  },
+  mounted() {
+    this.mapData = {
+      'id': 1,
+      'libcode': '1201',
+      'appName': '武汉东西湖图书馆',
+      'appId': '1572162706543931393',
+      'mapKey': 'd0ebc0507c72e6fb8598a3e58517f9d3',
+      'isOnline': true
+    }
+    this.$nextTick(() => {
+      this.$refs.map.level = 1
+      this.$refs.map.initMap()
+    })
   },
   methods: {
+    // tree 数据转换
+    transformData(data) {
+      return {
+        id: data.fondsId,
+        fondsId: data.fondsId,
+        label: data.fondsName,
+        children: data.floors.map(floor => ({
+          id: floor.id,
+          floorId: floor.id,
+          label: floor.floorName,
+          children: floor.regions.map(region => ({
+            id: region.id,
+            regionId: region.id,
+            label: region.regionName,
+            parentFloorId: floor.id
+          }))
+        }))
+      }
+    },
+    handleTreeNodeClick(nodeData) {
+      const currentNode = this.$refs.treeRef.getNode(nodeData)
+      console.log(currentNode)
+
+      if (currentNode.level === 1) {
+        return
+      }
+
+      const parentNode = currentNode.parent
+      const parentLabel = parentNode && parentNode.data && parentNode.data.label
+        ? parentNode.data.label
+        : ''
+
+      this.selectedValue = parentLabel
+        ? `${parentLabel} - ${nodeData.label}`
+        : nodeData.label
+      this.$refs.selectRef.blur()
+    },
+    handleVisibleChange(visible) {
+      // 下拉关闭时的额外逻辑（可选）
+    }
   }
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+.tree-dropdown {
+  width: 250px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.position-top{
+  position: absolute;
+  top: 10px;
+  left: 20px;
+  width: calc(100% - 40px);
+  z-index: 999;
+}
+::v-deep .el-tree{
+  .el-tree-node__children{
+    font-size: 14px;
+    .iconfont{
+      font-size: 12px;
+    }
+  }
+}
+
+.position-top-left,
+.position-top-right{
+  width: 250px;
+}
+
+.shelf-bind-card{
+  width: 250px;
+  margin-top: 20px;
+  font-size: 14px;
+  .shelf-bind-tab{
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+    align-items: center;
+    li{
+      width: 50%;
+      height: 40px;
+      line-height: 40px;
+      cursor: pointer;
+      background: #f5f5f5;
+      &.active{
+        background: #fff;
+      }
+    }
+  }
+}
+
+.shelf-bind-list{
+  font-size: 12px;
+  margin-top: 8px;
+  height: 155px;
+  overflow-y: scroll;
+  li{
+    display: flex;
+    justify-content: flex-start;
+    line-height: 30px;
+    padding: 4px 10px;
+    span{
+      display: block;
+      width: 30px;
+      text-align: center;
+    }
+    p{
+      flex: 1;
+      padding-left: 20px;
+    }
+    &:hover{
+      background: #f5f5f5;
+      cursor: default;
+    }
+  }
+}
+
+.position-top-middle{
+  width: 916px;
+  .el-card{
+    padding:20px 0 10px 0;
+  }
+}
+.filter-shelf-list{
+  border-top: 1px solid #edeff3;
+  padding: 10px 10px 0 10px;
+  height: 96px;
+  overflow-y: scroll;
+}
+.filter-model-select{
+  border-top: 1px solid #edeff3;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 10px 0 10px;
+  margin-top: 10px;
+  .model-select-style{
+    font-weight: bold;
+    &:first-child{
+      flex: 1;
+    }
+    span{
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      background-color: #2ecaac;
+      color: #fff;
+      text-align: center;
+      border-radius: 50%;
+    }
+  }
+  .el-button{
+    margin-left: 20px;
+  }
+}
+
+.inquiry-machine-bind-top{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #0c0e1e;
+  border-bottom: 1px solid #edeff3;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 10px;
+  .inquiry-machine-bind-params{
+    font-size: 14px;
+  }
+}
 </style>