diff --git a/src/api/shelf/index.js b/src/api/shelf/index.js
index a953c96..930a61f 100644
--- a/src/api/shelf/index.js
+++ b/src/api/shelf/index.js
@@ -42,4 +42,39 @@ export function saveBookShelfSignPoint(parameter) {
   })
 }
 
-export default { add, edit, del, FetchBookShelfDetails, saveBookShelfSignPoint }
+// 根据书架查看架位
+export function FetchInitShelfGridByShelfId(params) {
+  return request({
+    url: 'api/bookShelf/initShelfGridByShelfId' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
+// 编辑架位索书号
+export function FetcheEditSortmarkByGrid(parameter) {
+  return request({
+    url: 'api/bookShelf/editSortmarkByGrid',
+    method: 'post',
+    data: parameter
+  })
+}
+
+// 架位有序检查开关切换
+export function FetchChangeOrderByGrid(parameter) {
+  return request({
+    url: 'api/bookShelf/changeOrderByGrid',
+    method: 'post',
+    data: parameter
+  })
+}
+
+// 架位盘点开点开关切换
+export function FetchChangeCheckByGrid(parameter) {
+  return request({
+    url: 'api/bookShelf/changeCheckByGrid',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export default { add, edit, del, FetchBookShelfDetails, saveBookShelfSignPoint, FetchInitShelfGridByShelfId, FetcheEditSortmarkByGrid, FetchChangeOrderByGrid, FetchChangeCheckByGrid }
diff --git a/src/assets/styles/manage.scss b/src/assets/styles/manage.scss
index 461b678..8f1d866 100644
--- a/src/assets/styles/manage.scss
+++ b/src/assets/styles/manage.scss
@@ -300,8 +300,9 @@
   height: 100%;
   .cabinet-cell{
     position: relative;
-    font-size: 20px;
-    border: 1px solid #A6ADB6;
+    font-size: 14px;
+    color: #000;
+    border: 1px solid #000;
     overflow: hidden;
     // &:nth-last-of-type(-n+4) {
     //   margin-bottom: 0;
@@ -311,6 +312,7 @@
     // }
     span{
       display: block;
+      width: 100%;
       position: absolute;
       left: 50%;
       top: 50%;
diff --git a/src/views/components/mark.vue b/src/views/components/mark.vue
index ed216d0..f6b1027 100644
--- a/src/views/components/mark.vue
+++ b/src/views/components/mark.vue
@@ -41,7 +41,7 @@
         </li>
         <li>
           <p>书架规格</p>
-          <span>{{ currentMarkData && currentMarkData.shelfShelf + ' X ' + currentMarkData.shelfFloor }}</span>
+          <span>{{ currentMarkData && currentMarkData.shelfFloor+ ' X ' + currentMarkData.shelfShelf }}</span>
         </li>
         <li><span :class="['row-state', true ? 'end-state' : 'cancel-state' ]">{{ true ? '已标注': '未标注' }}</span></li>
       </ul>
@@ -154,9 +154,6 @@ export default {
         console.log('imageUrl')
       }
     }
-  },
-  created() {
-
   },
   mounted() {
     // this.$nextTick(() => {
diff --git a/src/views/visualCheck/venueDevice/area/index.vue b/src/views/visualCheck/venueDevice/area/index.vue
index d3353cd..519452d 100644
--- a/src/views/visualCheck/venueDevice/area/index.vue
+++ b/src/views/visualCheck/venueDevice/area/index.vue
@@ -143,7 +143,7 @@
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <MarkCover ref="markRefs" :is-book-shelf="false" :current-mark-data="currentMarkData" :image-url="imageUrl" />
+        <MarkCover ref="markRefs" :is-book-shelf="false" :current-mark-data="currentMarkData" :image-url="imageUrl" @handleCloseDialog="handleCloseDialog" />
       </div>
     </el-dialog>
   </div>
diff --git a/src/views/visualCheck/venueDevice/bookshelf/index.vue b/src/views/visualCheck/venueDevice/bookshelf/index.vue
index 33a04d6..e2fd7f6 100644
--- a/src/views/visualCheck/venueDevice/bookshelf/index.vue
+++ b/src/views/visualCheck/venueDevice/bookshelf/index.vue
@@ -35,6 +35,7 @@
             style="width: 100%;"
             height="540"
             @selection-change="selectionChangeHandler"
+            @row-dblclick="onRowDblclick"
             @row-click="clickRowHandler"
           >
             <el-table-column type="selection" align="center" width="55" />
@@ -42,7 +43,7 @@
             <el-table-column prop="shelfName" label="书架名称" />
             <el-table-column prop="shelfShelf" label="书架规格">
               <template slot-scope="scope">
-                <span>{{ scope.row.shelfShelf + ' X ' + scope.row.shelfFloor }}</span>
+                <span>{{ scope.row.shelfFloor + ' X ' + scope.row.shelfShelf }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="rowType" label="单/双面">
@@ -101,13 +102,13 @@
           </el-form-item>
           <el-row>
             <el-form-item label="单/双排" prop="rowType">
-              <el-radio-group v-model="form.rowType" v-removeAriaHidden size="mini" @change="changeSingleOrDouble($event)">
+              <el-radio-group v-model="form.rowType" v-removeAriaHidden size="mini">
                 <el-radio :label="1">单排</el-radio>
                 <el-radio :label="2">双排</el-radio>
               </el-radio-group>
             </el-form-item>
             <el-form-item v-if="form.rowType===1" label="A/B面" prop="toward">
-              <el-select v-model="form.toward" placeholder="请选择" style="width: 225px;" @change="changeAB($event)">
+              <el-select v-model="form.toward" placeholder="请选择" style="width: 225px;">
                 <el-option
                   v-for="(item,index) in abOptions"
                   :key="index"
@@ -119,23 +120,23 @@
           </el-row>
           <el-row>
             <el-form-item label="书架排号" prop="shelfRow">
-              <el-input v-model="form.shelfRow" />
+              <el-input v-model="form.shelfRow" @blur="formatShelfRow" />
             </el-form-item>
             <el-form-item label="书架名称" prop="shelfName">
               <el-input v-model="computedShelfName" disabled />
             </el-form-item>
           </el-row>
           <el-form-item label="书架规格" prop="rackSpecs">
-            <el-input-number v-model.number="form.shelfShelf" :min="1" :max="999" controls-position="right" style="width: 90px;" />
-            <span style="padding:0 12px;">✕</span>
             <el-input-number v-model.number="form.shelfFloor" :min="1" :max="999" controls-position="right" style="width: 90px;" />
+            <span style="padding:0 12px;">✕</span>
+            <el-input-number v-model.number="form.shelfShelf" :min="1" :max="999" controls-position="right" style="width: 90px;" />
           </el-form-item>
           <el-form-item label="架起始标" prop="startShelf">
-            <el-input-number v-model.number="form.startShelf" :min="0" :max="999" controls-position="right" />
+            <el-input-number v-model.number="form.startShelf" :min="1" :max="999" controls-position="right" />
           </el-form-item>
           <el-row>
             <el-form-item label="架号顺序" prop="shelfType">
-              <el-select v-model="form.shelfType" placeholder="请选择" style="width: 586px;" @change="changeOrder($event)">
+              <el-select v-model="form.shelfType" placeholder="请选择" style="width: 586px;">
                 <el-option
                   v-for="(item,index) in rackOrderOptions"
                   :key="index"
@@ -147,7 +148,7 @@
           </el-row>
           <el-row>
             <el-form-item label="层号顺序" prop="floorType">
-              <el-select v-model="form.floorType" placeholder="请选择" style="width: 586px;" @change="changeLayerSeq($event)">
+              <el-select v-model="form.floorType" placeholder="请选择" style="width: 586px;">
                 <el-option
                   v-for="(item,index) in layerSeqOptions"
                   :key="index"
@@ -159,14 +160,14 @@
           </el-row>
           <el-form-item label="倒架规则" prop="shelfRule">
             <el-radio-group v-model="form.shelfRule" v-removeAriaHidden size="mini">
-              <el-radio :label="1">无序</el-radio>
               <el-radio :label="2">有序</el-radio>
+              <el-radio :label="1">无序</el-radio>
             </el-radio-group>
           </el-form-item>
           <el-form-item label="错架判断" prop="shelfErrorJudge">
             <el-radio-group v-model="form.shelfErrorJudge" v-removeAriaHidden size="mini">
-              <el-radio :label="1">书架</el-radio>
               <el-radio :label="2">格子</el-radio>
+              <el-radio :label="1">书架</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-form>
@@ -201,7 +202,7 @@ import defaultImg from '@/assets/images/system/default-img.jpg'
 import MarkCover from '@/views/components/mark.vue'
 import { fabric } from 'fabric'
 
-const defaultForm = { id: null, floorName: null, floorId: null, regionName: null, rowType: 1, toward: 1, shelfRow: '', shelfName: '', shelfShelf: null, shelfFloor: null, startShelf: null, shelfType: null, floorType: null, shelfRule: null, shelfErrorJudge: null, signPoint: '' }
+const defaultForm = { id: null, floorName: null, floorId: null, regionName: null, rowType: 1, toward: 1, shelfRow: '', shelfName: '', shelfShelf: null, shelfFloor: null, startShelf: null, shelfType: null, floorType: null, shelfRule: 2, shelfErrorJudge: 2, signPoint: '' }
 export default {
   name: 'Bookshelf',
   components: { crudOperation, pagination, MarkCover },
@@ -326,6 +327,16 @@ export default {
 
   },
   methods: {
+    formatShelfRow() {
+      let value = this.form.shelfRow
+      value = value.toString()
+      if (value.length < 3) {
+        value = value.padStart(3, '0')
+      } else if (value.length > 3) {
+        value = value.slice(0, 3)
+      }
+      this.form.shelfRow = value
+    },
     validateShelfName(rule, value, callback) {
       if (this.form.shelfRow) {
         if (!value) {
@@ -429,11 +440,15 @@ export default {
       }
       FetchInitLibraryRegionList(params).then(res => {
         this.regionOptions = res.content
+        console.log('this.regionOptions', this.regionOptions)
         if (this.regionOptions.length > 0) {
           this.selectRegionVal = this.regionOptions[0]
           this.crud.query.regionId = this.selectRegionVal.id
-          this.crud.toQuery()
+        } else {
+          this.selectRegionVal = null
+          this.crud.query.regionId = null
         }
+        this.crud.toQuery()
       }).catch(() => {
       })
     },
@@ -451,21 +466,6 @@ export default {
         this.crud.toQuery()
       }
     },
-    changeSingleOrDouble(value) {
-      console.log(value)
-    },
-    changeAB(value) {
-      console.log(value)
-    },
-    changeOrder(value) {
-      console.log(value)
-    },
-    changeFloorValue(value) {
-      console.log(value)
-    },
-    changeLayerSeq(value) {
-      console.log(value)
-    },
     selectionChangeHandler(val) {
       this.crud.selections = val
       // 处理选择项为1且有签名点的情况
@@ -512,22 +512,14 @@ export default {
         console.error('666')
       }
     },
-    handleCloseDialog() {
-      // if (this.$refs.markRefs.canvas) {
-      //   this.$refs.markRefs.canvas.clear()
-      //   this.$refs.markRefs.canvas.dispose()
-      // }
-      this.markVisible = false
-      this.crud.refresh()
-    },
     clickRowHandler(row) {
-      console.log(row)
-
       this.$refs.table.clearSelection()
       this.$refs.table.toggleRowSelection(row)
-
+    },
+    onRowDblclick(row) {
       crudShelf.FetchBookShelfDetails({ 'shelfId': row.shelfId }).then(res => {
-        this.$router.push({ path: '/bookshelf/bookshelfPosition', query: { 'bookShelfDetails': res }})
+        this.$router.push({ path: '/bookshelf/bookshelfPosition', query: { 'floorName': row.floorName, 'regionName': row.regionName }})
+        localStorage.setItem('bookShelfDetails', JSON.stringify(res))
       }).catch(() => {
       })
     },
@@ -544,19 +536,24 @@ export default {
           ids.push(val.id)
         })
         console.log(ids)
-        crudShelf.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)
-        })
+        this.$message({ message: '等后面板块做完再做这个', type: 'error', offset: 8 })
+        // crudShelf.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.markVisible = false
+      this.crud.refresh()
+    },
     initCanvasPreview(drawinfo) {
       this.canvasPreview = new fabric.Canvas('canvasPreview', {
         skipTargetFind: false,
diff --git a/src/views/visualCheck/venueDevice/bookshelfPosition/index.vue b/src/views/visualCheck/venueDevice/bookshelfPosition/index.vue
index 6c7f4dd..fa24892 100644
--- a/src/views/visualCheck/venueDevice/bookshelfPosition/index.vue
+++ b/src/views/visualCheck/venueDevice/bookshelfPosition/index.vue
@@ -2,26 +2,28 @@
   <div class="app-container">
     <div class="venue-header">
       <h4><i class="iconfont icon-shujia" />架位列表</h4>
-      <span class="bookshelf-area">一楼-A区</span>
+      <span class="bookshelf-area">{{ floorName }} - {{ regionName }}</span>
       <p><i class="iconfont icon-gongsi" />{{ user.fonds.fondsName }}</p>
     </div>
     <div class="bookshelf-main">
       <div class="bookshelf-top">
         <ul class="bookshelf-info">
           <li><p>书架名称：</p><span>{{ bookShelfDetails && bookShelfDetails.shelfName }}</span></li>
-          <li><p>书架规格：</p><span>{{ bookShelfDetails && bookShelfDetails.shelfShelf + ' X ' + bookShelfDetails.shelfFloor }}</span></li>
+          <li><p>书架规格：</p><span>{{ bookShelfDetails && bookShelfDetails.shelfFloor + ' X ' + bookShelfDetails.shelfShelf }}</span></li>
           <li><p>单/双面：</p><span>{{ bookShelfDetails && bookShelfDetails.rowType === 1 ? '单面' :'双面' }}</span></li>
           <li><p>倒架规则：</p><span>{{ bookShelfDetails && bookShelfDetails.shelfRule === 1 ? '无序' :'有序' }}</span></li>
           <li><p>错架判断：</p><span>{{ bookShelfDetails && bookShelfDetails.shelfErrorJudge === 1 ? '书架' :'格子' }}</span></li>
+          <!-- <li><p>前端测试用-架号顺序：</p><span>{{ bookShelfDetails && bookShelfDetails.shelfType === 1 ? '始终最左边为第1架（S型排架）' : (bookShelfDetails.shelfType === 2 ? 'A面最左为第1架（B面最左为最后1架）' : 'B面最左为第1架（A面最左为最后1架）') }}</span></li>
+          <li><p>前端测试用-层号顺序：</p><span>{{ bookShelfDetails && bookShelfDetails.floorType === 1 ? '最顶层为第一层（从上至下）' :'最底层为第一层（从下至上）' }}</span></li> -->
         </ul>
         <div class="bookshelf-button">
           <el-button size="mini" @click="doExport(crud.selections)">
             <i class="iconfont icon-daochu" />
             导出层位编码
           </el-button>
-          <el-button size="mini" :disabled="!isBindCarme">
+          <el-button size="mini" :disabled="!cellInfo.cameraId">
             <i class="iconfont icon-yulan" />
-            {{ isBindCarme ? '摄像头预览' : '未绑定摄像头' }}
+            {{ cellInfo.cameraId ? '摄像头预览' : '未绑定摄像头' }}
           </el-button>
         </div>
       </div>
@@ -67,8 +69,8 @@
               class="swiper-slide-content"
             >
               <ul class="cabinet-row">
-                <li v-for="(item,index) in layerNum*rackNum" :key="index" class="cabinet-cell" :style="cellStyle" :class="{ active: index === cellIndex }" @click="handleCellCurrent(index)">
-                  <span>{{ bookShelfDetails && bookShelfDetails.shelfName +''+ (index+1) }}</span>
+                <li v-for="(item,index) in booShelfGrid" :key="index" class="cabinet-cell" :style="cellStyle" :class="{ active: index === cellIndex }" @click="handleCellCurrent(item,index)">
+                  <span>{{ item.gridName }}</span>
                 </li>
               </ul>
             </swiper-slide>
@@ -76,20 +78,20 @@
         </div>
         <div class="bookshelf-right-info">
           <div class="layer-status">
-            <span class="row-state soon-state">待初始化</span>
-            <!-- <span class="row-state end-state">正常盘点</span>
-            <span class="row-state cancel-state">停止盘点</span> -->
-            <span v-if="bookShelfDetails.shelfRule === 1" class="row-state other-state">无序倒架</span>
+            <span v-if="cellInfo.startSortmark && cellInfo.endSortmark && checkValue === 'true'" class="row-state end-state">正常盘点</span>
+            <span v-if="!cellInfo.startSortmark && !cellInfo.endSortmark && checkValue === 'true'" class="row-state soon-state">待初始化</span>
+            <span v-if="checkValue === 'false'" class="row-state cancel-state">停止盘点</span>
+            <span v-if="bookSortValue === 'false'" class="row-state other-state">无序倒架</span>
             <span v-else class="row-state ing-state">有序倒架</span>
           </div>
-          <h5 class="layer-name">001排A面01架1层</h5>
+          <h5 class="layer-name">{{ cellInfo.gridName }}</h5>
           <div class="layer-code-sort">
             <ul>
               <!-- I247.58/586 -->
-              <li><p>起始索书号</p><span>-</span></li>
-              <li><p>结束索书号</p><span>I247.58/592:3</span></li>
+              <li><p>起始索书号</p><span>{{ cellInfo.startSortmark ? cellInfo.startSortmark : '-' }}</span></li>
+              <li><p>结束索书号</p><span>{{ cellInfo.endSortmark? cellInfo.endSortmark : '-' }}</span></li>
             </ul>
-            <el-button size="mini" class="edit-callNumber" @click="callNumVisible = true">
+            <el-button size="mini" class="edit-callNumber" @click="handleEditGridNum">
               <!-- <i class="iconfont icon-yulan" /> -->
               <i>编&nbsp;&nbsp;&nbsp;辑</i>
               <i>索书号</i>
@@ -129,14 +131,14 @@
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
         <el-form ref="form" :rules="rules" :model="form" size="small" label-width="100px">
-          <el-form-item label="所属架位" prop="floorName">
-            <el-input v-model="form.floorName" disabled style="width: 580px;" />
+          <el-form-item label="所属架位" prop="gridName">
+            <el-input v-model="form.gridName" disabled style="width: 580px;" />
           </el-form-item>
-          <el-form-item label="起始索书号" prop="startNum">
-            <el-input v-model="form.startNum" style="width: 580px;" />
+          <el-form-item label="起始索书号" prop="startSortmark">
+            <el-input v-model="form.startSortmark" style="width: 580px;" />
           </el-form-item>
-          <el-form-item label="结束索书号" prop="endNum">
-            <el-input v-model="form.endNum" style="width: 580px;" />
+          <el-form-item label="结束索书号" prop="endSortmark">
+            <el-input v-model="form.endSortmark" style="width: 580px;" />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -150,8 +152,7 @@
 
 <script>
 // https://blog.csdn.net/qq_37236395/article/details/119737898
-import crudFloor from '@/api/floor/index'
-import CRUD, { presenter, header, crud } from '@crud/crud'
+import { FetchInitShelfGridByShelfId, FetcheEditSortmarkByGrid, FetchChangeOrderByGrid, FetchChangeCheckByGrid } from '@/api/shelf/index'
 import { mapGetters } from 'vuex'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
@@ -159,22 +160,19 @@ import 'swiper/dist/css/swiper.css'
 export default {
   name: 'BookshelfPosition',
   components: { swiper, swiperSlide },
-  cruds() {
-    return CRUD({ title: '架位', url: 'api/libraryFloor/initLibraryFloorList', crudMethod: { ...crudFloor }, sort: [], optShow: {
-      add: true,
-      edit: true,
-      del: false,
-      download: false,
-      group: false,
-      reset: false
-    }})
-  },
-  mixins: [presenter(), header(), crud()],
   data() {
     const _this = this
     return {
+      floorName: null,
+      regionName: null,
       bookShelfDetails: null,
-      isBindCarme: false,
+      booShelfGrid: null,
+      cellInfo: {
+        gridName: null,
+        startSortmark: null,
+        endSortmark: null,
+        cameraId: null
+      },
       callNumVisible: false,
       layerNum: 0,
       rackNum: 0,
@@ -182,13 +180,13 @@ export default {
       bookSortValue: 'true',
       swiperActiveIndex: 0,
       cellIndex: null,
-      titleActive: '',
       swiperOptionContent: {
         slidesPerView: 'auto',
         on: {
           slideChangeTransitionStart: function() {
             _this.cellIndex = null
             _this.swiperActiveIndex = this.activeIndex
+            console.log('activeIndexffff', this.swiperActiveIndex)
             _this.swiperTitle.slideTo(this.activeIndex, 500, false)
           }
         }
@@ -197,27 +195,24 @@ export default {
         slidesPerView: 'auto',
         freeMode: true
       },
-      tabListData: [
-        {
-          name: 'A面'
-        },
-        {
-          name: 'B面'
-        }
-      ],
+      tabListData: [],
       form: {
-        'floorName': null,
-        'startNum': null,
-        'endNum': null
+        id: null,
+        gridName: null,
+        startSortmark: null,
+        endSortmark: null,
+        check: null,
+        order: null,
+        cameraId: null
       },
       rules: {
-        floorName: [
+        gridName: [
           { required: true, message: '所属架位不可为空', trigger: 'blur' }
         ],
-        startNum: [
+        startSortmark: [
           { required: true, message: '起始索书号不可为空', trigger: 'blur' }
         ],
-        endNum: [
+        endSortmark: [
           { required: true, message: '结束索书号不可为空', trigger: 'blur' }
         ]
       }
@@ -236,99 +231,254 @@ export default {
     },
     cellStyle: function() {
       const h = '100%/' + this.layerNum
-      // if (this.cabinetNum > 8) {
-      //   h = '100%/' + (this.deviceData.rowNo - 1)
-      // } else {
-      //   h = '100%/' + this.deviceData.rowNo
-      // }
-      // const h = '100%/' + this.deviceData.rowNo
       const w = '100%/' + this.rackNum
       return { width: `calc(${w} - 4px )`, height: `calc(${h} - 2px)` }
     }
-    // heightStyle: function() {
-    //   let h
-    //   if (this.cabinetNum > 8) {
-    //     h = '100%/' + (this.deviceData.rowNo - 1)
-    //   } else {
-    //     h = '100%/' + this.deviceData.rowNo
-    //   }
-    //   // const h = '100%/' + this.deviceData.rowNo
-    //   return { height: `calc(${h})` }
-    // },
-    // widhtStyle: function() {
-    //   const w = '100%/' + this.deviceData.partNo
-    //   return { width: `calc(${w} - 10px)` }
-    // }
   },
   watch: {
     '$route'(val, from) { // 监听到路由（参数）改变
       if (this.$route.query) {
-        this.bookShelfDetails = this.$route.query.bookShelfDetails
+        this.floorName = this.$route.query.floorName
+        this.regionName = this.$route.query.regionName
       }
     }
   },
+  async created() {
+    if (this.$route.query) {
+      this.floorName = this.$route.query.floorName
+      this.regionName = this.$route.query.regionName
+    }
+    if (localStorage.getItem('bookShelfDetails')) {
+      this.bookShelfDetails = JSON.parse(localStorage.getItem('bookShelfDetails'))
+      this.layerNum = this.bookShelfDetails.shelfFloor
+      this.rackNum = this.bookShelfDetails.shelfShelf
+
+      // 单面/双面
+      this.tabListData = this.bookShelfDetails.rowType === 1
+        ? this.bookShelfDetails.toward === 1
+          ? [{ name: 'A面' }]
+          : [{ name: 'B面' }]
+        : [{ name: 'A面' }, { name: 'B面' }]
+
+      // 层数据
+      this.getInitShelfGridByShelfId(this.bookShelfDetails.toward)
+    }
+  },
+  mounted() {
+  },
   methods: {
-    [CRUD.HOOK.beforeRefresh]() {
-      this.bookShelfDetails = this.$route.query.bookShelfDetails
-      this.layerNum = this.bookShelfDetails.shelfShelf
-      this.rackNum = this.bookShelfDetails.shelfFloor
+    getInitShelfGridByShelfId(toward) {
+      // rowType 1 单 2 双
+      // toward 1 A面  2 B面
+      // shelfType 1 '始终最左边为第1架（S型排架）'
+      // shelfType 2 'A面最左为第1架（B面最左为最后1架）'
+      // shelfType 3 'B面最左为第1架（A面最左为最后1架）'
+      // floorType 1 '最顶层为第一层（从上至下）'
+      // floorType 2 '最底层为第一层（从下至上）'
+      FetchInitShelfGridByShelfId({ 'shelfId': this.bookShelfDetails.id, 'toward': toward }).then(res => {
+        const sortFunction = toward === 1 ? {
+          1: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' },
+          2: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' },
+          3: { 1: 'sortBookshelvesRightTop', 2: 'sortBookshelvesRightBottom' }
+        } : {
+          1: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' },
+          2: { 1: 'sortBookshelvesRightTop', 2: 'sortBookshelvesRightBottom' },
+          3: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' }
+        }
+        const shelfType = this.bookShelfDetails.shelfType
+        const floorType = this.bookShelfDetails.floorType
+        const sortMethod = sortFunction[shelfType][floorType]
+        this.booShelfGrid = this[sortMethod](res)
+      }).catch(() => {
+      })
     },
-    [CRUD.HOOK.afterRefresh](crud) {
+    // 最左为第一架, 最顶层为第一层   从上往下
+    sortBookshelvesLeftTop(data) {
+      const sortedData = []
+      const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor)))
+      const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.slice(-1))))
+
+      for (let i = 1; i <= maxFloor; i++) {
+        for (let j = 1; j <= maxShelf; j++) {
+          const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.slice(-1)) === j)
+          if (currentShelf) {
+            sortedData.push(currentShelf)
+          }
+        }
+      }
+      return sortedData
     },
-    // 提交前的验证
-    [CRUD.HOOK.afterValidateCU](crud) {
-      console.log(crud.form)
-      return true
+    // 最右为第一架,最左为最后一架, 最顶层为第一层   从上往下
+    sortBookshelvesRightTop(data) {
+      const sortedData = []
+      // 获取最大的楼层数
+      const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor)))
+      const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.match(/\d+$/)[0])))
+      for (let i = 1; i <= maxFloor; i++) {
+        // 从最大的书架层数开始，向下排序
+        for (let j = maxShelf; j >= 1; j--) {
+          const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.match(/\d+$/)[0]) === j)
+          if (currentShelf) {
+            sortedData.push(currentShelf)
+          }
+        }
+      }
+      return sortedData
     },
-    handleSlideToFun(index) {
-      this.swiperActiveIndex = index
-      this.swiperContent.slideTo(index, 500, false)
-      this.swiperTitle.slideTo(index, 500, false)
+    // 最左为第一架, 最底层为第一层   从下往上
+    sortBookshelvesLeftBottom(data) {
+      const sortedData = []
+      // 获取最大的楼层数
+      const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor)))
+      // 获取最大的书架层数
+      const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.slice(-1))))
+      for (let i = maxFloor; i >= 1; i--) {
+        for (let j = 1; j <= maxShelf; j++) {
+          const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.slice(-1)) === j)
+          if (currentShelf) {
+            sortedData.push(currentShelf)
+          }
+        }
+      }
+      return sortedData
+    },
+    // 最左为最后一架, 最底层为第一层    从下往上
+    sortBookshelvesRightBottom(data) {
+      const sortedData = []
+      // 获取最大的楼层数
+      const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor)))
+      const maxShelfPerFloor = data.map(item => parseInt(item.gridShelf.match(/\d+$/)[0]))
+        .reduce((acc, curr, index, arr) => {
+          const floor = parseInt(data[index].gridFloor)
+          if (!acc[floor]) acc[floor] = 1
+          if (acc[floor] < curr) acc[floor] = curr
+          return acc
+        }, {})
+      // 从最大的楼层开始向下遍历
+      for (let i = maxFloor; i >= 1; i--) {
+        // 从最大的书架编号开始向左遍历
+        for (let j = maxShelfPerFloor[i] || 1; j >= 1; j--) {
+          const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.match(/\d+$/)[0]) === j)
+          if (currentShelf) {
+            sortedData.push(currentShelf)
+          }
+        }
+      }
+      return sortedData
     },
     handleSlidClickFun(index) {
       this.cellIndex = null
       this.handleSlideToFun(index)
+      if (localStorage.getItem('bookShelfDetails')) {
+        this.getInitShelfGridByShelfId(index + 1)
+      }
     },
