From 0aee4257e93ea44a5c4ee26a5c06622d4a53973d Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Fri, 17 Jan 2025 11:13:33 +0800
Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/inquiryMachine.js          |  11 +++-
 src/assets/styles/index.scss       |   2 +-
 src/assets/styles/style.scss       |  22 +++++++
 src/views/girdList.vue             |  81 +++++++++++++++++++++--
 src/views/index.vue                |  47 +++++++++++--
 src/views/module/canvasPreview.vue |  12 ++--
 src/views/module/search.vue        |   2 +-
 src/views/regionsList.vue          |  41 ++++++++++--
 src/views/shelfList.vue            | 102 +++++++++++++++++++++++++++--
 9 files changed, 289 insertions(+), 31 deletions(-)

diff --git a/src/api/inquiryMachine.js b/src/api/inquiryMachine.js
index adf5008..30dbe41 100644
--- a/src/api/inquiryMachine.js
+++ b/src/api/inquiryMachine.js
@@ -81,6 +81,14 @@ export function FetchInitBookDetailsByGrids(params) {
   })
 }
 
+// 根据书架和架位查看层架位
+export function FetchShelfGridByShelfIdAndGridShelf(params) {
+  return request({
+    url: 'api/queryDeviceAPI/getShelfGridByShelfIdAndGridShelf' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
 // 图书详情
 export function FetchInitBookDetailsSearchInto(params) {
   return request({
@@ -126,5 +134,6 @@ export default {
   FetchInitBookDetailsByGrids,
   FetchInitHotBookList,
   FetchInitHotShelfList,
-  FetchBookDetaisByBookRecNo
+  FetchBookDetaisByBookRecNo,
+  FetchShelfGridByShelfIdAndGridShelf
 }
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 8d28072..e983acc 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -562,7 +562,7 @@
   align-items: center;
   color: #0C0E1E;
   background-color: #fff;
-  margin-bottom: 20px;
+  // margin-bottom: 20px;
   h4{
     flex: 1;
   }
diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss
index 4cd9f79..de2cbc0 100644
--- a/src/assets/styles/style.scss
+++ b/src/assets/styles/style.scss
@@ -178,3 +178,25 @@ ul{
     }
   }
 }
+
+.swiper-title{
+  font-size: 22px;
+  color: #545B65;
+  .swiper-wrapper{
+    margin: 10px 0;
+    border-bottom: 1px solid #EDEFF3;
+  }
+}
+.swiper-slide-title {
+	width: auto !important;
+  margin-right: 20px;
+  cursor: pointer;
+	.tab-name {
+		padding: 10px;
+		&.active {
+      padding-bottom: 10px;
+      color: #0348F3;
+      border-bottom: 3px solid #0348F3;
+		}
+	}
+}
diff --git a/src/views/girdList.vue b/src/views/girdList.vue
index 89c8e2c..b1e3f17 100644
--- a/src/views/girdList.vue
+++ b/src/views/girdList.vue
@@ -91,9 +91,31 @@
           </div>
 
         </div>
-        <ul class="change-layer">
+        <!-- <ul class="change-layer">
           <li v-for="(item,index) in rackOptions" :key="index" :class="{ 'active': layerVal === index+1 }" @click="changeShelfGetGrid(parseInt(item.name))">{{ item.name }}</li>
-        </ul>
+        </ul> -->
+        <swiper
+          ref="swiperTitleLayer"
+          class="swiper-title layerShelf-swiper"
+          :options="swiperOptionTitlelayer"
+          :auto-update="true"
+          :auto-destroy="true"
+        >
+          <swiper-slide
+            v-for="(item,index) in rackOptions"
+            :key="index"
+            ref="swiperSlideItem"
+            class="swiper-slide-title"
+          >
+            <div
+              class="tab-name"
+              :class="{ active: layerVal === index+1 }"
+              @click="changeShelfGetGrid(parseInt(item.name))"
+            >
+              {{ item.name }}
+            </div>
+          </swiper-slide>
+        </swiper>
       </div>
     </div>
     <BookDetails ref="bookDetailsRef" />
@@ -105,14 +127,16 @@ import { FetchShelfGridByShelfIdAndGridShelf, FetchBillByShelfIdAndGridShelf, Fe
 import { positionCrud } from './mixins/index.js'
 import Search from './module/search'
 import BookDetails from './module/bookDetails'
-import { Swiper } from 'vue-awesome-swiper'
+import { Swiper, swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/swiper-bundle.css'
 
 export default {
   name: 'Index',
   components: {
     Search,
-    BookDetails
+    BookDetails,
+    swiper,
+    swiperSlide
   },
   mixins: [positionCrud],
   data() {
@@ -148,10 +172,19 @@ export default {
       baseStockData: [],
       shelfAllGridDataLoading: false,
       billNoImg: null,
-      bigImg: ''
+      bigImg: '',
+      gridName: '',
+      getGridToward: 1,
+      swiperOptionTitlelayer: {
+        slidesPerView: 'auto',
+        freeMode: true
+      }
     }
   },
   computed: {
+    swiperTitleLayer() {
+      return this.$refs.swiperTitleLayer.$el.swiper
+    },
     cellStyle: function() {
       const h = '76px'
       const w = '100%/' + this.rackNum
@@ -176,6 +209,7 @@ export default {
       const dataScreenShelf = JSON.parse(localStorage.getItem('dataScreenShelf'))
       this.floorName = dataScreenShelf.floorName
       this.regionName = dataScreenShelf.regionName
+      this.gridName = dataScreenShelf.gridName
       this.gridRow = dataScreenShelf.gridRow
       this.gridShelf = dataScreenShelf.gridShelf
 
@@ -339,13 +373,27 @@ export default {
     hidePopover() {
       this.popoverIndex = null
     },
+    updateParts(gridName) {
+      const parts = gridName.match(/(\d+)区(\d+)排([A-Za-z])面(\d+)架(\d+)层/)
+      if (parts) {
+        this.getGridShelf = parts[4]
+        this.getGridFloor = parts[5]
+        const toward = parts[3]
+        if (toward === 'A') {
+          this.getGridToward = 1
+        } else if (toward === 'B') {
+          this.getGridToward = 2
+        }
+      }
+    },
     changeShelfGetGrid(val) {
+      this.updateParts(this.gridName)
       this.shelfAllGridDataLoading = true
       this.layerVal = val
       const params = {
         'gridShelf': '0' + val,
         'shelfId': this.bookShelfDetails.id,
-        'toward': this.bookShelfDetails.toward,
+        'toward': this.getGridToward,
         'floorType': this.bookShelfDetails.floorType
       }
       FetchShelfGridByShelfIdAndGridShelf(params).then(res => {
@@ -505,4 +553,25 @@ export default {
   }
 }
 
+.layerShelf-swiper{
+  margin-top: 20px;
+  ::v-deep .swiper-wrapper{
+    font-size: 20px;
+    border-bottom: none !important;
+    .swiper-slide-title {
+      width: auto !important;
+      margin-right: 20px;
+      cursor: pointer;
+      .tab-name {
+        padding: 5px 10px;
+        &.active {
+          background-color: #0348F3;
+          color: #fff;
+          border-radius: 6px;
+          border: 2px solid #0348F3;
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 490434c..6b77ea4 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -6,10 +6,34 @@
         <h4 class="filter-header">图书馆总览</h4>
       </div>
       <div class="home-wrap tab-content">
-        <ul class="tab-nav">
+        <swiper
+          ref="swiperTitle"
+          class="swiper-title"
+          :options="swiperOptionTitle"
+          :auto-update="true"
+          :auto-destroy="true"
+        >
+          <swiper-slide
+            v-for="(item,index) in floorOptions"
+            :key="index"
+            ref="swiperSlideItem"
+            class="swiper-slide-title"
+          >
+            <div
+              class="tab-name"
+              :class="{ active: index === tabIndex }"
+              @click="changeActiveTab(index)"
+            >
+              {{ item.floorName }}
+            </div>
+          </swiper-slide>
+        </swiper>
+        <!-- <ul class="tab-nav">
           <li v-for="(item,index) in floorOptions" :key="index" :class="{ 'active-tab-nav': tabIndex == index }" @click="changeActiveTab(index)">{{ item.floorName }}<i /></li>
-        </ul>
+        </ul> -->
+
         <CanvasPreview ref="previewRefs" v-loading="prewLoading" page-preview="floor" :current-mark-data="currentMarkData" :image-url="imageUrl" />
+
       </div>
     </div>
 
@@ -32,11 +56,13 @@ import Search from './module/search'
 import Ranking from './module/ranking'
 import ShelfRanking from './module/shelfRanking'
 import defaultImg from '@/assets/images/default-img-bg.jpg'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/swiper-bundle.css'
 
 export default {
   name: 'Index',
   components: {
-    Search, CanvasPreview, Ranking, ShelfRanking
+    Search, CanvasPreview, Ranking, ShelfRanking, swiper, swiperSlide
   },
   mixins: [positionCrud],
   data() {
@@ -49,14 +75,24 @@ export default {
       imageRegionUrl: defaultImg,
       currentMarkData: null,
       allCoverData: [],
-      baseStockDataAllShelf: []
+      baseStockDataAllShelf: [],
+      swiperOptionTitle: {
+        slidesPerView: 'auto',
+        freeMode: true
+      }
+    }
+  },
+  computed: {
+    swiperTitle() {
+      return this.$refs.swiperTitle.$el.swiper
     }
   },
   created() {
     this.getFloorList()
   },
   mounted() {
-
+  },
+  beforeDestroy() {
   },
   methods: {
     getFloorList() {
@@ -77,6 +113,7 @@ export default {
       }
       this.allCoverData = []
       this.tabIndex = index
+      this.swiperTitle.slideTo(index, 500, false)
       const params = {
         'floorId': this.floorOptions[index].id
       }
diff --git a/src/views/module/canvasPreview.vue b/src/views/module/canvasPreview.vue
index 5244a42..1f73860 100644
--- a/src/views/module/canvasPreview.vue
+++ b/src/views/module/canvasPreview.vue
@@ -86,11 +86,11 @@ export default {
     }
   },
   mounted() {
-    if (this.canvasPreview.lowerCanvasEl) {
-      this.canvasPreview.getCanvas().el.addEventListener('touchstart', this.handleTouchStart.bind(this))
-      this.canvasPreview.getCanvas().el.addEventListener('touchmove', this.handleTouchMove.bind(this))
-      this.canvasPreview.getCanvas().el.addEventListener('touchend', this.handleTouchEnd.bind(this))
-    }
+    // if (this.canvasPreview.lowerCanvasEl) {
+    //   this.canvasPreview.getCanvas().el.addEventListener('touchstart', this.handleTouchStart.bind(this))
+    //   this.canvasPreview.getCanvas().el.addEventListener('touchmove', this.handleTouchMove.bind(this))
+    //   this.canvasPreview.getCanvas().el.addEventListener('touchend', this.handleTouchEnd.bind(this))
+    // }
   },
   beforeDestroy() {
     // if (this.canvasPreview) {
@@ -332,6 +332,6 @@ export default {
   width: 100%;
   background-color: #fff;
   overflow: hidden;
-  margin-top: -30px;
+  // margin-top: -30px;
 }
 </style>
diff --git a/src/views/module/search.vue b/src/views/module/search.vue
index 9f6b6f4..a21c714 100644
--- a/src/views/module/search.vue
+++ b/src/views/module/search.vue
@@ -56,7 +56,7 @@ export default {
     getHotSearch() {
       const params = {
         'fondsCode': this.libcode,
-        'size': 30
+        'size': 5
       }
       FetchFindHotSearch(params).then(res => {
         this.keywordData = res.filter(item => {
diff --git a/src/views/regionsList.vue b/src/views/regionsList.vue
index 97dc2da..d8530cc 100644
--- a/src/views/regionsList.vue
+++ b/src/views/regionsList.vue
@@ -13,9 +13,31 @@
         </div>
       </div>
       <div class="home-wrap tab-content">
-        <ul class="tab-nav">
+        <!-- <ul class="tab-nav">
           <li v-for="(item,index) in regionOptions" :key="index" :class="{ 'active-tab-nav': tabIndex == index }" @click="changeActiveTab(index)">{{ item.regionName }}<i /></li>
-        </ul>
+        </ul> -->
+        <swiper
+          ref="swiperTitle"
+          class="swiper-title"
+          :options="swiperOptionTitle"
+          :auto-update="true"
+          :auto-destroy="true"
+        >
+          <swiper-slide
+            v-for="(item,index) in regionOptions"
+            :key="index"
+            ref="swiperSlideItem"
+            class="swiper-slide-title"
+          >
+            <div
+              class="tab-name"
+              :class="{ active: tabIndex == index }"
+              @click="changeActiveTab(index)"
+            >
+              {{ item.regionName }}
+            </div>
+          </swiper-slide>
+        </swiper>
         <CanvasPreview ref="previewRefs" v-loading="prewLoading" page-preview="region" :current-mark-data="currentMarkData" :image-url="imageUrl" />
       </div>
     </div>
@@ -28,11 +50,13 @@ import CanvasPreview from './module/canvasPreview'
 import { positionCrud } from './mixins/index.js'
 import Search from './module/search'
 import defaultImg from '@/assets/images/default-img-bg.jpg'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/swiper-bundle.css'
 
 export default {
   name: 'Index',
   components: {
-    Search, CanvasPreview
+    Search, CanvasPreview, swiper, swiperSlide
   },
   mixins: [positionCrud],
   data() {
@@ -49,7 +73,16 @@ export default {
       imageRegionUrl: defaultImg,
       currentMarkData: null,
       allCoverData: [],
-      baseStockDataAllShelf: []
+      baseStockDataAllShelf: [],
+      swiperOptionTitle: {
+        slidesPerView: 'auto',
+        freeMode: true
+      }
+    }
+  },
+  computed: {
+    swiperTitle() {
+      return this.$refs.swiperTitle.$el.swiper
     }
   },
   created() {
diff --git a/src/views/shelfList.vue b/src/views/shelfList.vue
index 061d73b..027eca1 100644
--- a/src/views/shelfList.vue
+++ b/src/views/shelfList.vue
@@ -20,9 +20,31 @@
         </div>
       </div>
       <div class="tab-content">
-        <ul class="tab-nav">
+        <!-- <ul class="tab-nav">
           <li v-for="(item,index) in tabListData" :key="index" :class="{ 'active-tab-nav': tabIndex == index }" @click="changeActiveTab(index)">{{ item.name }}<i /></li>
-        </ul>
+        </ul> -->
+        <swiper
+          ref="swiperTitle"
+          class="swiper-title"
+          :options="swiperOptionTitle"
+          :auto-update="true"
+          :auto-destroy="true"
+        >
+          <swiper-slide
+            v-for="(item,index) in tabListData"
+            :key="index"
+            ref="swiperSlideItem"
+            class="swiper-slide-title"
+          >
+            <div
+              class="tab-name"
+              :class="{ active: tabIndex == index }"
+              @click="changeActiveTab(index)"
+            >
+              {{ item.name }}
+            </div>
+          </swiper-slide>
+        </swiper>
         <div class="tag-info">
           <!-- <p class="tag-sort">错序：<i class="iconfont icon-zhuangtai2" /></p>
           <p class="tag-place">错架：<i class="iconfont icon-zhuangtai2" /></p> -->
@@ -75,9 +97,31 @@
             </el-popover>
           </li>
         </ul>
-        <ul class="change-layer">
+        <!-- <ul class="change-layer">
           <li v-for="(item,index) in layerOptions" :key="index" :class="{ 'active': item.name === layerVal.name }" @click="changeShelfGetGrid(item)">{{ item.name }}</li>
-        </ul>
+        </ul> -->
+        <swiper
+          ref="swiperTitleLayer"
+          class="swiper-title layerShelf-swiper"
+          :options="swiperOptionTitlelayer"
+          :auto-update="true"
+          :auto-destroy="true"
+        >
+          <swiper-slide
+            v-for="(item,index) in layerOptions"
+            :key="index"
+            ref="swiperSlideItem"
+            class="swiper-slide-title"
+          >
+            <div
+              class="tab-name"
+              :class="{ active: item.name === layerVal.name }"
+              @click="changeShelfGetGrid(item)"
+            >
+              {{ item.name }}
+            </div>
+          </swiper-slide>
+        </swiper>
       </div>
     </div>
   </div>
@@ -87,11 +131,13 @@
 import { FetchShelfListByRegionId, FetchShelfGridAllByShelfIdText, FetchBookShelfDetails, FetchInitStockInfo } from '@/api/inquiryMachine'
 import { positionCrud } from './mixins/index.js'
 import Search from './module/search'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/swiper-bundle.css'
 
 export default {
   name: 'Index',
   components: {
-    Search
+    Search, swiper, swiperSlide
   },
   mixins: [positionCrud],
   data() {
@@ -129,10 +175,24 @@ export default {
       itemStockData: {},
       touchStartTime: null,
       touchStartPosition: null,
-      doubleClickTimeout: null
+      doubleClickTimeout: null,
+      swiperOptionTitle: {
+        slidesPerView: 'auto',
+        freeMode: true
+      },
+      swiperOptionTitlelayer: {
+        slidesPerView: 'auto',
+        freeMode: true
+      }
     }
   },
   computed: {
+    swiperTitle() {
+      return this.$refs.swiperTitle.$el.swiper
+    },
+    swiperTitleLayer() {
+      return this.$refs.swiperTitleLayer.$el.swiper
+    },
     cellStyle: function() {
       const h = '76px'
       const w = '118px'
@@ -201,7 +261,12 @@ export default {
         this.bookShelfDetails = res
 
         if (this.$route.query.tabIndex) {
-          this.getInitShelfGridByShelfId(this.bookShelfDetails.id, this.$route.query.tabIndex + 1)
+          if (this.bookShelfDetails.rowType === 1) {
+            this.tabIndex = 0
+            this.getInitShelfGridByShelfId(this.bookShelfDetails.id, this.bookShelfDetails.toward)
+          } else {
+            this.getInitShelfGridByShelfId(this.bookShelfDetails.id, parseInt(this.$route.query.tabIndex) + 1)
+          }
         } else {
           this.getInitShelfGridByShelfId(this.bookShelfDetails.id, this.bookShelfDetails.toward)
         }
@@ -350,7 +415,9 @@ export default {
     changeActiveTab(index) {
       this.tabIndex = index
       this.cellIndex = null
+      console.log('index', index)
       this.getInitShelfGridByShelfId(this.layerVal.id, index + 1)
+      this.swiperTitle.slideTo(index, 500, false)
     },
     handleCellCurrent(item, index) {
       this.cellIndex = index
@@ -626,4 +693,25 @@ export default {
 
 }
 
+.layerShelf-swiper{
+  margin-top: 20px;
+  ::v-deep .swiper-wrapper{
+    font-size: 20px;
+    border-bottom: none !important;
+    .swiper-slide-title {
+      width: auto !important;
+      margin-right: 20px;
+      cursor: pointer;
+      .tab-name {
+        padding: 5px 10px;
+        &.active {
+          background-color: #0348F3;
+          color: #fff;
+          border-radius: 6px;
+          border: 2px solid #0348F3;
+        }
+      }
+    }
+  }
+}
 </style>