-    handleCellCurrent(index) {
-      this.cellIndex = index
-    },
-    changeCheckSwitch(data) {
-      console.log(data)
-      this.$confirm('此操作将开启/关闭该架位的盘点功能' + '<span>你是否还要继续？</span>', '提示', {
-        confirmButtonText: '继续',
-        cancelButtonText: '取消',
-        type: 'warning',
-        dangerouslyUseHTMLString: true
-      }).then(() => {
-      }).catch(() => {
-        this.checkValue = data === 'true' ? 'false' : 'true'
-      })
+    handleSlideToFun(index) {
+      this.swiperActiveIndex = index
+      this.swiperContent.slideTo(index, 500, false)
+      this.swiperTitle.slideTo(index, 500, false)
     },
-    changeBookSortSwitch(data) {
-      console.log(data)
-      this.$confirm('此操作将开启/关闭该架位的图书顺序检查' + '<span>你是否还要继续？</span>', '提示', {
-        confirmButtonText: '继续',
-        cancelButtonText: '取消',
-        type: 'warning',
-        dangerouslyUseHTMLString: true
-      }).then(() => {
-      }).catch(() => {
-        this.bookSortValue = data === 'true' ? 'false' : 'true'
-      })
+    handleCellCurrent(item, index) {
+      this.cellIndex = index
+      this.cellInfo = {
+        id: item.id,
+        gridName: item.gridName,
+        startSortmark: item.startSortmark,
+        endSortmark: item.endSortmark,
+        cameraId: item.cameraId,
+        check: item.isCheck,
+        order: item.isOrder
+      }
+      this.checkValue = `${item.isCheck}`
+      this.bookSortValue = `${item.isOrder}`
     },
-    handleClose() {
-      this.$refs['form'].resetFields()
-      this.callNumVisible = false
+    handleEditGridNum() {
+      console.log(this.cellIndex)
+      if (this.cellIndex !== null) {
+        this.callNumVisible = true
+        this.form = this.cellInfo
+        console.log(this.cellInfo)
+      } else {
+        this.$message({ message: '请选择需要操作得层位', type: 'error', offset: 8 })
+      }
     },
     handleSaveCallNum() {
       if (this.$refs['form']) {
         this.$refs['form'].validate((valid) => {
           if (valid) {
-            this.callNumVisible = false
+            console.log(this.form)
+            FetcheEditSortmarkByGrid(this.form).then(res => {
+              console.log(res)
+              if (res) {
+                this.$message({ message: '编辑索书号范围成功', type: 'success', offset: 8 })
+                this.callNumVisible = false
+              }
+            }).catch(() => {
+            })
           }
         })
       }
     },
+    handleClose() {
+      this.$refs['form'].resetFields()
+      this.callNumVisible = false
+    },
+    // 盘点
+    changeCheckSwitch(data) {
+      console.log(data)
+      if (this.cellIndex !== null) {
+        this.$confirm('此操作将开启/关闭该层位的盘点功能' + '<span>你是否还要继续？</span>', '提示', {
+          confirmButtonText: '继续',
+          cancelButtonText: '取消',
+          type: 'warning',
+          dangerouslyUseHTMLString: true
+        }).then(() => {
+          this.cellInfo.check = JSON.parse(data)
+          console.log(this.cellInfo)
+          FetchChangeCheckByGrid(this.cellInfo).then(res => {
+            this.$message({ message: '修改层位盘点状态成功', type: 'success', offset: 8 })
+            if (localStorage.getItem('bookShelfDetails')) {
+              this.getInitShelfGridByShelfId(this.swiperActiveIndex + 1)
+            }
+          }).catch(() => {
+            this.checkValue = data === 'true' ? 'false' : 'true'
+          })
+        }).catch(() => {
+          this.checkValue = data === 'true' ? 'false' : 'true'
+        })
+      } else {
+        this.$message({ message: '请选择需要操作得层位', type: 'error', offset: 8 })
+        this.checkValue = data === 'true' ? 'false' : 'true'
+        return false
+      }
+    },
+    changeBookSortSwitch(data) {
+      console.log(data)
+      if (this.cellIndex !== null) {
+        this.$confirm('此操作将开启/关闭该层位的图书顺序检查' + '<span>你是否还要继续？</span>', '提示', {
+          confirmButtonText: '继续',
+          cancelButtonText: '取消',
+          type: 'warning',
+          dangerouslyUseHTMLString: true
+        }).then(() => {
+          this.cellInfo.order = JSON.parse(data)
+          FetchChangeOrderByGrid(this.cellInfo).then(res => {
+            this.$message({ message: '修改图书有序检查状态成功', type: 'success', offset: 8 })
+            if (localStorage.getItem('bookShelfDetails')) {
+              this.getInitShelfGridByShelfId(this.swiperActiveIndex + 1)
+            }
+          }).catch(() => {
+            this.bookSortValue = data === 'true' ? 'false' : 'true'
+          })
+        }).catch(() => {
+          this.bookSortValue = data === 'true' ? 'false' : 'true'
+        })
+      } else {
+        this.$message({ message: '请选择需要操作得层位', type: 'error', offset: 8 })
+        this.bookSortValue = data === 'true' ? 'false' : 'true'
+        return false
+      }
+    },
     doExport(data) {
       console.log(data)
       // this.crud.downloadLoading = true